:root{
--bg:#0B0D10; /* dunkles Schwarz – bleibt */
--bg-2:#101319;
--panel:#151A21;
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.18);
--ink:#F4F6F8;
--muted:#A7AEB6;
--muted-2:#6E747B;
--brand-grey:#595D61; /* HighStep Grau */
--accent:#76B82A; /* HighStep Grün */
--accent-hover:#86CC33;
--accent-soft:rgba(118,184,42,.14);
--maxw:1280px;
--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--ink);
font-family:'Roboto',system-ui,sans-serif;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--accent);color:#06080A}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.display{font-family:'Roboto Condensed',sans-serif;font-weight:800;line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.eyebrow{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.lede{color:var(--muted);font-size:19px;max-width:62ch}
/* ---------- Bilder (Cover) ---------- */
.bg-img,.bg-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.prod:hover .bg-img,.app-card:hover .bg-img,.proj:hover .bg-img{transform:scale(1.05)}
.prod-media .bg-img{z-index:0}
.prod-media .tag{z-index:2}
.prod-media.playing .bg-img{opacity:0;transition:opacity .3s}
/* ---------- Placeholder system (Bilder folgen später) ---------- */
.ph{position:absolute;inset:0;overflow:hidden;
background:
repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 14px,rgba(255,255,255,0) 14px 28px),
linear-gradient(135deg,#141922,#0D1014);
display:flex;align-items:center;justify-content:center;
transition:transform .9s var(--ease);}
.ph::before{content:"";position:absolute;inset:16px;border:1px dashed rgba(255,255,255,.13);pointer-events:none}
.ph::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;opacity:.45;pointer-events:none;
background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A929B' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='1.5'/%3E%3Ccircle cx='8' cy='9.5' r='1.6'/%3E%3Cpath d='M3.5 17l4.5-4.5 3.5 3.5 4-4 5 5'/%3E%3C/svg%3E")}
.ph .ph-cap{display:none}
/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:200;transition:width .1s linear}
/* ---------- Hinweis-Leiste ---------- */
.announce{background:var(--accent);color:#06080A}
.announce.hidden{display:none}
.announce .wrap{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;padding-top:9px;padding-bottom:9px}
.announce p{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center;font-size:14px;font-weight:500;color:#06080A;padding:0 40px}
.announce p b{font-weight:700}
.announce-cta{background:#06080A;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:7px 16px;border-radius:2px;white-space:nowrap;transition:transform .2s,background .2s}
.announce-cta:hover{transform:translateY(-1px);background:#13171d}
.announce-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:none;border:0;color:#06080A;font-size:22px;line-height:1;cursor:pointer;opacity:.65;transition:opacity .2s}
.announce-close:hover{opacity:1}
/* ---------- Top utility bar ---------- */
.topbar{background:#06080A;border-bottom:1px solid var(--line);font-size:12.5px;letter-spacing:.04em}
.topbar .wrap{display:flex;justify-content:flex-end;gap:26px;align-items:center;height:38px}
.topbar a{color:var(--muted);transition:color .2s}
.topbar a:hover{color:var(--ink)}
.topbar .lang{color:var(--muted-2);display:flex;gap:8px;border-left:1px solid var(--line);padding-left:22px}
.topbar .lang b{color:var(--ink)}
/* ---------- Header ---------- */
header.nav{position:sticky;top:0;z-index:100;background:rgba(11,13,16,.55);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
header.nav.scrolled{background:rgba(8,10,13,.92);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:12px;font-family:'Roboto Condensed';font-weight:900;letter-spacing:-.01em;font-size:20px;text-transform:uppercase}
.logo-img{height:42px;width:auto;display:block}
.foot-about .logo-img{height:46px}
.logo .mark{width:34px;height:34px;border:2px solid var(--accent);position:relative;display:grid;place-items:center;flex:0 0 auto}
.logo .mark::before{content:"";width:8px;height:8px;background:var(--accent)}
.logo .mark span{position:absolute;width:2px;height:14px;background:var(--accent);top:-9px;left:50%;transform:translateX(-50%)}
.logo small{display:block;font-family:'Roboto';font-weight:500;font-size:10px;letter-spacing:.32em;color:var(--muted);text-transform:uppercase;margin-top:2px}
.menu{display:flex;align-items:center;gap:30px;list-style:none}
.menu > li > a{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:.01em;transition:color .2s;padding:6px 0;position:relative}
.menu > li > a:hover{color:var(--ink)}
.menu > li > a::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--accent);transition:width .25s var(--ease)}
.menu > li > a:hover::after{width:100%}
.nav-cta{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#06080A;font-weight:800;font-size:14px;padding:11px 20px;border-radius:2px;transition:transform .2s,background .2s}
.nav-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:26px;height:2px;background:var(--ink);transition:.3s}
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(86vw,380px);background:#0A0C0F;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .4s var(--ease);z-index:150;padding:96px 32px 32px;overflow-y:auto}
.mobile-panel.open{transform:translateX(0)}
.mobile-panel a{display:block;font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:18px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;visibility:hidden;transition:.3s;z-index:140}
.scrim.open{opacity:1;visibility:visible}
/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:15px;padding:15px 26px;border-radius:2px;cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s;border:1px solid transparent}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{background:var(--accent);color:#06080A;font-weight:800}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);background:rgba(118,184,42,.06)}
/* ---------- Hero ---------- */
.hero{position:relative;min-height:85vh;height:85vh;overflow:hidden}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;display:flex;align-items:flex-end;opacity:0;visibility:hidden;transition:opacity 1s var(--ease);z-index:0}
.hero-slide.active{opacity:1;visibility:visible;z-index:1}
.hero-bg{position:absolute;inset:0;z-index:0}
/* Hero-Film liegt ueber dem Standbild. Wer reduzierte Bewegung eingestellt
hat, sieht nur das Bild darunter. */
.hero-bg .bg-vid{z-index:0}
@media (prefers-reduced-motion: reduce){ .hero-bg .bg-vid{display:none} }
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background:
linear-gradient(180deg,rgba(11,13,16,.45) 0%,rgba(11,13,16,.2) 35%,rgba(11,13,16,.75) 78%,var(--bg) 100%),
linear-gradient(90deg,rgba(11,13,16,.72) 0%,rgba(11,13,16,.12) 60%)}
.hero-slide .wrap{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:104px}
.hero h1{font-size:clamp(32px,5.4vw,84px);max-width:18ch;overflow-wrap:normal}
.hero h1 .accent{color:var(--accent)}
.hero-sub{margin-top:26px;max-width:54ch;font-size:clamp(16px,1.6vw,20px);color:#D6DCE2}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-slide .wrap > *{opacity:0}
.hero-slide.active .wrap > *{animation:heroUp .8s var(--ease) forwards}
.hero-slide.active .wrap > *:nth-child(1){animation-delay:.2s}
.hero-slide.active .wrap > *:nth-child(2){animation-delay:.34s}
.hero-slide.active .wrap > *:nth-child(3){animation-delay:.48s}
.hero-slide.active .wrap > *:nth-child(4){animation-delay:.62s}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-controls{position:absolute;right:32px;bottom:30px;z-index:6;display:flex;align-items:center;gap:14px}
.hero-controls .h-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(11,13,16,.35);color:#fff;cursor:pointer;backdrop-filter:blur(4px);font-size:18px;line-height:1;display:grid;place-items:center;transition:background .2s,border-color .2s,color .2s}
.hero-controls .h-arrow:hover{background:var(--accent);border-color:var(--accent);color:#06080A}
.hero-dots{display:flex;gap:9px}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.hero-dots button.active{background:var(--accent);transform:scale(1.25)}
.scroll-hint{position:absolute;left:32px;bottom:30px;z-index:2;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.scroll-hint::before{content:"";width:34px;height:1px;background:var(--accent);animation:line 2s var(--ease) infinite}
@keyframes line{0%,100%{opacity:.3;width:14px}50%{opacity:1;width:40px}}
/* ---------- Trust strip (Logos später) ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden}
.trust .wrap{display:flex;align-items:center;gap:40px;padding-top:26px;padding-bottom:26px}
.trust .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap;flex:0 0 auto;max-width:180px;line-height:1.4}
.marquee{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:54px;width:max-content;animation:scrollx 34s linear infinite}
.marquee .wm{font-family:'Roboto Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:20px;color:var(--brand-grey);white-space:nowrap;transition:color .3s}
.marquee .wm:hover{color:var(--ink)}
@keyframes scrollx{to{transform:translateX(-50%)}}
/* ---------- Section scaffolding ---------- */
section{position:relative}
.pad{padding:clamp(72px,11vh,140px) 0}
.sec-head{max-width:74ch}
.sec-head h2{font-size:clamp(32px,5vw,68px);margin:18px 0 0}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}.delay-3{transition-delay:.3s}.delay-4{transition-delay:.4s}
/* ---------- Manifesto ---------- */
.manifesto h2{font-family:'Roboto Condensed';font-weight:800;font-size:clamp(28px,4.2vw,58px);line-height:1.05;letter-spacing:-.02em;max-width:20ch}
.manifesto h2 b{color:var(--accent);font-weight:800}
.manifesto .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}
.manifesto .lede{font-size:18px}
/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:64px}
.pillar{background:var(--bg);padding:40px 34px;transition:background .3s}
.pillar:hover{background:var(--panel)}
.pillar .ico{width:46px;height:46px;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;margin-bottom:24px;font-family:'Roboto Condensed';font-weight:800;font-size:16px}
.pillar h3{font-family:'Roboto Condensed';text-transform:uppercase;font-size:19px;letter-spacing:.01em;margin-bottom:10px}
.pillar p{color:var(--muted);font-size:15px}
/* ---------- Stats ---------- */
.stats{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px}
.stat .n{font-family:'Roboto Condensed';font-weight:900;font-size:clamp(40px,5.4vw,76px);line-height:1;letter-spacing:-.03em}
.stat .n .u{color:var(--accent)}
.stat .l{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.45;border-top:1px solid var(--line);padding-top:14px}
/* ---------- Products ---------- */
.prod{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;border:1px solid var(--line);margin-top:28px;background:var(--bg)}
.prod:nth-child(even) .prod-media{order:2}
.prod-media{position:relative;min-height:420px;overflow:hidden}
.prod:hover .prod-media .ph{transform:scale(1.04)}
.prod-media .ph::after{display:none}
.prod-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:0;transition:opacity .45s var(--ease)}
.prod-media.playing .prod-video{opacity:1}
.prod-media .pv-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(255,255,255,.65);background:rgba(11,13,16,.4);display:grid;place-items:center;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.prod-media:hover .pv-play{opacity:1}
.prod-media:hover .pv-play{transform:translate(-50%,-50%) scale(1.06)}
.prod-media.playing .pv-play{opacity:0}
.prod-media .pv-play::before{content:"";width:0;height:0;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.yt-cover{position:absolute;inset:0;z-index:1;overflow:hidden;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.prod-media.playing .yt-cover{opacity:1}
.yt-cover iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:auto;min-width:100%;aspect-ratio:16/9;border:0;pointer-events:none}
.prod-media .tag{position:absolute;top:20px;left:20px;z-index:2;background:var(--accent);color:#06080A;font-family:'Roboto Condensed';font-weight:800;font-size:12px;letter-spacing:.1em;padding:7px 12px;text-transform:uppercase}
.prod-body{padding:48px clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.prod-body .idx{font-family:'Roboto Condensed';font-weight:800;color:var(--muted-2);font-size:14px;letter-spacing:.2em}
.prod-body h3{font-family:'Roboto Condensed';text-transform:uppercase;font-size:clamp(24px,3vw,38px);letter-spacing:-.01em;margin:14px 0 16px;line-height:1.02}
.prod-body p{color:var(--muted);font-size:16px;margin-bottom:26px}
.prod-link{display:inline-flex;align-items:center;gap:10px;font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.05em;color:var(--ink);align-self:flex-start;border-bottom:2px solid var(--accent);padding-bottom:5px;transition:gap .25s,color .2s}
.prod-link:hover{gap:16px;color:var(--accent)}
/* ---------- Applications ---------- */
.apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:56px}
.app-card{position:relative;height:340px;overflow:hidden;border:1px solid var(--line);display:block}
.app-card:hover .ph{transform:scale(1.06)}
.app-card .ov{position:absolute;inset:0;z-index:2;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,transparent 35%,rgba(11,13,16,.82))}
.app-card h3{font-family:'Roboto Condensed';text-transform:uppercase;font-size:21px;letter-spacing:.01em}
.app-card p{color:var(--muted);font-size:14px;margin-top:6px;max-width:34ch;opacity:0;max-height:0;transition:.4s var(--ease);overflow:hidden}
.app-card:hover p{opacity:1;max-height:80px;margin-top:10px}
.app-card .more{margin-top:14px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;display:flex;align-items:center;gap:8px}
/* ---------- Cost / safety ---------- */
.cost{background:radial-gradient(120% 120% at 80% 0%,rgba(118,184,42,.10),transparent 55%),var(--bg-2);border-top:1px solid var(--line)}
.cost .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.cost .big{font-family:'Roboto Condensed';font-weight:900;font-size:clamp(64px,11vw,150px);line-height:.9;letter-spacing:-.04em}
.cost .big .cur{color:var(--accent)}
.cost h2{font-size:clamp(28px,4vw,50px)}
.cost .note{color:var(--muted-2);font-size:13px;margin-top:14px;max-width:46ch}
.cost ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:30px}
.cost li{display:flex;align-items:center;gap:11px;color:var(--muted);font-size:14.5px;padding:6px 0;border-bottom:1px solid var(--line)}
.cost li::before{content:"";width:7px;height:7px;background:var(--accent);flex:0 0 auto;transform:rotate(45deg)}
/* ---------- Quote ---------- */
.quote{border-top:1px solid var(--line)}
.quote blockquote{font-family:'Roboto Condensed';font-weight:700;font-size:clamp(24px,3.6vw,46px);line-height:1.18;letter-spacing:-.01em;max-width:24ch}
.quote .mark{color:var(--accent);font-size:clamp(60px,9vw,120px);line-height:.6;font-family:'Roboto Condensed';font-weight:900;display:block;margin-bottom:-10px}
.quote .by{margin-top:34px;display:flex;align-items:center;gap:16px;color:var(--muted)}
.quote .by .bar{width:42px;height:2px;background:var(--accent)}
.quote .by b{color:var(--ink);font-weight:600}
/* ---------- Projects ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.proj-grid .big-card{grid-column:span 2}
.proj{position:relative;overflow:hidden;border:1px solid var(--line);min-height:300px;display:block;background:var(--panel)}
.proj:hover .ph{transform:scale(1.05)}
.proj .ov{position:absolute;inset:0;z-index:2;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,transparent 40%,rgba(8,10,13,.85))}
.proj .cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:10px}
.proj h3{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:clamp(18px,2vw,26px);line-height:1.08;letter-spacing:-.01em}
.proj .big-text{font-size:clamp(22px,2.6vw,34px)}
.proj .pl{margin-top:16px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#fff;font-weight:700;display:flex;align-items:center;gap:9px;opacity:.85}
/* ---------- News ---------- */
.news{background:var(--bg-2);border-top:1px solid var(--line)}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:48px}
.news-item{background:var(--bg);padding:34px 30px;transition:background .3s;display:flex;flex-direction:column;gap:14px;min-height:230px}
.news-item:hover{background:var(--panel)}
.news-item .date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.news-item h3{font-size:18px;font-weight:600;line-height:1.3;font-family:'Roboto'}
.news-item p{color:var(--muted);font-size:14px;flex:1}
.news-item .rd{font-family:'Roboto Condensed';font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:flex;align-items:center;gap:8px}
.news-item:hover .rd{color:var(--accent)}
/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,13,16,.92),rgba(11,13,16,.55))}
.cta .wrap{position:relative;z-index:2;text-align:left}
.cta h2{font-size:clamp(34px,6vw,86px);max-width:16ch}
.cta p{color:#D6DCE2;font-size:19px;margin:22px 0 36px;max-width:50ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px}
/* ---------- Footer ---------- */
footer{background:#06080A;border-top:1px solid var(--line);padding-top:72px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:56px}
.foot-about .logo{margin-bottom:20px}
.foot-about p{color:var(--muted);font-size:14.5px;max-width:38ch}
.foot-about .safety{margin-top:24px;display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:4px}
.foot-about .safety img{height:42px;width:auto;display:block}
.foot-col h4{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.14em;color:var(--muted-2);margin-bottom:18px}
.foot-col a{display:block;color:var(--muted);font-size:14.5px;padding:7px 0;transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.news-sub p{color:var(--muted);font-size:14px;margin-bottom:16px}
.news-sub form{display:flex;border:1px solid var(--line-2)}
.news-sub input{flex:1;background:transparent;border:0;padding:13px 14px;color:var(--ink);font-size:14px;outline:none}
.news-sub button{background:var(--accent);border:0;color:#06080A;font-family:'Roboto Condensed';font-weight:800;padding:0 18px;cursor:pointer;text-transform:uppercase;font-size:13px;letter-spacing:.05em}
.news-sub .contact{margin-top:26px;font-size:14px;color:var(--muted);line-height:1.9}
.news-sub .contact a{color:var(--ink)}
.foot-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted-2)}
.foot-bottom .legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-bottom a:hover{color:var(--ink)}
/* ---------- Intro / Einstieg overlay ---------- */
.intro{position:fixed;inset:0;z-index:1000;background:#06080A;display:flex;align-items:center;justify-content:center;transition:transform 1s var(--ease);overflow:hidden}
.intro.done{transform:translateY(-100%)}
.intro::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 16px,transparent 16px 32px);pointer-events:none}
.intro-inner{position:relative;text-align:center;padding:20px}
.intro-rail{position:relative;height:120px;width:2px;margin:0 auto 26px;background:var(--line)}
.intro-rail::before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:2px;height:0;background:var(--accent);animation:climb 1.1s var(--ease) .15s forwards}
.intro-rail .climber{position:absolute;left:50%;bottom:0;width:14px;height:14px;border:2px solid var(--accent);background:#06080A;transform:translate(-50%,50%) rotate(45deg);opacity:0;animation:climbDot 1.1s var(--ease) .15s forwards}
@keyframes climb{to{height:100%}}
@keyframes climbDot{0%{opacity:0;bottom:0}15%{opacity:1}to{opacity:1;bottom:100%}}
.intro-word{font-family:'Roboto Condensed';font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(38px,7vw,84px);line-height:.9;color:var(--ink);opacity:0;transform:translateY(16px);animation:introUp .7s var(--ease) 1s forwards}
.intro-word small{display:block;font-family:'Roboto';font-weight:500;font-size:12px;letter-spacing:.4em;color:var(--muted);margin-top:10px}
.intro-logo{height:clamp(64px,11vw,118px);width:auto;display:block;margin:0 auto}
.intro-claim{margin-top:18px;font-family:'Roboto Condensed';text-transform:uppercase;letter-spacing:.18em;font-size:clamp(12px,1.6vw,15px);color:var(--accent);opacity:0;animation:introUp .7s var(--ease) 1.35s forwards}
.intro-bar{margin:30px auto 0;width:min(280px,60vw);height:2px;background:var(--line);overflow:hidden}
.intro-bar span{display:block;height:100%;width:0;background:var(--accent);animation:introBar 1.1s var(--ease) 1.1s forwards}
@keyframes introUp{to{opacity:1;transform:none}}
@keyframes introBar{to{width:100%}}
.intro-skip{position:absolute;bottom:26px;right:30px;font-family:'Roboto Condensed';text-transform:uppercase;letter-spacing:.15em;font-size:11px;color:var(--muted-2);background:none;border:0;cursor:pointer;transition:color .2s}
.intro-skip:hover{color:var(--ink)}
/* ---------- Video section ---------- */
.video{border-top:1px solid var(--line);background:
radial-gradient(120% 140% at 15% 0%,rgba(118,184,42,.08),transparent 50%),var(--bg)}
.video-stage{display:grid;grid-template-columns:1.85fr 1fr;gap:20px;margin-top:52px}
.video-main{position:relative;aspect-ratio:16/9;border:1px solid var(--line);overflow:hidden;cursor:pointer;background:#000}
.video-main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-main .video-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:26px;display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,transparent,rgba(8,10,13,.9));pointer-events:none}
.video-main .video-cap span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.video-main .video-cap h4{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);letter-spacing:-.01em}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:78px;height:78px;border-radius:50%;border:0;background:var(--accent);cursor:pointer;display:grid;place-items:center;transition:transform .25s var(--ease),background .2s;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.08);background:var(--accent-hover)}
.play-btn::before{content:"";width:0;height:0;border-left:22px solid #06080A;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:6px}
.video-list{display:flex;flex-direction:column;gap:10px;max-height:none}
.video-card{position:relative;display:grid;grid-template-columns:108px 1fr;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--line);padding:10px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s}
.video-card:hover{border-color:var(--line-2);background:#1A2028}
.video-card.active{border-color:var(--accent);background:rgba(118,184,42,.08)}
.video-card .vthumb{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.video-card .vc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:rgba(11,13,16,.65);border:1px solid var(--accent);display:grid;place-items:center}
.video-card .vc-play::before{content:"";width:0;height:0;border-left:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.video-card .vc-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.video-card .vc-cat{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:700}
.video-card .vc-title{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.video-card .vc-dur{font-size:12px;color:var(--muted-2)}
/* ---------- Testimonial slider ---------- */
.slider{border-top:1px solid var(--line);background:var(--bg-2)}
.slides{position:relative;margin-top:30px;min-height:260px}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.active{opacity:1;visibility:visible;transform:none;position:relative}
.slide .mark{color:var(--accent);font-size:clamp(54px,8vw,110px);line-height:.6;font-family:'Roboto Condensed';font-weight:900;display:block;margin-bottom:-6px}
.slide blockquote{font-family:'Roboto Condensed';font-weight:700;font-size:clamp(22px,3.4vw,42px);line-height:1.2;letter-spacing:-.01em;max-width:30ch}
.slide .by{margin-top:30px;display:flex;align-items:center;gap:16px;color:var(--muted);flex-wrap:wrap}
.slide .by .bar{width:42px;height:2px;background:var(--accent)}
.slide .by b{color:var(--ink);font-weight:600}
.slide .ph-tag{font-family:'Roboto Condensed';text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--muted-2);border:1px solid var(--line);padding:4px 9px}
.slider-nav{display:flex;align-items:center;gap:20px;margin-top:40px}
.slider-nav button.arrow{width:50px;height:50px;border:1px solid var(--line-2);background:none;color:var(--ink);cursor:pointer;font-size:18px;transition:border-color .2s,color .2s,background .2s}
.slider-nav button.arrow:hover{border-color:var(--accent);color:var(--accent);background:rgba(118,184,42,.06)}
.dots{display:flex;gap:9px;margin-left:6px}
.dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.dots button.active{background:var(--accent);transform:scale(1.3)}
/* ---------- Showcase / System im Einsatz (Video) ---------- */
.showcase{border-top:1px solid var(--line);padding-bottom:clamp(64px,10vh,128px)}
.showcase-media{position:relative;width:100%;height:clamp(420px,82vh,900px);overflow:hidden;background:#000}
.showcase-media .ph{position:absolute;inset:0}
.showcase-media .ph::after{display:none}
.showcase-media video,.showcase-media iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.showcase-media .grad{position:absolute;left:0;right:0;bottom:0;height:40%;z-index:2;background:linear-gradient(180deg,transparent,rgba(8,10,13,.4));pointer-events:none}
.showcase-toggle{position:absolute;left:24px;bottom:24px;z-index:4;width:50px;height:50px;border:0;background:rgba(255,255,255,.85);color:#0B0D10;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.showcase-toggle:hover{background:#fff;transform:scale(1.05)}
.showcase-toggle svg{width:20px;height:20px}
.showcase-toggle .i-play{display:none}
.showcase-toggle.paused .i-pause{display:none}
.showcase-toggle.paused .i-play{display:block}
.showcase-hint{position:absolute;right:24px;bottom:30px;z-index:4;font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:rgba(255,255,255,.7)}
.showcase-text{padding-top:clamp(40px,6vh,72px)}
.showcase-text h2{font-size:clamp(34px,6.5vw,96px)}
.showcase-text p{color:var(--muted);font-size:clamp(16px,1.7vw,21px);max-width:60ch;margin-top:22px}
/* ---------- Meet / Triff das System (Karussell) ---------- */
.meet{border-top:1px solid var(--line)}
.meet .sec-head{margin:0 auto;text-align:center}
.meet-sub{color:var(--muted);font-size:18px;margin-top:14px}
.meet-carousel{position:relative;margin-top:48px}
.meet-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px clamp(20px,calc((100vw - var(--maxw))/2 + 32px),320px)}
.meet-track::-webkit-scrollbar{display:none}
.meet-card{position:relative;flex:0 0 clamp(260px,30vw,400px);height:clamp(420px,50vw,560px);border-radius:16px;overflow:hidden;scroll-snap-align:center;background:var(--panel)}
.meet-card .ph{position:absolute;inset:0;border-radius:16px}
.meet-card .ph::after{display:none}
.meet-card .clip{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(11,13,16,.35);display:grid;place-items:center;pointer-events:none;transition:opacity .3s}
.meet-card .clip::before{content:"";width:0;height:0;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.meet-card .clip .seqtag{position:absolute;top:72px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:rgba(255,255,255,.7)}
.meet-card.open .clip{opacity:0}
.meet-card .shade{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 42%,rgba(8,10,13,.82));pointer-events:none}
.meet-label{position:absolute;left:26px;bottom:26px;z-index:3;color:#fff;font-family:'Roboto Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(22px,2.4vw,32px);line-height:1.05;max-width:80%;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.meet-plus{position:absolute;top:18px;right:18px;z-index:5;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);border:0;cursor:pointer;display:grid;place-items:center;transition:transform .35s var(--ease),background .25s}
.meet-plus::before{content:"";position:absolute;width:16px;height:2px;background:#0B0D10}
.meet-plus::after{content:"";position:absolute;width:2px;height:16px;background:#0B0D10}
.meet-plus:hover{background:#fff}
.meet-card.open .meet-plus{transform:rotate(135deg);background:var(--accent)}
.meet-card.open .meet-plus::before,.meet-card.open .meet-plus::after{background:#06080A}
.meet-detail{position:absolute;inset:0;z-index:4;background:rgba(11,13,16,.9);backdrop-filter:blur(3px);display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:26px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.meet-card.open .meet-detail{opacity:1;visibility:visible;transform:none}
.meet-detail .d-title{font-family:'Roboto Condensed';font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);line-height:1.05;letter-spacing:.01em;color:#fff}
.meet-detail p{color:var(--muted);font-size:15.5px;line-height:1.5}
.meet-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:50px;height:50px;border-radius:50%;background:#fff;color:#0B0D10;border:0;cursor:pointer;font-size:26px;line-height:1;display:grid;place-items:center;box-shadow:0 8px 28px rgba(0,0,0,.35);transition:transform .2s,background .2s,color .2s}
.meet-arrow:hover{background:var(--accent);transform:translateY(-50%) scale(1.06)}
.meet-arrow.prev{left:18px}.meet-arrow.next{right:18px}
.meet-dots{display:flex;justify-content:center;gap:9px;margin-top:28px}
.meet-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.meet-dots button.active{background:var(--accent);transform:scale(1.3)}
/* ---------- Service / After-Sales (Teaser) ---------- */
.service-teaser{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:clamp(84px,15vh,190px) 0}
.service-bg{position:absolute;inset:0;z-index:0}
.service-bg .ph{position:absolute;inset:0}
.service-bg .ph::after{display:none}
.service-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,13,16,.92),rgba(11,13,16,.5)),linear-gradient(180deg,rgba(11,13,16,.55),rgba(11,13,16,.7))}
.service-teaser .wrap{position:relative;z-index:2}
.service-teaser h2{font-size:clamp(34px,6vw,84px);max-width:16ch;margin-top:14px}
.service-teaser .st-keys{color:#D6DCE2;font-family:'Roboto Condensed';text-transform:uppercase;letter-spacing:.05em;font-size:clamp(15px,1.9vw,21px);margin:20px 0 34px}
.service-teaser .st-keys b{color:var(--accent);font-weight:700}
/* ---------- Scroll-Animation / Szenen ---------- */
.scroll-anim{position:relative;height:520vh;background:#000;border-top:1px solid var(--line)}
.sa-canvas-wrap{position:sticky;top:0;height:100vh;width:100%;overflow:hidden}
#saCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.sa-canvas-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
linear-gradient(180deg,rgba(11,13,16,.5) 0%,rgba(11,13,16,.1) 22%,rgba(11,13,16,0) 50%,rgba(11,13,16,.55) 100%),
linear-gradient(90deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,0) 35%,rgba(11,13,16,0) 60%,rgba(11,13,16,.6) 100%)}
.sa-head{position:absolute;left:max(28px,4vw);top:14vh;z-index:3;max-width:38ch}
.sa-head .eyebrow{margin-bottom:14px}
.sa-head h2{font-size:clamp(32px,5.2vw,78px);line-height:.98}
.sa-chapters{position:absolute;right:max(20px,3.5vw);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:6px;min-width:240px}
.sa-chapters a{display:flex;align-items:center;gap:14px;padding:11px 14px;color:var(--muted);border-right:2px solid transparent;transition:color .3s,border-color .3s,background .3s;font-family:'Roboto Condensed';text-transform:uppercase;letter-spacing:.08em;font-size:13px;background:linear-gradient(to right,transparent,rgba(11,13,16,.3));text-decoration:none}
.sa-chapters a:hover{color:var(--ink);background:linear-gradient(to right,transparent,rgba(11,13,16,.6))}
.sa-chapters a .ch-num{font-weight:800;color:var(--muted-2);font-size:11px;letter-spacing:.16em;min-width:22px}
.sa-chapters a .ch-label{flex:1;font-weight:700;color:#fff;opacity:.7;transition:opacity .3s}
.sa-chapters a:hover .ch-label{opacity:1}
.sa-chapters a .ch-arr{color:var(--muted-2);font-size:18px;transition:color .3s,transform .3s}
.sa-chapters a.active{border-right-color:var(--accent);background:linear-gradient(to right,transparent,rgba(118,184,42,.18))}
.sa-chapters a.active .ch-num{color:var(--accent)}
.sa-chapters a.active .ch-label{opacity:1}
.sa-chapters a.active .ch-arr{color:var(--accent);transform:translateX(5px)}
.sa-loader{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:4;width:200px;height:2px;background:rgba(255,255,255,.15);transition:opacity .5s}
.sa-loader span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.sa-loader.done{opacity:0;pointer-events:none}
.sa-hint{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:4;font-family:'Roboto Condensed';text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--muted);opacity:.7;display:flex;align-items:center;gap:10px;transition:opacity .5s}
.sa-hint::before{content:"";width:24px;height:1px;background:var(--accent);animation:line 2s var(--ease) infinite}
.scroll-anim.scrolled .sa-hint{opacity:0}
/* ---------- Theme Switcher (Light Mode) ---------- */
.theme-toggle{position:fixed;bottom:18px;right:18px;z-index:300;width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);background:rgba(11,13,16,.65);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);transition:transform .2s,background .2s,border-color .2s}
.theme-toggle:hover{transform:scale(1.06);border-color:var(--accent)}
.theme-toggle svg{width:22px;height:22px;color:#fff}
.theme-toggle .i-sun{display:none}
:root[data-theme="light"]{
--bg:#FFFFFF;
--bg-2:#F2F4F7;
--panel:#FFFFFF;
--line:rgba(11,13,16,.10);
--line-2:rgba(11,13,16,.18);
--ink:#0B0D10;
--muted:#595D61;
--muted-2:#8C9197;
--brand-grey:#595D61;
--accent:#76B82A;
--accent-hover:#67A325;
--accent-soft:rgba(118,184,42,.10);
}
[data-theme="light"] body{background:var(--bg);color:var(--ink)}
[data-theme="light"] .theme-toggle{background:rgba(255,255,255,.75);border-color:var(--line-2)}
[data-theme="light"] .theme-toggle svg{color:var(--ink)}
[data-theme="light"] .theme-toggle .i-moon{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:block}
/* Header / Nav */
[data-theme="light"] .topbar{background:#EEF0F3;border-bottom:1px solid var(--line)}
[data-theme="light"] .topbar a{color:var(--muted)}
[data-theme="light"] .topbar a:hover{color:var(--ink)}
[data-theme="light"] .topbar .lang{color:var(--muted-2);border-left-color:var(--line)}
[data-theme="light"] header.nav{background:rgba(255,255,255,.7)}
[data-theme="light"] header.nav.scrolled{background:rgba(255,255,255,.95);border-bottom:1px solid var(--line)}
[data-theme="light"] .menu > li > a{color:var(--muted)}
[data-theme="light"] .menu > li > a:hover{color:var(--ink)}
[data-theme="light"] .burger span{background:var(--ink)}
[data-theme="light"] .mobile-panel{background:#FFFFFF;border-left:1px solid var(--line)}
[data-theme="light"] .mobile-panel a{color:var(--ink);border-bottom-color:var(--line)}
/* Buttons */
[data-theme="light"] .btn-ghost{color:var(--ink);border-color:var(--line-2)}
[data-theme="light"] .btn-ghost:hover{color:var(--accent);border-color:var(--accent);background:rgba(118,184,42,.08)}
/* Logos (weiß-grünes Original): im Light-Mode auf schwarz reduzieren */
[data-theme="light"] .logo-img,
[data-theme="light"] .intro-logo{filter:brightness(0)}
/* Intro overlay */
[data-theme="light"] .intro{background:#FFFFFF}
[data-theme="light"] .intro::after{background:repeating-linear-gradient(45deg,rgba(0,0,0,.022) 0 16px,transparent 16px 32px)}
[data-theme="light"] .intro-rail{background:rgba(11,13,16,.14)}
[data-theme="light"] .intro-bar{background:rgba(11,13,16,.14)}
[data-theme="light"] .intro-skip{color:var(--muted-2)}
/* Hellere Sektionen */
[data-theme="light"] .trust,
[data-theme="light"] .news,
[data-theme="light"] .slider,
[data-theme="light"] .cost{background:#F2F4F7}
[data-theme="light"] .cost{background:radial-gradient(120% 120% at 80% 0%,rgba(118,184,42,.10),transparent 55%),#F2F4F7}
[data-theme="light"] .news-item{background:#FFFFFF}
[data-theme="light"] .news-item:hover{background:#F2F4F7}
[data-theme="light"] .meet-card{background:#F2F4F7}
[data-theme="light"] .meet-detail{background:rgba(255,255,255,.95)}
[data-theme="light"] .meet-detail .d-title{color:var(--ink)}
[data-theme="light"] .meet-label{color:var(--ink);text-shadow:0 2px 18px rgba(255,255,255,.55)}
[data-theme="light"] .video-card{background:#F2F4F7}
[data-theme="light"] .video-card.active{background:rgba(118,184,42,.10)}
[data-theme="light"] .pillar:hover{background:#F2F4F7}
/* Marquee Logos (Trust) */
[data-theme="light"] .marquee .wm{color:#9097A0}
[data-theme="light"] .marquee .wm:hover{color:var(--ink)}
/* Placeholder visuals */
[data-theme="light"] .ph{background:repeating-linear-gradient(45deg,rgba(0,0,0,.025) 0 14px,rgba(0,0,0,0) 14px 28px),linear-gradient(135deg,#E8EBEE,#F2F4F7)}
[data-theme="light"] .ph::before{border-color:rgba(0,0,0,.15)}
[data-theme="light"] .ph::after{filter:invert(.9) brightness(1.05)}
/* Cineastische Bereiche bleiben dunkel – nur Gradient-Overlays leicht anpassen */
[data-theme="light"] .hero-sub{color:#1f2328}
[data-theme="light"] .hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,.75) 78%,var(--bg) 100%),linear-gradient(90deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 60%)}
[data-theme="light"] .hero-controls .h-arrow{background:rgba(255,255,255,.7);color:var(--ink);border-color:rgba(11,13,16,.2)}
[data-theme="light"] .hero-controls .h-arrow:hover{background:var(--accent);color:#06080A;border-color:var(--accent)}
[data-theme="light"] .hero-dots button{background:rgba(11,13,16,.28)}
[data-theme="light"] .scroll-hint{color:var(--muted)}
/* Showcase */
[data-theme="light"] .showcase-toggle{background:rgba(11,13,16,.85);color:#fff}
[data-theme="light"] .showcase-toggle:hover{background:#06080A}
[data-theme="light"] .showcase-hint{color:var(--muted)}
/* Service teaser */
[data-theme="light"] .service-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.5)),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.7))}
[data-theme="light"] .service-teaser .st-keys{color:#3A3F45}
/* CTA Band */
[data-theme="light"] .cta-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(255,255,255,.5))}
[data-theme="light"] .cta p{color:#3A3F45}
/* Footer bleibt dunkel als visueller Anker */
/* ---------- Responsive ---------- */
@media (max-width:1024px){
.menu,.nav-cta{display:none}
.burger{display:flex}
.manifesto .grid,.cost .grid{grid-template-columns:1fr;gap:36px}
.stats .grid{grid-template-columns:repeat(2,1fr);gap:40px}
.apps-grid,.proj-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
.proj-grid .big-card{grid-column:span 2}
.foot-grid{grid-template-columns:1fr 1fr;gap:36px}
.pillars{grid-template-columns:1fr}
.video-stage{grid-template-columns:1fr;gap:24px}
.video-list{flex-direction:row;overflow-x:auto;padding-bottom:6px}
.video-card{flex:0 0 280px;grid-template-columns:96px 1fr}
.svc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
.wrap{padding:0 20px}
.topbar{display:none}
.prod{grid-template-columns:1fr}
.prod:nth-child(even) .prod-media{order:0}
.prod-media{min-height:280px}
.apps-grid,.proj-grid,.news-grid{grid-template-columns:1fr}
.proj-grid .big-card{grid-column:span 1}
.stats .grid{grid-template-columns:1fr 1fr;gap:28px}
.cost ul{grid-template-columns:1fr}
.foot-grid{grid-template-columns:1fr}
.hero .wrap{padding-bottom:90px}
.meet-card{flex:0 0 80vw;height:104vw;max-height:540px}
.meet-track{padding:6px 20px}
.svc-grid{grid-template-columns:1fr}
.svc-cta{flex-direction:column;align-items:flex-start}
.scroll-anim{height:380vh}
.sa-head{top:10vh;max-width:80%}
.sa-head h2{font-size:clamp(28px,8vw,42px)}
.sa-chapters{position:absolute;right:auto;left:0;top:auto;bottom:18px;transform:none;flex-direction:row;overflow-x:auto;min-width:auto;gap:6px;padding:0 14px;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sa-chapters a{flex:0 0 auto;background:rgba(11,13,16,.7);padding:8px 12px;border-right:0;border-bottom:2px solid transparent;font-size:11px;gap:8px}
.sa-chapters a .ch-arr{display:none}
.sa-chapters a.active{border-right:0;border-bottom-color:var(--accent);background:rgba(118,184,42,.28)}
.sa-loader{bottom:74px}
.sa-hint{display:none}
}
/* ====== Video-Carousel: YouTube-Thumbs + scrollbare Liste ====== */
.video-main .video-main-thumb{z-index:0}
.video-card .vthumb img.bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.video-list{max-height:100%;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.video-list::-webkit-scrollbar{width:6px}
.video-list::-webkit-scrollbar-track{background:transparent}
.video-list::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.video-list::-webkit-scrollbar-thumb:hover{background:var(--muted)}
/* =========================================================
SINGLE PROJEKT — cineastische Story-Page
========================================================= */
.pj-single{background:var(--bg);color:var(--ink)}
.pj-hero{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden}
.pj-hero-bg{position:absolute;inset:0;z-index:0}
.pj-hero-bg::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(11,13,16,.35) 0%,rgba(11,13,16,.15) 30%,rgba(11,13,16,.85) 100%),
linear-gradient(90deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,0) 50%)}
.pj-hero .wrap{position:relative;z-index:2;width:100%;padding:0 32px 110px}
.pj-breadcrumb{font-family:'Roboto Condensed';font-weight:600;text-transform:uppercase;font-size:11.5px;letter-spacing:.18em;color:rgba(255,255,255,.7);margin-bottom:40px}
.pj-breadcrumb a{color:inherit;text-decoration:none;transition:color .2s}
.pj-breadcrumb a:hover{color:var(--accent)}
.pj-breadcrumb .sep{margin:0 12px;opacity:.5}
.pj-hero .eyebrow{margin-bottom:22px}
.pj-title{font-size:clamp(36px,6.8vw,92px);line-height:.98;max-width:20ch;margin:0 0 28px;color:#fff;overflow-wrap:break-word}
.pj-untertitel{font-size:clamp(17px,1.7vw,23px);line-height:1.5;color:#D6DCE2;max-width:55ch;font-weight:400}
.pj-scroll-hint{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;width:1px;height:50px;background:rgba(255,255,255,.2);overflow:hidden}
.pj-scroll-hint span{display:block;width:100%;height:50%;background:var(--accent);animation:pjScroll 2.4s var(--ease) infinite}
@keyframes pjScroll{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
/* META STRIP */
.pj-meta{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pj-meta .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;max-width:var(--maxw)}
.pj-meta-item{padding:30px clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line)}
.pj-meta-item:last-child{border-right:0}
.pj-meta-item span{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:.22em;color:var(--muted-2)}
.pj-meta-item b{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:clamp(15px,1.4vw,20px);letter-spacing:.02em;color:var(--ink)}
/* INTRO LEAD */
.pj-intro{padding:clamp(72px,12vh,140px) 0 clamp(40px,6vh,80px)}
.pj-lead{font-family:'Roboto Condensed';font-weight:500;font-size:clamp(22px,2.8vw,36px);line-height:1.28;letter-spacing:-.005em;color:var(--ink);max-width:32ch}
/* BODY SECTIONS */
.pj-body{padding:clamp(40px,7vh,90px) 0 clamp(60px,10vh,120px)}
.pj-section{display:grid;grid-template-columns:1fr 2fr;gap:clamp(40px,6vw,90px);padding:clamp(40px,6vh,80px) 0;border-top:1px solid var(--line);align-items:start}
.pj-section:first-child{border-top:0;padding-top:0}
.pj-section-head{position:sticky;top:120px}
.pj-section-head .eyebrow{margin-bottom:14px}
.pj-section-head h2{font-size:clamp(28px,3.8vw,52px);line-height:1.04;margin:0}
.pj-prose{font-family:'Roboto';font-size:17.5px;line-height:1.72;color:var(--muted);max-width:62ch}
.pj-prose p{margin:0 0 1.3em}
.pj-prose p:last-child{margin-bottom:0}
.pj-prose strong,.pj-prose b{color:var(--ink);font-weight:600}
.pj-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.pj-prose ul,.pj-prose ol{margin:0 0 1.3em;padding-left:24px}
.pj-prose li{margin-bottom:.5em}
.pj-prose h3{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:22px;color:var(--ink);margin:1.8em 0 .6em}
/* ECKDATEN */
.pj-kpi{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(60px,10vh,120px) 0}
.pj-kpi .eyebrow{margin-bottom:44px}
.pj-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(28px,4vw,56px)}
.pj-kpi{padding-top:20px;border-top:2px solid var(--accent)}
.pj-kpi-value{font-family:'Roboto Condensed';font-weight:800;font-size:clamp(38px,4.8vw,68px);line-height:1;letter-spacing:-.025em;color:var(--ink);margin-bottom:12px}
.pj-kpi-label{font-size:14px;color:var(--muted);line-height:1.5}
/* GALERIE */
.pj-gallery .eyebrow{margin-bottom:14px}
.pj-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pj-gallery-item{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line);cursor:zoom-in;background:var(--bg-2)}
.pj-gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pj-gallery-item:hover img{transform:scale(1.06)}
.pj-zoom{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;background:rgba(11,13,16,.7);backdrop-filter:blur(6px);z-index:2;opacity:0;transition:opacity .25s}
.pj-zoom::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:14px;border:1.5px solid #fff;border-radius:50%}
.pj-zoom::after{content:"";position:absolute;right:11px;bottom:11px;width:6px;height:1.5px;background:#fff;transform:rotate(45deg)}
.pj-gallery-item:hover .pj-zoom{opacity:1}
/* RELATED */
.pj-related{background:var(--bg)}
.pj-related .eyebrow{margin-bottom:14px}
.pj-related .display{margin-bottom:42px}
.pj-related .proj-grid{grid-template-columns:repeat(3,1fr);margin-top:0;gap:18px}
/* LIGHTBOX */
.pj-lb{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:9999;display:none;align-items:center;justify-content:center;padding:60px;cursor:zoom-out;animation:lbIn .25s var(--ease)}
.pj-lb.open{display:flex}
.pj-lb img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pj-lb-close{position:absolute;top:24px;right:24px;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;border-radius:50%;cursor:pointer;font-size:22px;line-height:1;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.pj-lb-close:hover{background:var(--accent);border-color:var(--accent);color:#06080A}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
/* RESPONSIVE */
@media (max-width:1024px){
.pj-meta .wrap{grid-template-columns:repeat(2,1fr)}
.pj-meta-item:nth-child(2){border-right:0}
.pj-meta-item:nth-child(1),.pj-meta-item:nth-child(2){border-bottom:1px solid var(--line)}
.pj-section{grid-template-columns:1fr;gap:24px}
.pj-section-head{position:static}
.pj-gallery-grid{grid-template-columns:repeat(2,1fr)}
.pj-related .proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
.pj-meta .wrap{grid-template-columns:1fr}
.pj-meta-item{border-right:0;border-bottom:1px solid var(--line)}
.pj-meta-item:last-child{border-bottom:0}
.pj-gallery-grid{grid-template-columns:1fr}
.pj-related .proj-grid{grid-template-columns:1fr}
.pj-hero .wrap{padding-bottom:80px}
}
/* =========================================================
SINGLE NEWS / BLOG POST — Editorial-Style
========================================================= */
.np-single{background:var(--bg);color:var(--ink)}
.np-hero{position:relative;min-height:76svh;display:flex;align-items:flex-end;overflow:hidden}
.np-hero-bg{position:absolute;inset:0;z-index:0}
.np-hero-bg::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(11,13,16,.4) 0%,rgba(11,13,16,.15) 30%,rgba(11,13,16,.85) 100%),
linear-gradient(90deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,0) 50%)}
.np-hero .wrap{position:relative;z-index:2;width:100%;padding:0 32px 90px}
.np-hero .eyebrow{margin-bottom:22px}
.np-title{font-size:clamp(30px,5.4vw,74px);line-height:1.04;max-width:22ch;margin:0;color:#fff;overflow-wrap:break-word}
/* META STRIP */
.np-meta{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.np-meta .wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0;max-width:var(--maxw)}
/* pj-meta-item Styles werden wiederverwendet */
/* INTRO LEAD */
.np-intro{padding:clamp(60px,9vh,100px) 0 0}
.np-lead{font-family:'Roboto Condensed';font-weight:500;font-size:clamp(20px,2.4vw,30px);line-height:1.36;letter-spacing:-.005em;color:var(--ink);max-width:38ch}
/* ARTIKEL-BODY (editoriale Prose) */
.np-body{padding:clamp(50px,8vh,90px) 0 clamp(70px,10vh,120px)}
.np-prose{max-width:720px;font-family:'Roboto';font-size:18px;line-height:1.75;color:var(--muted)}
.np-prose>*:first-child{margin-top:0}
.np-prose>*:last-child{margin-bottom:0}
.np-prose p{margin:0 0 1.3em;color:var(--muted)}
.np-prose strong,.np-prose b{color:var(--ink);font-weight:700}
.np-prose em,.np-prose i{font-style:italic}
.np-prose h2{font-family:'Roboto Condensed';font-weight:800;text-transform:uppercase;font-size:clamp(26px,3.2vw,40px);line-height:1.1;letter-spacing:-.015em;color:var(--ink);margin:2em 0 .6em}
.np-prose h3{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.005em;color:var(--ink);margin:1.8em 0 .5em}
.np-prose h4{font-family:'Roboto Condensed';font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin:1.6em 0 .5em}
.np-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-thickness .2s}
.np-prose a:hover{text-decoration-thickness:2px}
.np-prose ul,.np-prose ol{padding-left:24px;margin:0 0 1.3em}
.np-prose ul{list-style:none;padding-left:0}
.np-prose ul li{position:relative;padding-left:24px;margin-bottom:.6em;color:var(--muted)}
.np-prose ul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.np-prose ol{list-style-position:outside}
.np-prose ol li{margin-bottom:.6em;color:var(--muted);padding-left:8px}
.np-prose ol li::marker{color:var(--accent);font-weight:700}
.np-prose img{max-width:100%;height:auto;display:block;margin:2em auto;border:1px solid var(--line)}
.np-prose figure{margin:2em 0}
.np-prose figcaption{font-size:14px;color:var(--muted-2);text-align:center;margin-top:10px;font-style:italic}
.np-prose blockquote{border-left:3px solid var(--accent);padding:8px 0 8px 28px;margin:2em 0;font-family:'Roboto Condensed';font-size:clamp(20px,2vw,28px);font-weight:600;line-height:1.36;color:var(--ink)}
.np-prose blockquote p{color:var(--ink);margin:0}
.np-prose hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
/* Code & Tabellen */
.np-prose code{background:var(--bg-2);padding:2px 8px;border-radius:3px;font-family:ui-monospace,Menlo,Monaco,Consolas,monospace;font-size:.92em;color:var(--accent)}
.np-prose pre{background:var(--bg-2);padding:20px;border-radius:6px;overflow-x:auto;margin:1.8em 0}
.np-prose table{border-collapse:collapse;width:100%;margin:1.8em 0;font-size:16px}
.np-prose th,.np-prose td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left}
.np-prose th{color:var(--ink);font-weight:700;font-family:'Roboto Condensed';text-transform:uppercase;font-size:13px;letter-spacing:.1em;background:var(--bg-2)}
.np-prose td{color:var(--muted)}
/* Verwirrende WP-/Elementor-Reste vermeiden */
.np-prose .wp-block-buttons,.np-prose .wp-block-button{margin:2em 0}
.np-prose .wp-block-button__link{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#06080A!important;font-weight:700;padding:14px 24px;border-radius:2px;text-decoration:none;transition:transform .2s,background .2s}
.np-prose .wp-block-button__link:hover{transform:translateY(-2px);background:var(--accent-hover)}
.np-prose .elementor-section,.np-prose .elementor-widget,.np-prose [class*="elementor-"]{all:revert}
/* RELATED */
.np-related{background:var(--bg-2);border-top:1px solid var(--line)}
.np-related .eyebrow{margin-bottom:14px}
.np-related .display{margin-bottom:42px}
.np-related .news-grid{margin-top:0;border:1px solid var(--line);background:var(--line)}
.np-related .news-item{background:var(--bg)}
.np-related .news-item:hover{background:var(--panel)}
/* RESPONSIVE */
@media (max-width:1024px){
.np-meta .wrap{grid-template-columns:repeat(2,1fr)}
.np-meta .pj-meta-item:nth-child(2){border-right:0}
.np-meta .pj-meta-item:nth-child(1),.np-meta .pj-meta-item:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:680px){
.np-meta .wrap{grid-template-columns:1fr}
.np-meta .pj-meta-item{border-right:0;border-bottom:1px solid var(--line)}
.np-meta .pj-meta-item:last-child{border-bottom:0}
.np-hero .wrap{padding-bottom:60px}
.np-prose{font-size:17px}
}
/* Video-Headline: open line-height für Zeilenumbruch */
.video-head{line-height:1.06!important;letter-spacing:-.015em}
.video-head br{display:block;content:""}
.sa-head-h2{line-height:1.04!important}
/* Video-Liste: aspect-ratio des Players bestimmt die Hoehe, Liste darf scrollen */
.video-stage{align-items:stretch}
.video-list{height:100%;min-height:0;max-height:none;overflow-y:auto;padding-right:4px}
@media (max-width:1024px){
/* Auf Mobile/Tablet: Liste wieder horizontal, kein Vertical-Scroll */
.video-list{height:auto;min-height:auto}
}
/* Video-Carousel: Wrapper mit Pfeilen statt Scrollbar */
.video-list-wrap{display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:0;height:100%}
.vl-arrow{background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer;padding:10px;display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s,color .25s,opacity .25s}
.vl-arrow svg{width:18px;height:18px}
.vl-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:rgba(118,184,42,.06)}
.vl-arrow:disabled{opacity:.3;cursor:default}
.video-list{height:100%;min-height:0;overflow-y:auto;padding:0;scrollbar-width:none;scroll-behavior:smooth}
.video-list::-webkit-scrollbar{width:0;display:none}
@media (max-width:1024px){
/* Auf Mobile: alte horizontale Variante, keine Pfeile noetig */
.video-list-wrap{display:contents}
.vl-arrow{display:none}
}
/* Video-Stage: Player bestimmt die Hoehe, Liste muss sich anpassen */
.video-stage{align-items:start}
.video-list-wrap{height:auto} /* wird per JS gesetzt */
/* =========================================================
SINGLE PRODUKT — eigene Sektionen
========================================================= */
.pr-tag-hero{display:inline-block;margin-top:20px;background:var(--accent);color:#06080A;font-family:'Roboto Condensed';font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px}
/* Technische Daten als Spec-Grid */
.pr-specs{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(70px,10vh,120px) 0}
.pr-specs .eyebrow{margin-bottom:14px}
.pr-specs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;border-top:1px solid var(--line)}
.pr-spec{padding:24px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pr-spec-label{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.18em;color:var(--muted-2)}
.pr-spec-value{font-family:'Roboto Condensed';font-weight:700;font-size:clamp(20px,1.8vw,26px);color:var(--ink);letter-spacing:-.005em}
/* Zertifikate */
.pr-certs{background:var(--bg)}
.pr-certs .eyebrow{margin-bottom:14px}
.pr-certs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.pr-cert{display:flex;align-items:center;gap:18px;padding:24px 28px;border:1px solid var(--line);background:var(--panel);transition:border-color .25s,background .25s}
.pr-cert:hover{border-color:var(--accent);background:#1A2028}
.pr-cert-icon{width:54px;height:54px;flex:0 0 auto;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent)}
.pr-cert-icon svg{width:26px;height:26px}
.pr-cert-name{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:17px;color:var(--ink);letter-spacing:.01em;line-height:1.2;margin-bottom:4px}
.pr-cert-meta{font-size:13.5px;color:var(--muted)}
/* Downloads */
.pr-downloads{background:var(--bg-2);border-top:1px solid var(--line)}
.pr-downloads .eyebrow{margin-bottom:14px}
.pr-downloads-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.pr-download{display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);background:var(--bg);text-decoration:none;color:inherit;transition:border-color .25s,background .25s,transform .2s}
.pr-download:hover{border-color:var(--accent);background:var(--panel);transform:translateY(-2px)}
.pr-download-icon{width:54px;height:54px;flex:0 0 auto;border:1px solid var(--line-2);background:var(--bg-2);display:grid;place-items:center;font-family:'Roboto Condensed';font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--accent)}
.pr-download-body{flex:1;min-width:0}
.pr-download-title{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:15px;color:var(--ink);line-height:1.3;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-download-meta{font-size:12px;color:var(--muted-2);margin-top:3px}
.pr-download-arrow{font-size:22px;color:var(--accent);flex:0 0 auto;transition:transform .2s}
.pr-download:hover .pr-download-arrow{transform:translateY(2px)}
@media (max-width:680px){
.pr-specs-grid{grid-template-columns:1fr}
.pr-certs-grid{grid-template-columns:1fr}
}
/* =========================================================
APPLE-STYLE PRODUKT-SEITE
========================================================= */
.pa-product{background:#000;color:#F4F6F8;overflow-x:hidden}
.pa-wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.pa-eye{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:12.5px;letter-spacing:.28em;color:var(--accent);margin:0 0 14px}
.pa-eye--center{text-align:center;margin-bottom:30px}
.pa-mega{font-family:'Roboto Condensed';font-weight:200;font-size:clamp(96px,18vw,260px);line-height:.84;letter-spacing:-.04em;margin:0;color:#fff;text-transform:none}
.pa-mega-mid{font-family:'Roboto Condensed';font-weight:300;font-size:clamp(38px,5.6vw,84px);line-height:1.02;letter-spacing:-.025em;margin:0;color:#fff;text-transform:none}
.pa-mega-mid--center{text-align:center}
/* HERO */
.pa-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#000}
.pa-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.45;filter:saturate(.85) contrast(1.05)}
.pa-hero::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 80% 0%, rgba(118,184,42,.10), transparent 55%),linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.92) 100%)}
.pa-hero-grain{position:absolute;inset:0;z-index:2;background-image:radial-gradient(circle, rgba(255,255,255,.02) 1px, transparent 1px);background-size:3px 3px;pointer-events:none}
.pa-hero-inner{position:relative;z-index:3;width:100%;max-width:1180px;margin:0 auto;padding:0 32px}
.pa-hero-text{max-width:880px}
.pa-hero .pa-eye{color:var(--accent);margin-bottom:24px}
.pa-tagline{font-family:'Roboto Condensed';font-weight:300;font-size:clamp(20px,2.6vw,34px);line-height:1.24;letter-spacing:-.01em;color:#D6DCE2;max-width:30ch;margin:28px 0 40px}
.pa-hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.pa-hero-scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:4;width:1px;height:56px;background:rgba(255,255,255,.15);overflow:hidden}
.pa-hero-scroll span{display:block;width:100%;height:50%;background:var(--accent);animation:paScroll 2.4s var(--ease) infinite}
@keyframes paScroll{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
/* PILL BUTTONS */
.pa-pill{display:inline-flex;align-items:center;gap:10px;padding:13px 26px;border-radius:999px;font-family:'Roboto Condensed';font-weight:700;font-size:14px;letter-spacing:.04em;text-decoration:none;transition:transform .25s var(--ease),background .25s,border-color .25s,color .25s}
.pa-pill--lg{padding:17px 34px;font-size:15px}
.pa-pill--primary{background:var(--accent);color:#06080A;border:1px solid var(--accent)}
.pa-pill--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px)}
.pa-pill--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.pa-pill--ghost:hover{border-color:#fff;background:rgba(255,255,255,.04);transform:translateY(-2px)}
/* STICKY SUBNAV */
.pa-subnav{position:sticky;top:74px;z-index:50;background:rgba(11,13,16,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-100%);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.pa-subnav.visible{opacity:1;transform:translateY(0)}
.pa-subnav-inner{max-width:1180px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:24px}
.pa-subnav-title{font-family:'Roboto Condensed';font-weight:700;font-size:14px;letter-spacing:.02em;color:#fff;text-transform:none;white-space:nowrap}
.pa-subnav-links{flex:1;display:flex;gap:22px;justify-content:center;list-style:none;margin:0;padding:0}
.pa-subnav-links a{font-family:'Roboto Condensed';font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;padding:3px 0;border-bottom:1.5px solid transparent;transition:color .2s,border-color .2s}
.pa-subnav-links a:hover{color:#fff}
.pa-subnav-links a.active{color:#fff;border-bottom-color:var(--accent)}
.pa-subnav-cta{font-family:'Roboto Condensed';font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-decoration:none}
.pa-subnav-cta span{margin-left:6px}
/* SECTIONS */
.pa-section{padding:clamp(80px,13vh,160px) 0;position:relative;background:#000}
.pa-claim{background:linear-gradient(180deg,#000 0%, #06080A 100%);text-align:center}
.pa-claim-text{font-family:'Roboto';font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:rgba(255,255,255,.65);max-width:54ch;margin:30px auto 0;text-align:center}
/* STATS */
.pa-stats{background:linear-gradient(180deg,#06080A 0%, #0B0D10 100%);text-align:center}
.pa-stats-grid{display:grid;gap:48px;margin-top:18px}
.pa-stats-grid--3{grid-template-columns:repeat(3,1fr)}
.pa-stats-grid--4{grid-template-columns:repeat(4,1fr)}
.pa-stat{text-align:center}
.pa-stat-value{font-family:'Roboto Condensed';font-weight:200;font-size:clamp(56px,8.5vw,128px);line-height:.92;letter-spacing:-.035em;color:#fff;display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.pa-stat-unit{font-family:'Roboto Condensed';font-weight:400;font-size:clamp(20px,2.6vw,38px);color:var(--accent);letter-spacing:-.01em}
.pa-stat-label{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:11.5px;letter-spacing:.24em;color:rgba(255,255,255,.55);margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12)}
/* STORY SECTIONS */
.pa-story{background:#0B0D10}
.pa-story:nth-child(even){background:#06080A}
.pa-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.pa-story--left .pa-story-grid{grid-template-columns:1fr 1fr}
.pa-story--left .pa-story-text{order:2}
.pa-story--left .pa-story-img{order:1}
.pa-story--full .pa-story-grid{grid-template-columns:1fr;text-align:center}
.pa-story--full .pa-story-img{margin-bottom:50px}
.pa-story--full .pa-story-body{margin-left:auto;margin-right:auto}
.pa-story-text{max-width:30ch}
.pa-story--full .pa-story-text{max-width:none}
.pa-story-body{font-family:'Roboto';font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.7;color:rgba(255,255,255,.7);margin:28px 0 0;max-width:40ch}
.pa-story-img{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#0F1216;border:1px solid rgba(255,255,255,.06)}
.pa-story-img img{width:100%;height:100%;object-fit:cover;display:block}
/* CHECK LIST */
.pa-checks{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-direction:column;gap:14px;max-width:40ch}
.pa-checks li{position:relative;padding-left:34px;font-family:'Roboto';font-size:16px;line-height:1.55;color:rgba(255,255,255,.78)}
.pa-checks li::before{content:"";position:absolute;left:0;top:4px;width:22px;height:22px;border:1.5px solid var(--accent);border-radius:50%;background:rgba(118,184,42,.1)}
.pa-checks li::after{content:"";position:absolute;left:7.2px;top:11.6px;width:8px;height:4px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
/* SETUP STEPS */
.pa-steps{text-align:center;background:#06080A}
.pa-steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:50px;margin-top:60px;text-align:left}
.pa-step{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.pa-step::before{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:var(--accent)}
.pa-step-num{font-family:'Roboto Condensed';font-weight:300;font-size:64px;line-height:1;letter-spacing:-.03em;color:#fff;margin-bottom:16px}
.pa-step-title{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:14px;letter-spacing:.06em;color:#fff;margin-bottom:8px}
.pa-step-text{font-family:'Roboto';font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.6)}
/* SPECS */
.pa-spec{background:#0B0D10;text-align:center}
.pa-spec-list{max-width:780px;margin:60px auto 0;text-align:left}
.pa-spec-row{display:grid;grid-template-columns:1fr 1.4fr;gap:30px;padding:24px 0;border-top:1px solid rgba(255,255,255,.1);align-items:start}
.pa-spec-row:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.pa-spec-row dt{font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.12em;color:rgba(255,255,255,.55);margin:0}
.pa-spec-row dd{font-family:'Roboto';font-weight:400;font-size:17px;line-height:1.5;color:#fff;margin:0}
/* CERTS */
.pa-certs{background:#06080A;text-align:center}
.pa-certs-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:50px}
.pa-cert{border:1px solid rgba(255,255,255,.12);background:#0B0D10;padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;transition:border-color .25s,background .25s}
.pa-cert:hover{border-color:var(--accent);background:#11161A}
.pa-cert-icon{width:54px;height:54px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent)}
.pa-cert-icon svg{width:26px;height:26px}
.pa-cert-name{font-family:'Roboto Condensed';font-weight:700;font-size:15.5px;letter-spacing:.01em;color:#fff;line-height:1.25;text-transform:uppercase}
.pa-cert-meta{font-size:13px;color:rgba(255,255,255,.5)}
/* CTA */
.pa-cta{background:linear-gradient(180deg,#06080A 0%, #000 100%);text-align:center}
.pa-cta-text{font-family:'Roboto';font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:rgba(255,255,255,.65);max-width:50ch;margin:24px auto 38px}
.pa-cta-buttons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* SCROLL ANIMATIONS */
.pa-anim-up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pa-anim-up.in{opacity:1;transform:none}
/* RESPONSIVE */
@media (max-width:1024px){
.pa-story-grid{grid-template-columns:1fr;gap:36px}
.pa-story--left .pa-story-text,.pa-story--left .pa-story-img{order:initial}
.pa-story-img{order:-1}
.pa-story-text{max-width:none}
.pa-subnav-links{display:none}
.pa-stats-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
.pa-hero-cta{flex-direction:column;align-items:flex-start}
.pa-hero-cta .pa-pill{width:fit-content}
.pa-stats-grid--3,.pa-stats-grid--4{grid-template-columns:1fr;gap:60px}
.pa-spec-row{grid-template-columns:1fr;gap:6px}
.pa-spec-row dt{font-size:11.5px}
}
/* Apple-Style: Anwendungen-Grid */
.pa-apps{background:#0B0D10;text-align:center}
.pa-apps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:60px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);text-align:left}
.pa-app{padding:38px 28px 32px;background:#0B0D10;transition:background .3s var(--ease),transform .3s var(--ease);display:flex;flex-direction:column;gap:14px;min-height:230px}
.pa-app:hover{background:#13181D}
.pa-app-icon{width:46px;height:46px;color:var(--accent);margin-bottom:6px}
.pa-app-icon svg{width:100%;height:100%;display:block}
.pa-app-title{font-family:'Roboto Condensed';font-weight:700;font-size:18px;color:#fff;text-transform:uppercase;letter-spacing:.02em;line-height:1.2}
.pa-app-text{font-family:'Roboto';font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.62)}
.pa-app--link{text-decoration:none;color:inherit;cursor:pointer}
.pa-app--link:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pa-app-more{margin-top:auto;padding-top:8px;font-family:'Roboto Condensed';font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.7;transition:opacity .3s var(--ease)}
.pa-app-more span{display:inline-block;transition:transform .3s var(--ease)}
.pa-app--link:hover .pa-app-more{opacity:1}
.pa-app--link:hover .pa-app-more span{transform:translateX(4px)}
@media(max-width:900px){.pa-apps-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.pa-apps-grid{grid-template-columns:1fr}}
/* Apple-Style: Story ohne Bild (Fallback) */
.pa-story--no-img .pa-story-grid{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center}
.pa-story--no-img .pa-story-text{max-width:none}
.pa-story--no-img .pa-story-body{margin-left:auto;margin-right:auto;max-width:56ch}
.pa-story--no-img .pa-checks{margin:34px auto 0;display:table;text-align:left}
/* =========================================================
APPLE-STYLE — auf HighStep-Standard-Sizes angepasst
(Brand-Weight 800, Brand-Sizes aus dem Prototyp)
========================================================= */
.pa-mega{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(32px,5.4vw,84px);
line-height:.98;
letter-spacing:-.02em;
}
.pa-mega-mid{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(28px,4.2vw,58px);
line-height:1.04;
letter-spacing:-.015em;
}
.pa-tagline{
font-weight:400;
font-size:clamp(17px,1.9vw,24px);
line-height:1.4;
color:#D6DCE2;
max-width:34ch;
margin:22px 0 34px;
}
.pa-stat-value{
font-weight:800;
font-size:clamp(48px,6.8vw,96px);
line-height:.96;
letter-spacing:-.025em;
}
.pa-stat-unit{
font-weight:700;
font-size:clamp(18px,2vw,26px);
}
.pa-stat-label{
font-size:11px;
letter-spacing:.22em;
}
.pa-step-num{
font-weight:800;
font-size:44px;
}
.pa-step-title{font-size:13px}
.pa-claim-text,.pa-story-body,.pa-cta-text{
font-size:clamp(16px,1.3vw,18px);
line-height:1.65;
}
.pa-cert-name{font-size:14.5px}
.pa-hero-text .pa-eye,.pa-eye{
font-size:11.5px;
letter-spacing:.24em;
}
/* Etwas kompaktere Section-Padding, damit die Seite kein Stretching mehr braucht */
.pa-section{padding:clamp(64px,10vh,120px) 0}
/* Hero etwas niedriger, weil Titel kleiner */
.pa-hero{min-height:88svh}
/* =========================================================
FIX: Story-Layout "full" — Bullets als zentriertes 2x2-Grid
========================================================= */
.pa-story--full{text-align:center}
.pa-story--full .pa-story-grid{
grid-template-columns:1fr;
max-width:820px;
margin:0 auto;
text-align:center;
}
.pa-story--full .pa-story-text{max-width:none;text-align:center}
.pa-story--full .pa-eye{text-align:center;margin-bottom:18px}
.pa-story--full .pa-mega-mid{margin-left:auto;margin-right:auto;max-width:18ch}
.pa-story--full .pa-story-body{
margin:28px auto 0;
max-width:58ch;
text-align:center;
}
.pa-story--full .pa-checks{
margin:46px auto 0;
display:grid;
grid-template-columns:repeat(2,minmax(220px,1fr));
gap:16px 40px;
text-align:left;
max-width:680px;
width:auto;
}
@media(max-width:580px){
.pa-story--full .pa-checks{
grid-template-columns:1fr;
max-width:300px;
}
}
/* =========================================================
FIX: Story-Text-Spalte zu eng (30ch -> Spaltenbreite nutzen)
========================================================= */
.pa-story-text{max-width:none}
.pa-story-grid .pa-story-body{max-width:46ch}
.pa-story-grid .pa-checks{max-width:46ch}
/* Headline darf über die Spalte gehen, aber nicht ins Bild reichen */
.pa-story--right .pa-mega-mid,
.pa-story--left .pa-mega-mid{max-width:14ch}
/* Bild-Aspekt etwas breiter (5/4 statt 4/3), damit es nicht zu hoch wird */
.pa-story-img{aspect-ratio:5/4}
/* Grid-Spalten: Text leicht bevorzugen, damit die Sprache atmen kann */
.pa-story--right .pa-story-grid,
.pa-story--left .pa-story-grid{grid-template-columns:1.05fr 1fr}
/* =========================================================
ANIMATION-PACK
========================================================= */
/* Hero-BG: Overflow für Parallax (kein Gap beim Scrollen) */
.pa-hero-bg{top:-30%;height:160%;will-change:transform}
.pa-hero-text{will-change:transform,opacity}
/* Story-Image: leichtes Ken-Burns beim Reinscrollen */
.pa-story-img{overflow:hidden}
.pa-story-img img{transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.pa-story-img.in img{transform:scale(1)}
/* Bullets: zeitlich gestaffeltes Reinscrollen */
.pa-checks li{opacity:0;transform:translateY(10px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.pa-checks.in li{opacity:1;transform:none}
.pa-checks.in li:nth-child(1){transition-delay:.08s}
.pa-checks.in li:nth-child(2){transition-delay:.18s}
.pa-checks.in li:nth-child(3){transition-delay:.28s}
.pa-checks.in li:nth-child(4){transition-delay:.38s}
.pa-checks.in li:nth-child(5){transition-delay:.48s}
.pa-checks.in li:nth-child(6){transition-delay:.58s}
/* Anwendungen-Icons: SVG-Pfade zeichnen sich beim Reinscrollen */
.pa-app-icon svg path,
.pa-app-icon svg circle{
stroke-dasharray:var(--len,300);
stroke-dashoffset:var(--len,300);
transition:stroke-dashoffset 1.7s cubic-bezier(.2,.7,.2,1)
}
.pa-app.in .pa-app-icon svg path,
.pa-app.in .pa-app-icon svg circle{stroke-dashoffset:0}
/* Anwendungen-Karten: subtiler Lift beim Hover */
.pa-app{transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s var(--ease)}
.pa-app:hover{transform:translateY(-3px)}
/* Subnav: dezenter pulsender Dot neben aktivem Link */
.pa-subnav-links a{position:relative}
.pa-subnav-links a.active::before{
content:"";position:absolute;left:-12px;top:50%;
width:5px;height:5px;background:var(--accent);border-radius:50%;
transform:translateY(-50%);
animation:paPulse 1.6s ease-in-out infinite
}
@keyframes paPulse{
0%,100%{opacity:1;transform:translateY(-50%) scale(1)}
50%{opacity:.4;transform:translateY(-50%) scale(1.6)}
}
/* Stat-Box: shimmer um die Zahl wenn sie fertig hochgezählt hat */
.pa-stat-value{position:relative}
.pa-stat.done .pa-stat-unit{
animation:paUnitPulse 1.4s ease-out 1
}
@keyframes paUnitPulse{
0%{color:#fff;text-shadow:0 0 18px rgba(118,184,42,.7)}
100%{color:var(--accent);text-shadow:0 0 0 transparent}
}
/* Specs-Liste: Zeilen gestaffelt rein */
.pa-spec-row{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pa-spec-list.in .pa-spec-row{opacity:1;transform:none}
.pa-spec-list.in .pa-spec-row:nth-child(1){transition-delay:.04s}
.pa-spec-list.in .pa-spec-row:nth-child(2){transition-delay:.08s}
.pa-spec-list.in .pa-spec-row:nth-child(3){transition-delay:.12s}
.pa-spec-list.in .pa-spec-row:nth-child(4){transition-delay:.16s}
.pa-spec-list.in .pa-spec-row:nth-child(5){transition-delay:.20s}
.pa-spec-list.in .pa-spec-row:nth-child(6){transition-delay:.24s}
.pa-spec-list.in .pa-spec-row:nth-child(7){transition-delay:.28s}
.pa-spec-list.in .pa-spec-row:nth-child(8){transition-delay:.32s}
.pa-spec-list.in .pa-spec-row:nth-child(9){transition-delay:.36s}
.pa-spec-list.in .pa-spec-row:nth-child(10){transition-delay:.40s}
.pa-spec-list.in .pa-spec-row:nth-child(11){transition-delay:.44s}
.pa-spec-list.in .pa-spec-row:nth-child(12){transition-delay:.48s}
.pa-spec-list.in .pa-spec-row:nth-child(13){transition-delay:.52s}
/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce){
.pa-hero-bg,.pa-hero-text{transform:none!important;opacity:1!important;transition:none!important}
.pa-story-img img,.pa-checks li,.pa-app-icon svg *,.pa-spec-row{transition:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
}
/* =========================================================
VIDEO-SECTION + MODAL
========================================================= */
.pa-videos{background:#06080A;text-align:center}
.pa-videos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:60px;text-align:left}
.pa-video-card{background:transparent;border:0;padding:0;cursor:pointer;display:block;color:inherit;font:inherit;text-align:left;width:100%}
.pa-video-thumb{aspect-ratio:16/9;background:#0F1216;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);position:relative}
.pa-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .35s ease}
.pa-video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%);pointer-events:none}
.pa-video-card:hover .pa-video-thumb img{transform:scale(1.06);filter:brightness(1.05)}
.pa-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;pointer-events:none;transition:transform .35s cubic-bezier(.2,.7,.2,1);z-index:2;opacity:.92}
.pa-video-card:hover .pa-video-play{transform:translate(-50%,-50%) scale(1.15);opacity:1}
.pa-video-meta{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.pa-video-title{font-family:'Roboto Condensed';font-weight:700;font-size:15px;color:#fff;letter-spacing:.01em;text-transform:uppercase;line-height:1.3;flex:1;min-width:0}
.pa-video-duration{font-size:12.5px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-video-desc{margin-top:8px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.55)}
/* Modal */
.pa-modal{position:fixed;inset:0;background:rgba(0,0,0,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:none;align-items:center;justify-content:center;z-index:200;padding:32px}
.pa-modal.open{display:flex;animation:paModalIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes paModalIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.pa-modal-close{position:absolute;top:24px;right:24px;background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;width:46px;height:46px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s;font-family:inherit;padding:0}
.pa-modal-close:hover{background:rgba(255,255,255,.08);border-color:#fff;transform:rotate(90deg)}
.pa-modal-frame{width:100%;max-width:1180px;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.pa-modal-frame iframe{width:100%;height:100%;border:0;display:block}
/* =========================================================
DOWNLOADS-SECTION
========================================================= */
.pa-downloads{background:#0B0D10;text-align:center}
.pa-dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;margin-top:60px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);text-align:left}
.pa-dl-card{background:#0B0D10;padding:30px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start;text-decoration:none;color:inherit;transition:background .3s var(--ease)}
/* Unvollstaendige letzte Reihe im 3er-Raster: letzte Karte fuellt die Luecke */
@media (min-width:1000px){.pa-product .pa-dl-grid{grid-template-columns:repeat(3,1fr)}.pa-product .pa-dl-card:last-child:nth-child(3n+2){grid-column:span 2}.pa-product .pa-dl-card:last-child:nth-child(3n+1){grid-column:span 3}}
.pa-dl-card:hover{background:#13181D}
.pa-dl-card--soon{opacity:.55;cursor:default}
.pa-dl-card--soon:hover{background:#0B0D10}
.pa-dl-icon{width:36px;height:46px;color:var(--accent);flex-shrink:0}
.pa-dl-icon svg{width:100%;height:100%;display:block}
.pa-dl-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.pa-dl-title{font-family:'Roboto Condensed';font-weight:700;font-size:16px;text-transform:uppercase;color:#fff;letter-spacing:.02em;line-height:1.25}
.pa-dl-desc{font-size:13px;color:rgba(255,255,255,.55);line-height:1.5}
.pa-dl-meta{display:flex;gap:10px;font-size:11.5px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.1em;margin-top:4px;flex-wrap:wrap}
.pa-dl-type{color:var(--accent)}
.pa-dl-soon{color:rgba(255,255,255,.35)}
.pa-dl-arrow{width:36px;height:36px;border:1px solid rgba(255,255,255,.22);border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .25s,border-color .25s,color .25s,transform .35s cubic-bezier(.2,.7,.2,1);flex-shrink:0}
.pa-dl-arrow svg{width:14px;height:14px}
.pa-dl-card:not(.pa-dl-card--soon):hover .pa-dl-arrow{background:var(--accent);border-color:var(--accent);color:#06080A;transform:translateY(4px)}
/* =========================================================
HEADLINES auf Brand-Standard (uppercase, größer)
========================================================= */
.pa-mega{
text-transform:uppercase;
font-size:clamp(34px,5.8vw,96px);
line-height:.96;
letter-spacing:-.02em;
}
.pa-mega-mid{
text-transform:uppercase;
font-size:clamp(32px,5.4vw,84px);
line-height:1.0;
letter-spacing:-.018em;
}
/* Eyebrow direkt drüber etwas größer + mehr Abstand */
.pa-eye{font-size:12px;letter-spacing:.26em;margin-bottom:18px}
.pa-eye--center{margin-bottom:24px}
/* Story-Headlines koennen breiter sein, wenn uppercase */
.pa-story--right .pa-mega-mid,
.pa-story--left .pa-mega-mid{max-width:none}
/* =========================================================
HEADLINES: zweite Skala (kleinere H2 für In-Section)
pa-mega = Hero-Showcase-Skala (96px max) bleibt
pa-mega-mid = NEU: Manifesto-Skala (58px max) für Sektionen
========================================================= */
.pa-mega-mid{
font-size:clamp(28px,4.2vw,58px);
line-height:1.05;
letter-spacing:-.02em;
}
/* Story-Body etwas dichter ranruecken, damit Headline + Body als Einheit wirken */
.pa-story-body{margin-top:24px}
.pa-claim-text{margin-top:22px}
/* =========================================================
VIDEOS: Featured Big Card + 3 kleinere
========================================================= */
.pa-videos-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:60px;
}
.pa-videos-grid .pa-video-card:first-child{
grid-column:1 / -1;
margin-bottom:8px;
}
.pa-videos-grid .pa-video-card:first-child .pa-video-thumb{
aspect-ratio:21/9;
border-radius:18px;
}
.pa-videos-grid .pa-video-card:first-child .pa-video-play{
width:96px;
height:96px;
}
.pa-videos-grid .pa-video-card:first-child .pa-video-title{
font-size:18px;
}
.pa-videos-grid .pa-video-card:first-child .pa-video-desc{
font-size:15px;
color:rgba(255,255,255,.7);
max-width:64ch;
margin-top:10px;
}
.pa-videos-grid .pa-video-card:first-child .pa-video-meta{margin-top:22px}
@media(max-width:780px){
.pa-videos-grid{grid-template-columns:repeat(2,1fr)}
.pa-videos-grid .pa-video-card:first-child .pa-video-thumb{aspect-ratio:16/9}
.pa-videos-grid .pa-video-card:first-child .pa-video-play{width:64px;height:64px}
}
@media(max-width:520px){
.pa-videos-grid{grid-template-columns:1fr}
}
/* Bessere Thumbnail-Qualitaet via maxres */
/* =========================================================
SCROLL-ANIMATION SECTION (per-product)
========================================================= */
.pa-scroll-anim{height:380vh;position:relative;background:#000;margin:0}
.pa-scroll-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#000}
.pa-scroll-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.pa-scroll-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:
radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, rgba(0,0,0,.45) 100%)
}
.pa-scroll-text{
position:absolute;
left:0;right:0;
top:50%;
transform:translateY(-50%);
text-align:center;
z-index:3;
padding:0 32px;
opacity:0;
pointer-events:none;
transition:opacity .8s cubic-bezier(.2,.7,.2,1);
}
.pa-scroll-text-inner{
max-width:920px;
margin:0 auto;
transform:translateY(20px);
transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.pa-scroll-text.visible{opacity:1}
.pa-scroll-text.visible .pa-scroll-text-inner{transform:none}
.pa-scroll-text .pa-eye{color:var(--accent);margin-bottom:18px}
.pa-scroll-text .pa-mega-mid{color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.6)}
@media (prefers-reduced-motion: reduce){
.pa-scroll-anim{height:auto}
.pa-scroll-pin{position:relative;height:auto;min-height:60vh}
.pa-scroll-text{position:relative;opacity:1;transform:none;padding:60px 32px}
}
/* =========================================================
SCROLL-ANIMATION — SPLIT LAYOUT (canvas links, text rechts)
========================================================= */
.pa-scroll-anim{height:380vh;position:relative;background:#000;margin:0}
.pa-scroll-pin{
position:sticky;top:0;height:100vh;
background:radial-gradient(ellipse 80% 60% at 25% 50%, #0a0b0c 0%, #000 70%);
overflow:hidden;
display:grid;
grid-template-columns: 42% 1fr;
align-items:stretch;
}
/* Canvas-Wrapper (links) */
.pa-scroll-canvas-wrap{
position:relative;
display:flex;
align-items:center;
justify-content:center;
padding:0 5% 0 8%;
}
.pa-scroll-canvas{
display:block;
height:84vh;
max-width:100%;
filter:drop-shadow(0 30px 80px rgba(0,0,0,.8));
}
/* Subtle Brand-Glow hinter der Schiene */
.pa-scroll-glow{
position:absolute;
top:50%;left:50%;
width:60%;height:70vh;
transform:translate(-50%,-50%);
background:radial-gradient(ellipse, rgba(118,184,42,.10) 0%, transparent 70%);
filter:blur(40px);
pointer-events:none;
z-index:0;
}
/* Film-Grain Overlay */
.pa-scroll-grain{
position:absolute;inset:0;
background-image:url("data:image/svg+xml;utf8,");
opacity:.07;
pointer-events:none;
z-index:10;
mix-blend-mode:overlay;
}
/* Text-Bereich rechts */
.pa-scroll-text-wrap{
position:relative;
display:flex;
align-items:center;
padding:0 8% 0 4%;
}
.pa-scroll-text{
position:absolute;
left:4%;right:8%;
top:50%;
transform:translateY(calc(-50% + 18px));
opacity:0;
pointer-events:none;
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
text-align:left;
}
.pa-scroll-text.visible{
opacity:1;
transform:translateY(-50%);
}
.pa-scroll-text .pa-eye{color:var(--accent);margin-bottom:18px;text-align:left}
.pa-scroll-text .pa-mega-mid{
color:#fff;
text-align:left;
text-shadow:0 4px 30px rgba(0,0,0,.6);
max-width:14ch;
}
/* Subtiler Vertikal-Splitter zwischen Canvas und Text */
.pa-scroll-pin::before{
content:"";
position:absolute;
left:42%;
top:18%;bottom:18%;
width:1px;
background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
z-index:5;
}
/* Responsive: Mobile = stacked */
@media (max-width:880px){
.pa-scroll-pin{
grid-template-columns:1fr;
grid-template-rows:55vh 45vh;
}
.pa-scroll-pin::before{display:none}
.pa-scroll-canvas-wrap{padding:0;align-items:end}
.pa-scroll-canvas{height:50vh}
.pa-scroll-text-wrap{padding:0 24px}
.pa-scroll-text{text-align:center;left:24px;right:24px}
.pa-scroll-text.visible{transform:translateY(-50%)}
.pa-scroll-text .pa-eye,
.pa-scroll-text .pa-mega-mid{text-align:center;max-width:none}
}
@media (prefers-reduced-motion: reduce){
.pa-scroll-anim{height:auto}
.pa-scroll-pin{position:relative;height:auto;min-height:60vh;grid-template-columns:1fr}
.pa-scroll-text{position:relative;opacity:1;transform:none;padding:30px 24px}
}
/* =========================================================
HERO VIDEO-BACKGROUND
========================================================= */
.pa-hero-bg--video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
z-index:0;
opacity:.75;
filter:saturate(.9) contrast(1.05) brightness(.85);
pointer-events:none;
}
/* Staerkerer Overlay damit baked-in Video-Text NICHT lesbar bleibt */
.pa-hero:has(.pa-hero-bg--video)::before{
background:
radial-gradient(120% 100% at 30% 50%, rgba(0,0,0,.4) 0%, rgba(0,0,0,.65) 70%),
linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.92) 100%);
}
/* Brand-Akzentlicht im Hero links */
.pa-hero:has(.pa-hero-bg--video)::after{
content:"";
position:absolute;left:-10%;top:0;bottom:0;width:60%;
background:radial-gradient(ellipse at 30% 50%, rgba(118,184,42,.10) 0%, transparent 70%);
z-index:2;
pointer-events:none;
}
/* Scroll-Anim-Sektion komplett ausblenden falls Reste irgendwo ankommen */
.pa-scroll-anim{display:none}
/* =========================================================
HERO VIDEO — kein Loop, kein heavy Overlay, Scroll-Darken
========================================================= */
.pa-hero-bg--video{
opacity:.85;
filter:saturate(.95) contrast(1.02) brightness(calc(1 - var(--hero-dark,0) * 0.85));
transition:filter .12s linear;
}
/* Vignette/Overlay deutlich dezenter — nur leichter Gradient damit Title lesbar */
.pa-hero:has(.pa-hero-bg--video)::before{
background:
linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.80) 100%);
}
/* Akzent-Glow links bleibt, weil Schiene jetzt RECHTS steht — Glow links rahmt den Titel */
.pa-hero:has(.pa-hero-bg--video)::after{
background:radial-gradient(ellipse at 25% 50%, rgba(118,184,42,.08) 0%, transparent 65%);
}
/* Komplett-Darken-Layer beim Scrollen */
.pa-hero-darken{
position:absolute;inset:0;z-index:5;
background:#000;
opacity:var(--hero-dark,0);
pointer-events:none;
transition:opacity .15s linear;
}
/* =========================================================
HERO — Text rechts statt links (per Produkt umschaltbar)
========================================================= */
.pa-hero--right .pa-hero-text{
margin-left:auto;
text-align:right;
}
.pa-hero--right .pa-hero-text .pa-eye{text-align:right}
.pa-hero--right .pa-tagline{margin-left:auto}
.pa-hero--right .pa-hero-cta{justify-content:flex-end}
/* Brand-Glow auf die andere Seite verschieben */
.pa-hero:has(.pa-hero-bg--video).pa-hero--right::after{
background:radial-gradient(ellipse at 75% 50%, rgba(118,184,42,.08) 0%, transparent 65%);
}
/* Stronger dim-Layer LINKS, weil dort der HS-Inhalt sitzt → Title rechts braucht keine Maske rechts */
.pa-hero--right:has(.pa-hero-bg--video)::before{
background:
linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.80) 100%),
linear-gradient(90deg, rgba(0,0,0,.0) 50%, rgba(0,0,0,.35) 100%);
}
@media (max-width:680px){
.pa-hero--right .pa-hero-cta{justify-content:flex-end}
}
/* =========================================================
CINEMATIC BREAK SECTION (between Videos und Anwendungen)
========================================================= */
.pa-cinema{
position:relative;
height:88vh;
min-height:560px;
overflow:hidden;
background:#000;
}
.pa-cinema-bg{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
z-index:0;
opacity:.92;
filter:contrast(1.05) saturate(.9);
}
.pa-cinema-overlay{
position:absolute;inset:0;z-index:1;
pointer-events:none;
background:
linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.65) 100%);
}
.pa-cinema-inner{
position:relative;z-index:2;
height:100%;
max-width:1180px;
margin:0 auto;
padding:0 32px;
display:flex;
align-items:center;
}
.pa-cinema-text{max-width:42ch}
.pa-cinema-text .pa-eye{color:var(--accent);margin-bottom:18px}
.pa-cinema-text .pa-mega-mid{
color:#fff;
text-shadow:0 4px 30px rgba(0,0,0,.7);
}
.pa-cinema-body{
margin-top:24px;
font-family:'Roboto';
font-weight:400;
font-size:clamp(15px,1.3vw,18px);
line-height:1.6;
color:rgba(255,255,255,.78);
text-shadow:0 2px 12px rgba(0,0,0,.7);
max-width:46ch;
}
/* Side-Varianten: Text deckt englische baked-in Schrift ab */
.pa-cinema--right .pa-cinema-inner{justify-content:flex-end}
.pa-cinema--right .pa-cinema-text{text-align:right;max-width:42ch}
.pa-cinema--right .pa-cinema-text .pa-eye{text-align:right}
.pa-cinema--right .pa-cinema-body{margin-left:auto}
.pa-cinema--right .pa-cinema-overlay{
background:
linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.65) 100%),
linear-gradient(90deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.55) 100%);
}
.pa-cinema--left .pa-cinema-text{text-align:left}
.pa-cinema--left .pa-cinema-overlay{
background:
linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.65) 100%),
linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 65%);
}
.pa-cinema--center .pa-cinema-inner{justify-content:center}
.pa-cinema--center .pa-cinema-text{text-align:center;max-width:46ch}
/* Hover-Pause: nicht — Video laeuft einmal, friert ein */
@media(max-width:680px){
.pa-cinema{height:70vh;min-height:480px}
}
/* Center-Variante: Vignette + Bottom-Dim damit Brand-Text auf busy backgrounds liest */
.pa-cinema--center .pa-cinema-overlay{
background:
radial-gradient(ellipse 50% 35% at 50% 50%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 70%),
linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.10) 25%, rgba(0,0,0,.10) 70%, rgba(0,0,0,.60) 100%);
}
/* =========================================================
LANG-SWITCHER (Inline-Pills im Topbar)
========================================================= */
#hsLangSwitcher{
display:inline-flex;
align-items:center;
gap:8px;
margin-left:auto;
}
#hsLangSwitcher a{
font-family:'Roboto Condensed',sans-serif;
font-weight:500;
font-size:11.5px;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(255,255,255,.55);
text-decoration:none;
padding:3px 6px;
border-radius:3px;
transition:color .2s, background .2s;
position:relative;
}
#hsLangSwitcher a + a::before{
content:"·";
position:absolute;
left:-9px;top:50%;
transform:translateY(-50%);
color:rgba(255,255,255,.25);
pointer-events:none;
}
#hsLangSwitcher a:hover{
color:#fff;
background:rgba(255,255,255,.06);
}
#hsLangSwitcher a.active{
color:#fff;
}
#hsLangSwitcher a.active b{
font-weight:700;
display:inline-block;
}
/* Google-Translate-Toolbar / -Banner ausblenden */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
.goog-logo-link,
#goog-gt-tt,
.goog-tooltip{ display:none !important; }
body{ top:0 !important; }
.goog-te-gadget{ font-size:0 !important; color:transparent !important; }
.goog-te-gadget .goog-te-combo{ display:none !important; }
.hs-gt-hidden, .hs-gt-hidden .gtranslate_wrapper, .hs-gt-hidden select.goog-te-combo{ position:absolute !important; left:-9999px !important; top:-9999px !important; opacity:0 !important; pointer-events:none !important; }
/* =========================================================
TOPBAR FEINSCHLIFF: Bullets vor Items, Pipe vor Lang-Switcher
========================================================= */
.topbar .wrap > a{
position:relative;
padding-left:14px;
}
.topbar .wrap > a::before{
content:"";
position:absolute;
left:0;top:50%;
width:4px;height:4px;
border-radius:50%;
background:#fff;
transform:translateY(-50%);
}
/* Vertikaler Pipe vor dem Lang-Switcher */
#hsLangSwitcher{
position:relative;
padding-left:18px;
margin-left:18px;
}
#hsLangSwitcher::before{
content:"";
position:absolute;
left:0;top:50%;
height:14px;width:1px;
background:rgba(255,255,255,.20);
transform:translateY(-50%);
}
/* Punkt-Separatoren zwischen Sprachen entfernen */
#hsLangSwitcher a + a::before{ content:none; }
#hsLangSwitcher{ gap:14px; }
#hsLangSwitcher a{
padding:0;
}
#hsLangSwitcher a:hover{ background:transparent; }
/* =========================================================
ÜBER-UNS-SEITE
========================================================= */
.ua-page{background:#000;color:#F4F6F8}
.ua-hero .pa-mega{max-width:14ch}
.ua-hero .pa-tagline{max-width:38ch}
/* === ORIGIN STORY === */
.ua-origin{background:linear-gradient(180deg,#000 0%,#0B0D10 100%)}
.ua-origin-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.ua-origin-text{max-width:none}
.ua-origin-body{margin-top:30px;display:flex;flex-direction:column;gap:18px}
.ua-origin-body p{font-family:'Roboto';font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.78)}
.ua-lead{font-size:clamp(18px,1.6vw,22px)!important;color:#fff!important;font-weight:400;line-height:1.5!important}
.ua-lead em{color:var(--accent);font-style:italic;font-family:'Roboto Condensed';font-weight:400}
.ua-origin-image{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#0F1216;border:1px solid rgba(255,255,255,.06)}
.ua-origin-image img{width:100%;height:100%;object-fit:cover}
.ua-image-caption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font-size:12.5px;color:rgba(255,255,255,.7);letter-spacing:.02em}
.ua-image-caption span{color:var(--accent);font-weight:700}
@media(max-width:900px){.ua-origin-wrap{grid-template-columns:1fr}.ua-origin-image{aspect-ratio:4/3}}
/* === VISION QUOTE === */
.ua-vision{background:#0B0D10;text-align:center;padding:clamp(100px,15vh,180px) 0}
.ua-quote{
font-family:'Roboto Condensed';
font-weight:300;
font-size:clamp(28px,4.4vw,62px);
line-height:1.18;
letter-spacing:-.015em;
color:#fff;
max-width:24ch;
margin:30px auto 0;
position:relative;
font-style:italic;
}
.ua-quote-mark{color:var(--accent);font-style:normal;font-weight:700;font-size:1.5em;line-height:0;vertical-align:-.2em;margin-right:.04em}
.ua-quote-mark-close{color:var(--accent);font-style:normal;font-weight:700;font-size:1.5em;line-height:0;vertical-align:-.2em;margin-left:.04em}
.ua-quote-attribution{margin-top:36px;font-family:'Roboto Condensed';font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.26em;color:rgba(255,255,255,.5)}
/* === MISSION === */
.ua-mission{background:linear-gradient(180deg,#0B0D10 0%,#06080A 100%)}
.ua-mission-wrap{max-width:780px;margin:0 auto}
.ua-mission-text .pa-mega-mid{max-width:16ch}
.ua-body{margin-top:28px;font-family:'Roboto';font-size:clamp(16px,1.3vw,18px);line-height:1.7;color:rgba(255,255,255,.78)}
.ua-body strong{color:#fff;font-weight:500}
/* === STATS Override für Über-Uns === */
.ua-stats{background:#06080A}
.pa-stats-grid--4 .pa-stat-value .pa-stat-unit{color:var(--accent)}
/* === TIMELINE === */
.ua-timeline{background:#0B0D10}
.ua-timeline .pa-mega-mid{margin-bottom:80px}
.ua-tl{
list-style:none;
padding:0;
margin:0 auto;
max-width:780px;
position:relative;
}
.ua-tl::before{
content:"";
position:absolute;
left:88px;top:0;bottom:0;
width:1px;
background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.15) 8%,rgba(255,255,255,.15) 92%,transparent 100%);
}
.ua-tl-item{
display:grid;
grid-template-columns:80px 1fr;
gap:50px;
padding:22px 0;
position:relative;
}
.ua-tl-item::before{
content:"";
position:absolute;
left:80px;top:30px;
width:17px;height:17px;
background:#0B0D10;
border:2px solid var(--accent);
border-radius:50%;
z-index:2;
transition:background .3s, transform .3s;
}
.ua-tl-item:hover::before{background:var(--accent);transform:scale(1.2)}
.ua-tl-year{
font-family:'Roboto Condensed';
font-weight:800;
font-size:24px;
letter-spacing:.01em;
color:var(--accent);
padding-top:18px;
text-align:right;
}
.ua-tl-body{padding-top:6px}
.ua-tl-title{
font-family:'Roboto Condensed';
font-weight:700;
font-size:18px;
color:#fff;
letter-spacing:.005em;
text-transform:uppercase;
margin-bottom:8px;
}
.ua-tl-text{
font-family:'Roboto';
font-size:15px;
line-height:1.6;
color:rgba(255,255,255,.65);
}
@media(max-width:680px){
.ua-tl::before{left:24px}
.ua-tl-item{grid-template-columns:1fr;gap:8px;padding-left:60px}
.ua-tl-item::before{left:18px;top:25px}
.ua-tl-year{text-align:left;padding-top:0;font-size:20px}
}
/* === AWARDS === */
.ua-awards{background:#06080A;text-align:center}
.ua-awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin:60px 0 60px}
.ua-award{
padding:36px 26px;
background:#0B0D10;
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
align-items:center;
gap:14px;
text-align:center;
transition:border-color .3s, transform .3s;
}
.ua-award:hover{border-color:var(--accent);transform:translateY(-3px)}
.ua-award-medal{width:64px;height:64px;color:var(--accent)}
.ua-award-name{font-family:'Roboto Condensed';font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;letter-spacing:.02em;line-height:1.3}
.ua-award-meta{font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.05em}
.ua-jury-quote{
max-width:680px;
margin:0 auto;
padding:34px 40px;
background:rgba(118,184,42,.05);
border-left:2px solid var(--accent);
font-family:'Roboto';
font-size:clamp(15px,1.3vw,18px);
line-height:1.65;
color:rgba(255,255,255,.85);
font-style:italic;
text-align:left;
}
.ua-jury-cite{
margin-top:18px;
font-style:normal;
font-family:'Roboto Condensed';
font-weight:700;
text-transform:uppercase;
font-size:11.5px;
letter-spacing:.22em;
color:rgba(255,255,255,.55);
}
/* === TEAM === */
.ua-team{background:#0B0D10;text-align:center}
.ua-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.ua-person{
padding:38px 28px 30px;
background:#06080A;
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:12px;
transition:border-color .3s, transform .3s;
}
.ua-person:hover{border-color:rgba(118,184,42,.4);transform:translateY(-3px)}
.ua-person--featured{
background:linear-gradient(180deg,#0B0D10 0%,#06080A 100%);
border:2px solid var(--accent);
transform:scale(1.04);
}
.ua-person--featured:hover{transform:scale(1.04) translateY(-3px)}
.ua-person-avatar{
width:96px;height:96px;
border-radius:50%;
background:linear-gradient(135deg,#2A3138,#181C20);
border:1px solid rgba(255,255,255,.1);
display:grid;place-items:center;
font-family:'Roboto Condensed';
font-weight:800;
font-size:32px;
color:var(--accent);
letter-spacing:.04em;
margin-bottom:10px;
}
.ua-person-name{font-family:'Roboto Condensed';font-weight:800;font-size:18px;color:#fff;text-transform:uppercase;letter-spacing:.01em}
.ua-person-role{font-family:'Roboto Condensed';font-weight:600;font-size:12.5px;color:var(--accent);text-transform:uppercase;letter-spacing:.16em}
.ua-person-bio{font-family:'Roboto';font-size:14px;line-height:1.55;color:rgba(255,255,255,.65);margin-top:6px;max-width:28ch}
.ua-person-links{display:flex;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);width:100%;justify-content:center;flex-wrap:wrap}
.ua-person-links a{font-family:'Roboto Condensed';font-weight:600;font-size:12px;color:rgba(255,255,255,.7);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;transition:color .2s}
.ua-person-links a:hover{color:var(--accent)}
@media(max-width:880px){.ua-team-grid{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}.ua-person--featured{transform:none}.ua-person--featured:hover{transform:translateY(-3px)}}
/* === WERTE === */
.ua-values{background:#06080A;text-align:center}
.ua-values-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px;margin-top:60px;text-align:left}
.ua-value{position:relative;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.ua-value::before{content:"";position:absolute;left:0;top:-1px;width:48px;height:2px;background:var(--accent)}
.ua-value-num{font-family:'Roboto Condensed';font-weight:300;font-size:46px;line-height:1;color:#fff;letter-spacing:-.02em;margin-bottom:14px}
.ua-value-name{font-family:'Roboto Condensed';font-weight:800;text-transform:uppercase;font-size:18px;color:#fff;letter-spacing:.02em;margin-bottom:10px}
.ua-value-text{font-family:'Roboto';font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.65)}
/* === STANDORT === */
.ua-location{background:#0B0D10}
.ua-location-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:center}
.ua-addr{
margin-top:32px;
font-family:'Roboto';
font-size:15.5px;
line-height:1.7;
color:rgba(255,255,255,.8);
padding:24px 28px;
background:#06080A;
border:1px solid rgba(255,255,255,.08);
}
.ua-addr strong{color:#fff;font-family:'Roboto Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:14px}
.ua-addr a{color:var(--accent);text-decoration:none;font-weight:500}
.ua-addr a:hover{text-decoration:underline}
.ua-badges{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px}
.ua-badge{
display:inline-block;
padding:7px 14px;
border:1px solid rgba(255,255,255,.18);
border-radius:999px;
font-family:'Roboto Condensed';
font-weight:700;
font-size:11.5px;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(255,255,255,.78);
}
.ua-location-map{
aspect-ratio:4/3;
border-radius:14px;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
filter:grayscale(.4) brightness(.85);
}
.ua-location-map iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:900px){.ua-location-wrap{grid-template-columns:1fr}}
/* =========================================================
ÜBER-UNS TIMELINE 2.0 — Foto-Story-Karten
========================================================= */
.ua-timeline-intro{
max-width:54ch;
margin:24px auto 70px;
text-align:center;
font-family:'Roboto';
font-size:clamp(16px,1.3vw,18px);
line-height:1.65;
color:rgba(255,255,255,.68);
}
.ua-tl2{display:flex;flex-direction:column;gap:clamp(60px,9vw,120px)}
/* Karten-Layout: Bild + Text */
.ua-tl-card{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:clamp(30px,5vw,80px);
align-items:center;
position:relative;
}
.ua-tl-card--left{grid-template-columns:1fr 1.05fr}
.ua-tl-card--left .ua-tl-img{order:2}
.ua-tl-card--left .ua-tl-content{order:1;text-align:right}
.ua-tl-card--left .ua-tl-divider{margin-left:auto}
/* Bild */
.ua-tl-img{
position:relative;
aspect-ratio:5/4;
border-radius:16px;
overflow:hidden;
background:#0F1216;
border:1px solid rgba(255,255,255,.08);
}
.ua-tl-img img{
width:100%;height:100%;
object-fit:cover;
display:block;
transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s ease;
filter:saturate(.85);
}
.ua-tl-card:hover .ua-tl-img img{
transform:scale(1.04);
filter:saturate(1);
}
.ua-tl-img::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.45) 100%);
pointer-events:none;
}
/* Year-Badge auf dem Bild */
.ua-tl-year-badge{
position:absolute;
top:24px;left:24px;
z-index:2;
padding:8px 16px;
background:rgba(11,13,16,.85);
backdrop-filter:blur(12px);
border:1px solid rgba(118,184,42,.4);
font-family:'Roboto Condensed';
font-weight:800;
font-size:14px;
letter-spacing:.04em;
color:var(--accent);
border-radius:4px;
}
/* Text-Seite */
.ua-tl-content{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ua-tl-card--left .ua-tl-content{align-items:flex-end}
.ua-tl-divider{width:60px;height:2px;background:var(--accent);margin-bottom:6px}
.ua-tl-year-text{
font-family:'Roboto Condensed';
font-weight:300;
font-size:clamp(48px,6vw,86px);
line-height:.9;
color:#fff;
letter-spacing:-.025em;
margin-bottom:4px;
}
.ua-tl-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(20px,2.2vw,28px);
line-height:1.2;
letter-spacing:.005em;
color:#fff;
text-transform:uppercase;
margin:0;
max-width:22ch;
}
.ua-tl-text{
font-family:'Roboto';
font-size:clamp(15px,1.2vw,17px);
line-height:1.65;
color:rgba(255,255,255,.68);
max-width:42ch;
margin:0;
}
/* Responsive */
@media (max-width:880px){
.ua-tl-card,.ua-tl-card--left{grid-template-columns:1fr;gap:24px}
.ua-tl-card--left .ua-tl-img{order:1}
.ua-tl-card--left .ua-tl-content{order:2;text-align:left;align-items:flex-start}
.ua-tl-card--left .ua-tl-divider{margin-left:0}
.ua-tl-year-badge{font-size:13px;padding:6px 12px}
}
/* Alte Timeline-Klassen aufräumen (CSS-Reste der v1) */
.ua-tl,.ua-tl-item,.ua-tl-year,.ua-tl-body{display:none!important}
/* =========================================================
ÜBER-UNS TIMELINE 3.0 — Interaktive Year-Pills + Stage
========================================================= */
.ua-timeline-v3{background:#0B0D10;text-align:center}
.ua-timeline-v3 .ua-timeline-intro strong{color:#fff;font-weight:500}
/* Year-Pill-Strip */
.ua-yr-strip{
display:flex;
align-items:center;
gap:14px;
margin:60px auto 40px;
max-width:980px;
}
.ua-yr-track{
display:flex;
gap:6px;
overflow-x:auto;
scroll-behavior:smooth;
scrollbar-width:none;
flex:1;
padding:6px 4px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.ua-yr-track::-webkit-scrollbar{display:none}
.ua-yr-pill{
flex-shrink:0;
scroll-snap-align:center;
background:transparent;
border:1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.55);
font-family:'Roboto Condensed';
font-weight:700;
font-size:13.5px;
letter-spacing:.06em;
padding:9px 14px;
border-radius:999px;
cursor:pointer;
transition:all .25s cubic-bezier(.2,.7,.2,1);
}
.ua-yr-pill:hover{
color:#fff;
border-color:rgba(255,255,255,.35);
background:rgba(255,255,255,.04);
}
.ua-yr-pill.active{
background:var(--accent);
border-color:var(--accent);
color:#06080A;
transform:scale(1.05);
}
.ua-yr-arrow{
background:transparent;
border:1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.7);
width:38px;height:38px;
border-radius:50%;
font-size:16px;
cursor:pointer;
display:grid;
place-items:center;
transition:all .25s var(--ease);
flex-shrink:0;
}
.ua-yr-arrow:hover{
border-color:var(--accent);
color:var(--accent);
background:rgba(118,184,42,.08);
}
.ua-yr-arrow:disabled{opacity:.35;cursor:not-allowed}
/* Stage: alle Karten gestapelt, nur aktive sichtbar */
.ua-yr-stage{
position:relative;
margin:0 auto;
min-height:520px;
}
.ua-yr-card{
position:absolute;
inset:0;
display:grid;
grid-template-columns:1.05fr 1fr;
gap:clamp(30px,5vw,80px);
align-items:center;
opacity:0;
pointer-events:none;
transform:translateY(20px);
transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.ua-yr-card.active{
opacity:1;
pointer-events:auto;
transform:none;
position:relative;
}
.ua-yr-img{
position:relative;
aspect-ratio:5/4;
border-radius:16px;
overflow:hidden;
background:#0F1216;
border:1px solid rgba(255,255,255,.08);
}
.ua-yr-img img{
width:100%;height:100%;
object-fit:cover;
display:block;
filter:saturate(.92);
}
.ua-yr-img::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%);
pointer-events:none;
}
.ua-yr-big-year{
position:absolute;
bottom:24px;left:28px;
z-index:2;
font-family:'Roboto Condensed';
font-weight:200;
font-size:clamp(72px,9vw,128px);
line-height:.85;
color:#fff;
letter-spacing:-.04em;
text-shadow:0 4px 30px rgba(0,0,0,.6);
pointer-events:none;
}
/* Text-Seite */
.ua-yr-text{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ua-yr-counter{
font-family:'Roboto Condensed';
font-weight:700;
text-transform:uppercase;
font-size:11.5px;
letter-spacing:.24em;
color:var(--accent);
}
.ua-yr-divider{width:60px;height:2px;background:var(--accent)}
.ua-yr-year-label{
font-family:'Roboto Condensed';
font-weight:600;
font-size:13px;
letter-spacing:.18em;
color:rgba(255,255,255,.6);
text-transform:uppercase;
}
.ua-yr-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(24px,2.6vw,38px);
line-height:1.15;
letter-spacing:-.005em;
color:#fff;
text-transform:uppercase;
margin:0;
max-width:22ch;
}
.ua-yr-desc{
font-family:'Roboto';
font-size:clamp(15px,1.2vw,17px);
line-height:1.65;
color:rgba(255,255,255,.72);
max-width:44ch;
margin:0;
}
/* Progress-Bar */
.ua-yr-progress{
max-width:980px;
margin:40px auto 0;
height:2px;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.ua-yr-progress-bar{
height:100%;
width:7.14%; /* = 1/14 initial */
background:var(--accent);
transition:width .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
transform-origin:left;
}
@media(max-width:880px){
.ua-yr-card{grid-template-columns:1fr;gap:24px}
.ua-yr-stage{min-height:auto}
.ua-yr-strip{margin-top:40px}
.ua-yr-arrow{display:none}
.ua-yr-img{aspect-ratio:16/10}
}
/* =========================================================
TEAM-FOTOS — runde Portraits statt Initialen
========================================================= */
.ua-person-photo{
width:160px;
height:160px;
border-radius:50%;
overflow:hidden;
background:#0F1216;
border:2px solid rgba(255,255,255,.08);
margin-bottom:18px;
position:relative;
transition:border-color .35s var(--ease), transform .5s cubic-bezier(.2,.7,.2,1);
}
.ua-person-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:saturate(.85) brightness(.96);
transition:filter .55s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.ua-person:hover .ua-person-photo{border-color:rgba(118,184,42,.5)}
.ua-person:hover .ua-person-photo img{
filter:saturate(1.05) brightness(1.02);
transform:scale(1.06);
}
.ua-person--featured .ua-person-photo{
width:180px;
height:180px;
border-color:var(--accent);
box-shadow:0 0 0 6px rgba(118,184,42,.08);
}
/* Alten Initialen-Avatar ausblenden, falls noch vorhanden */
.ua-person-avatar{display:none!important}
/* =========================================================
TEAM-FOTOS GRÖSSER + Bio etwas weniger Padding
========================================================= */
.ua-person-photo{
width:240px;
height:240px;
margin-bottom:24px;
}
.ua-person--featured .ua-person-photo{
width:280px;
height:280px;
}
/* Karte selbst etwas mehr Luft */
.ua-team .ua-person{padding-top:46px;padding-bottom:38px}
/* Mobil: Fotos automatisch kleiner */
@media (max-width:600px){
.ua-person-photo{width:200px;height:200px}
.ua-person--featured .ua-person-photo{width:220px;height:220px}
}
/* =========================================================
TEAM: alle Karten EINHEITLICH (kein Featured-Rahmen mehr)
========================================================= */
.ua-person--featured{
background:#06080A !important;
border:1px solid rgba(255,255,255,.08) !important;
transform:none !important;
}
.ua-person--featured:hover{
border-color:rgba(118,184,42,.4) !important;
transform:translateY(-3px) !important;
}
.ua-person--featured .ua-person-photo{
width:240px !important;
height:240px !important;
border-color:rgba(255,255,255,.08) !important;
box-shadow:none !important;
}
.ua-person--featured:hover .ua-person-photo{
border-color:rgba(118,184,42,.5) !important;
}
@media (max-width:600px){
.ua-person--featured .ua-person-photo{width:200px !important;height:200px !important}
}
/* =========================================================
TEAM-GRID auf 4 Karten ausweiten
========================================================= */
.ua-team-grid{grid-template-columns:repeat(4,1fr) !important;gap:18px !important}
.ua-team .ua-person{padding-left:18px;padding-right:18px}
/* Foto-Avatare auf 4-Spalten-Layout anpassen — etwas kleiner als bei 3 */
.ua-team .ua-person-photo,
.ua-team .ua-person--featured .ua-person-photo{
width:200px !important;
height:200px !important;
}
@media(max-width:1100px){
.ua-team-grid{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:600px){
.ua-team-grid{grid-template-columns:1fr !important;max-width:380px;margin-left:auto;margin-right:auto}
}
/* =========================================================
PRIMARY-NAV: DROPDOWN für sub-menu (System → Produkte)
========================================================= */
header.nav .menu{position:relative}
header.nav .menu li{position:relative}
header.nav .menu li.menu-item-has-children > a::after{
content:"▾";
margin-left:6px;
font-size:9px;
opacity:.7;
transition:transform .2s;
display:inline-block;
}
header.nav .menu li.menu-item-has-children:hover > a::after{transform:rotate(180deg)}
header.nav .menu .sub-menu{
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%) translateY(8px);
background:rgba(11,13,16,.96);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
padding:8px;
min-width:240px;
list-style:none;
margin:0;
opacity:0;
pointer-events:none;
transition:opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
z-index:60;
box-shadow:0 20px 60px rgba(0,0,0,.5);
}
header.nav .menu li.menu-item-has-children:hover > .sub-menu,
header.nav .menu li.menu-item-has-children:focus-within > .sub-menu{
opacity:1;
pointer-events:auto;
transform:translateX(-50%) translateY(0);
}
header.nav .menu .sub-menu li{display:block}
header.nav .menu .sub-menu a{
display:block;
padding:10px 14px;
font-family:'Roboto Condensed';
font-weight:500;
font-size:13.5px;
letter-spacing:.04em;
color:rgba(255,255,255,.75);
text-decoration:none;
border-radius:5px;
transition:background .2s, color .2s;
white-space:nowrap;
text-transform:none;
}
header.nav .menu .sub-menu a:hover{
background:rgba(118,184,42,.12);
color:var(--accent);
}
@media(max-width:900px){
header.nav .menu .sub-menu{display:none !important}
}
/* =========================================================
MOBILE-PANEL: WP-Menü gestylt
========================================================= */
.mobile-panel a{
display:block;
padding:14px 0;
text-decoration:none;
font-family:'Roboto Condensed';
font-weight:600;
font-size:18px;
color:#fff;
border-bottom:1px solid rgba(255,255,255,.08);
letter-spacing:.02em;
transition:color .2s, padding-left .25s;
}
.mobile-panel a:hover{color:var(--accent);padding-left:8px}
.mobile-panel .sub-menu{
list-style:none;
padding:0 0 0 16px;
margin:0 0 8px;
border-left:1px solid rgba(118,184,42,.4);
}
.mobile-panel .sub-menu a{
font-size:14.5px;
padding:9px 0;
color:rgba(255,255,255,.7);
font-weight:500;
letter-spacing:.04em;
border-bottom:none;
}
.mobile-panel .sub-menu a:hover{color:var(--accent)}
.mobile-panel .mobile-cta{
margin-top:24px;
padding:16px 24px;
background:rgba(118,184,42,.12);
border:1px solid var(--accent);
border-radius:6px;
text-align:center;
border-bottom:none !important;
}
/* =========================================================
SUB-MENU FIX: bulletproof hidden by default
========================================================= */
header.nav .menu .sub-menu{
display:none !important;
opacity:1 !important;
pointer-events:auto !important;
transform:translateX(-50%) !important;
}
header.nav .menu li.menu-item-has-children:hover > .sub-menu,
header.nav .menu li.menu-item-has-children:focus-within > .sub-menu,
header.nav .menu li.menu-item-has-children.open > .sub-menu{
display:block !important;
}
/* Im Mobile-Panel weiter offen sichtbar */
.mobile-panel .sub-menu{
display:block !important;
position:static !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
backdrop-filter:none !important;
padding:0 0 0 16px !important;
border-left:1px solid rgba(118,184,42,.4) !important;
border-radius:0 !important;
transform:none !important;
opacity:1 !important;
min-width:0 !important;
}
/* =========================================================
PROJEKT-ÜBERSICHTSSEITE
========================================================= */
.pj-archive{background:#000;color:#F4F6F8}
/* HERO */
.pj-arc-hero{
position:relative;
padding:clamp(120px,18vh,200px) 0 clamp(80px,10vh,120px);
text-align:center;
background:#000;
overflow:hidden;
}
.pj-arc-hero-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 30%, rgba(118,184,42,.08) 0%, transparent 60%),
radial-gradient(ellipse 100% 80% at 50% 100%, rgba(255,255,255,.02) 0%, transparent 60%);
pointer-events:none;
}
.pj-arc-hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px}
.pj-arc-hero .pa-mega{margin:0 auto;max-width:18ch}
.pj-arc-hero-tagline{
max-width:56ch;
margin:32px auto 0;
font-family:'Roboto';
font-size:clamp(16px,1.3vw,18px);
line-height:1.65;
color:rgba(255,255,255,.68);
}
.pj-arc-hero-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin:80px auto 0;
max-width:920px;
padding-top:50px;
border-top:1px solid rgba(255,255,255,.1);
}
.pj-arc-hero-stats > div{text-align:center}
.pj-arc-hero-stats span{
display:block;
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(28px,3.6vw,52px);
line-height:.9;
color:#fff;
letter-spacing:-.02em;
}
.pj-arc-hero-stats em{
display:block;
margin-top:10px;
font-style:normal;
font-family:'Roboto Condensed';
font-weight:700;
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(255,255,255,.5);
}
@media(max-width:680px){
.pj-arc-hero-stats{grid-template-columns:repeat(2,1fr);gap:30px}
}
/* FILTER */
.pj-arc-filter{
position:sticky;
top:64px;
z-index:40;
background:rgba(11,13,16,.92);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border-top:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
padding:14px 0;
}
.pj-arc-filter .pa-wrap{
display:flex;
gap:8px;
overflow-x:auto;
scrollbar-width:none;
scroll-snap-type:x proximity;
padding-left:24px;
padding-right:24px;
}
.pj-arc-filter .pa-wrap::-webkit-scrollbar{display:none}
.pj-arc-pill{
flex-shrink:0;
background:transparent;
border:1px solid rgba(255,255,255,.15);
color:rgba(255,255,255,.65);
font-family:'Roboto Condensed';
font-weight:700;
font-size:12.5px;
letter-spacing:.08em;
text-transform:uppercase;
padding:9px 18px;
border-radius:999px;
cursor:pointer;
transition:all .25s cubic-bezier(.2,.7,.2,1);
scroll-snap-align:center;
}
.pj-arc-pill:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.pj-arc-pill.active{
background:var(--accent);
border-color:var(--accent);
color:#06080A;
}
/* FEATURED PROJECT (big) */
.pj-arc-featured{padding:clamp(50px,7vh,90px) 0 0}
.pj-feat-inner{
display:block;
max-width:1340px;
margin:0 auto;
padding:0 32px;
text-decoration:none;
color:inherit;
}
.pj-feat-img{
position:relative;
aspect-ratio:21/9;
border-radius:16px;
overflow:hidden;
background:#0F1216;
border:1px solid rgba(255,255,255,.08);
}
.pj-feat-img img{
width:100%;height:100%;
object-fit:cover;
filter:saturate(.92);
transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .6s;
}
.pj-arc-featured:hover .pj-feat-img img{transform:scale(1.03);filter:saturate(1.05)}
.pj-feat-grad{
position:absolute;inset:0;
background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 35%, transparent 55%, rgba(0,0,0,.85) 100%);
z-index:2;
}
.pj-feat-content{
position:relative;
margin-top:-180px;
padding:0 clamp(20px,3vw,40px);
z-index:3;
display:flex;
flex-direction:column;
gap:24px;
}
.pj-feat-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 clamp(8px,1vw,16px);
}
.pj-feat-tag{
display:inline-block;
padding:7px 14px;
background:var(--accent);
color:#06080A;
font-family:'Roboto Condensed';
font-weight:800;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
border-radius:4px;
}
.pj-feat-logo{
background:rgba(255,255,255,.95);
padding:8px 14px;
border-radius:6px;
max-width:160px;
max-height:54px;
display:flex;
align-items:center;
justify-content:center;
}
.pj-feat-logo img{max-width:100%;max-height:38px;height:auto;width:auto;object-fit:contain}
.pj-feat-body{padding:0 clamp(8px,1vw,16px) 30px}
.pj-feat-eye{
font-family:'Roboto Condensed';
font-weight:700;
font-size:12px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--accent);
margin:0 0 14px;
}
.pj-feat-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(28px,4vw,52px);
line-height:1.05;
letter-spacing:-.015em;
color:#fff;
text-transform:uppercase;
margin:0;
max-width:24ch;
}
.pj-feat-sub{
margin:14px 0 0;
font-family:'Roboto';
font-size:clamp(16px,1.3vw,18px);
line-height:1.5;
color:rgba(255,255,255,.75);
max-width:48ch;
}
.pj-feat-facts{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:32px;
padding:24px 0;
border-top:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
}
.pj-feat-fact span{
display:block;
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(20px,2.2vw,28px);
color:#fff;
letter-spacing:-.01em;
line-height:1;
}
.pj-feat-fact em{
display:block;
margin-top:8px;
font-style:normal;
font-family:'Roboto Condensed';
font-weight:600;
font-size:11px;
letter-spacing:.18em;
text-transform:uppercase;
color:rgba(255,255,255,.5);
}
.pj-feat-cta{
display:inline-flex;
align-items:center;
gap:10px;
margin-top:32px;
font-family:'Roboto Condensed';
font-weight:800;
font-size:14px;
letter-spacing:.06em;
text-transform:uppercase;
color:var(--accent);
}
.pj-feat-cta span{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pj-arc-featured:hover .pj-feat-cta span{transform:translateX(6px)}
@media(max-width:880px){
.pj-feat-img{aspect-ratio:16/10}
.pj-feat-content{margin-top:-100px}
.pj-feat-facts{grid-template-columns:repeat(2,1fr)}
}
/* MAGAZIN-GRID */
.pj-arc-grid{padding:clamp(60px,9vh,120px) 0 clamp(80px,11vh,140px)}
.pj-arc-grid-wrap{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:24px;
}
.pj-card{
grid-column:span 3; /* default: 2-Spalten */
display:block;
text-decoration:none;
color:inherit;
transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.pj-card--wide{grid-column:span 6} /* 1+4 = 1-Spalten-Width */
.pj-card:hover{transform:translateY(-4px)}
.pj-card-img{
position:relative;
aspect-ratio:16/10;
border-radius:14px;
overflow:hidden;
background:#0F1216;
border:1px solid rgba(255,255,255,.08);
}
.pj-card--wide .pj-card-img{aspect-ratio:21/9}
.pj-card-img img{
width:100%;height:100%;
object-fit:cover;
filter:saturate(.88);
transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.pj-card:hover .pj-card-img img{transform:scale(1.05);filter:saturate(1.02)}
.pj-card-grad{
position:absolute;inset:0;
background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55) 100%);
z-index:2;
pointer-events:none;
}
.pj-card-logo{
position:absolute;
top:18px;right:18px;
z-index:3;
background:rgba(255,255,255,.95);
padding:6px 10px;
border-radius:4px;
max-height:44px;
display:flex;align-items:center;
}
.pj-card-logo img{max-height:28px;max-width:120px;height:auto;width:auto;object-fit:contain}
.pj-card-body{
padding:24px 4px 0;
position:relative;
}
.pj-card-eye{
font-family:'Roboto Condensed';
font-weight:700;
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--accent);
margin:0 0 10px;
}
.pj-card-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(18px,1.8vw,24px);
line-height:1.15;
letter-spacing:-.005em;
color:#fff;
text-transform:uppercase;
margin:0;
max-width:24ch;
padding-right:32px;
}
.pj-card-sub{
margin:10px 0 14px;
font-family:'Roboto';
font-size:14.5px;
line-height:1.5;
color:rgba(255,255,255,.6);
}
.pj-card-facts{
display:flex;
flex-wrap:wrap;
gap:8px 14px;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.1);
}
.pj-card-facts span{
font-family:'Roboto Condensed';
font-weight:600;
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase;
color:rgba(255,255,255,.55);
position:relative;
}
.pj-card-facts span:not(:last-child)::after{
content:"·";
position:absolute;
right:-9px;top:50%;
transform:translateY(-50%);
color:rgba(255,255,255,.3);
}
.pj-card-arrow{
position:absolute;
top:24px;right:8px;
font-size:18px;
color:var(--accent);
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.pj-card:hover .pj-card-arrow{transform:translateX(6px)}
/* Filter: filtered-out Karten ausblenden */
.pj-arc-item.hidden{display:none !important}
@media(max-width:880px){
.pj-arc-grid-wrap{grid-template-columns:1fr;gap:32px}
.pj-card,.pj-card--wide{grid-column:span 1}
}
/* CTA */
.pj-arc-cta{
background:linear-gradient(180deg,#06080A 0%, #000 100%);
text-align:center;
}
/* =========================================================
PROJEKT-OVERVIEW v2: POSTER-KARTEN mit Hero-Stat
========================================================= */
/* Alte Magazin-Grid-Regeln neutralisieren */
.pj-arc-grid-wrap{display:none !important}
/* Featured-Overlay verbessert */
.pj-feat-overlay{
position:absolute;inset:0;
z-index:3;
padding:32px;
display:flex;
flex-direction:column;
justify-content:space-between;
pointer-events:none;
}
.pj-feat-overlay-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.pj-feat-counter{
font-family:'Roboto Condensed';
font-weight:700;
font-size:13px;
letter-spacing:.24em;
text-transform:uppercase;
color:rgba(255,255,255,.85);
background:rgba(0,0,0,.4);
padding:6px 12px;
border:1px solid rgba(255,255,255,.18);
border-radius:4px;
backdrop-filter:blur(8px);
}
.pj-feat-overlay .pj-feat-logo{
align-self:flex-end;
background:rgba(255,255,255,.95);
padding:10px 18px;
border-radius:6px;
max-width:200px;
max-height:74px;
display:flex;
align-items:center;
justify-content:center;
}
.pj-feat-overlay .pj-feat-logo img{max-width:100%;max-height:50px}
/* ============ POSTER-GRID ============ */
.pj-posters{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:clamp(16px,2vw,28px);
}
@media(max-width:1024px){.pj-posters{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.pj-posters{grid-template-columns:1fr}}
.pj-poster{
position:relative;
aspect-ratio:3/4;
border-radius:14px;
overflow:hidden;
background:#0F1216;
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
color:inherit;
display:block;
isolation:isolate;
transition:transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s;
}
.pj-poster:hover{transform:translateY(-6px);border-color:rgba(118,184,42,.4)}
/* IMAGE Layer */
.pj-poster-img{position:absolute;inset:0;z-index:1;overflow:hidden}
.pj-poster-img img{
width:100%;height:100%;
object-fit:cover;
filter:saturate(.78) brightness(.78);
transition:transform 1.6s cubic-bezier(.2,.7,.2,1), filter .55s ease;
}
.pj-poster:hover .pj-poster-img img{transform:scale(1.07);filter:saturate(.95) brightness(.86)}
.pj-poster-grad{
position:absolute;inset:0;
background:
linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 28%, rgba(0,0,0,.0) 55%, rgba(0,0,0,.92) 100%);
z-index:2;
pointer-events:none;
}
/* TOP-Meta (Counter + Logo) */
.pj-poster-meta-top{
position:absolute;
top:18px;left:18px;right:18px;
z-index:3;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}
.pj-poster-counter{
font-family:'Roboto Condensed';
font-weight:800;
font-size:11.5px;
letter-spacing:.26em;
text-transform:uppercase;
color:rgba(255,255,255,.85);
background:rgba(0,0,0,.4);
padding:5px 10px;
border:1px solid rgba(255,255,255,.16);
border-radius:3px;
backdrop-filter:blur(8px);
}
.pj-poster-logo{
background:rgba(255,255,255,.95);
padding:5px 9px;
border-radius:3px;
max-width:120px;
max-height:36px;
display:flex;align-items:center;justify-content:center;
}
.pj-poster-logo img{max-width:100%;max-height:24px;height:auto;width:auto;object-fit:contain}
/* HERO-STAT (große Killer-Zahl mittig oben rechts) */
.pj-poster-stat{
position:absolute;
top:38%;
right:22px;
z-index:3;
text-align:right;
transform:translateY(-50%);
}
.pj-poster-stat-v{
font-family:'Roboto Condensed';
font-weight:200;
font-size:clamp(48px,5.5vw,76px);
line-height:.85;
letter-spacing:-.03em;
color:#fff;
text-shadow:0 4px 30px rgba(0,0,0,.7);
}
.pj-poster-stat-l{
margin-top:8px;
font-family:'Roboto Condensed';
font-weight:700;
font-size:10px;
letter-spacing:.26em;
text-transform:uppercase;
color:var(--accent);
}
/* BOTTOM Title */
.pj-poster-bottom{
position:absolute;
bottom:24px;left:22px;right:22px;
z-index:3;
transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s;
}
.pj-poster-eye{
margin:0 0 10px;
font-family:'Roboto Condensed';
font-weight:700;
font-size:10.5px;
letter-spacing:.26em;
text-transform:uppercase;
color:var(--accent);
}
.pj-poster-title{
margin:0 0 10px;
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(18px,1.8vw,23px);
line-height:1.12;
letter-spacing:-.005em;
color:#fff;
text-transform:uppercase;
max-width:24ch;
}
.pj-poster-loc{
margin:0;
font-family:'Roboto Condensed';
font-weight:500;
font-size:12px;
letter-spacing:.04em;
color:rgba(255,255,255,.62);
}
/* HOVER-REVEAL: Kurzbeschreibung + CTA */
.pj-poster-hover{
position:absolute;
inset:0;
z-index:4;
background:linear-gradient(180deg, rgba(11,13,16,.0) 0%, rgba(11,13,16,.6) 35%, rgba(11,13,16,.96) 100%);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:24px;
opacity:0;
pointer-events:none;
transition:opacity .35s ease;
}
.pj-poster:hover .pj-poster-hover{opacity:1}
.pj-poster:hover .pj-poster-bottom{transform:translateY(-30px);opacity:0}
.pj-poster:hover .pj-poster-stat{opacity:.3;transform:translateY(-50%) scale(.96)}
.pj-poster-hover p{
margin:0 0 18px;
font-family:'Roboto';
font-size:14px;
line-height:1.55;
color:rgba(255,255,255,.85);
max-width:34ch;
}
.pj-poster-hover-cta{
display:inline-flex;
align-items:center;
gap:10px;
font-family:'Roboto Condensed';
font-weight:800;
font-size:12px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--accent);
}
.pj-poster-hover-cta span{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pj-poster:hover .pj-poster-hover-cta span{transform:translateX(6px)}
/* Tablet/Mobile: Hover-Reveal nicht möglich → CTA dauerhaft am Boden */
@media(hover:none){
.pj-poster-hover{opacity:0 !important}
.pj-poster-bottom{transform:none !important;opacity:1 !important}
}
/* =========================================================
PROJEKT-OVERVIEW v3: 2er-Grid, Stats kleiner + bold
========================================================= */
.pj-posters{grid-template-columns:repeat(2,1fr) !important}
@media(max-width:680px){.pj-posters{grid-template-columns:1fr !important}}
/* Stat: kleiner und bold (statt thin riesig) */
.pj-poster-stat-v{
font-weight:800 !important;
font-size:clamp(26px,2.6vw,38px) !important;
letter-spacing:-.01em !important;
text-shadow:0 2px 18px rgba(0,0,0,.6) !important;
}
.pj-poster-stat-l{font-size:10px !important}
.pj-poster-stat{top:30px !important;right:24px !important;transform:none !important}
/* Wenn Stat oben sitzt → Counter etwas tiefer rücken kollidiert nicht */
.pj-poster-meta-top{align-items:flex-start !important}
/* =========================================================
PROJEKT-OVERVIEW v4: STRIPPED DOWN — Apple-clean
========================================================= */
/* Karte selbst: kein hartes Frame mehr — alles atmet */
.pj-poster{
aspect-ratio:auto !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
overflow:visible !important;
isolation:auto !important;
padding:0;
}
.pj-poster:hover{transform:none !important;border-color:transparent !important}
/* Image isoliert, nur das Bild kriegt Radius */
.pj-poster-img{
position:relative !important;
aspect-ratio:16/10 !important;
inset:auto !important;
border-radius:14px !important;
overflow:hidden !important;
margin-bottom:24px;
border:1px solid rgba(255,255,255,.08);
}
.pj-poster-img img{
filter:saturate(.95) brightness(.92) !important;
transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .55s ease !important;
}
.pj-poster:hover .pj-poster-img img{
transform:scale(1.04) !important;
filter:saturate(1.02) brightness(.97) !important;
}
/* Komplett ausblenden was wir nicht brauchen */
.pj-poster-grad,
.pj-poster-stat,
.pj-poster-hover{display:none !important}
/* Counter weg, Logo bleibt — aber kleiner und subtiler */
.pj-poster-meta-top{
position:static !important;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
top:auto !important; left:auto !important; right:auto !important;
margin-bottom:14px;
}
.pj-poster-counter{display:none !important}
.pj-poster-logo{
background:transparent !important;
padding:0 !important;
max-height:24px !important;
filter:brightness(1.6) saturate(0);
opacity:.7;
transition:opacity .25s, filter .25s;
}
.pj-poster:hover .pj-poster-logo{opacity:1;filter:none}
.pj-poster-logo img{max-height:24px !important;max-width:120px !important}
/* Bottom-Block aus Overlay raus → normaler Fluss */
.pj-poster-bottom{
position:static !important;
bottom:auto !important;left:auto !important;right:auto !important;
transform:none !important;
opacity:1 !important;
padding:0;
}
/* Neue Typo-Hierarchie */
.pj-poster-eye{
font-size:11px !important;
letter-spacing:.26em !important;
margin:0 0 14px !important;
}
.pj-poster-title{
font-size:clamp(22px,2.4vw,32px) !important;
line-height:1.1 !important;
margin:0 0 10px !important;
max-width:none !important;
letter-spacing:-.005em !important;
transition:color .25s ease;
}
.pj-poster:hover .pj-poster-title{color:#fff}
.pj-poster-loc{
font-size:13.5px !important;
letter-spacing:.03em !important;
color:rgba(255,255,255,.55) !important;
margin:0 !important;
}
/* Meta-Zeile mit Pfeil rechts unten */
.pj-poster-bottom::after{
content:"Case Study →";
display:inline-block;
margin-top:18px;
font-family:'Roboto Condensed';
font-weight:800;
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:var(--accent);
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.pj-poster:hover .pj-poster-bottom::after{transform:translateX(6px)}
/* Mehr Luft zwischen Karten */
.pj-posters{gap:clamp(40px,5vw,72px) !important}
/* =========================================================
PROJEKT-OVERVIEW — Scroll-Effekte & Parallax
========================================================= */
/* HERO Stagger */
.pj-arc-hero .pa-eye,
.pj-arc-hero .pa-mega,
.pj-arc-hero-tagline,
.pj-arc-hero-stats > div{
opacity:0;
transform:translateY(34px);
transition:opacity 1.05s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.pj-arc-hero.in .pa-eye{opacity:1;transform:none;transition-delay:0s}
.pj-arc-hero.in .pa-mega{opacity:1;transform:none;transition-delay:.12s}
.pj-arc-hero.in .pj-arc-hero-tagline{opacity:1;transform:none;transition-delay:.32s}
.pj-arc-hero.in .pj-arc-hero-stats > div:nth-child(1){opacity:1;transform:none;transition-delay:.52s}
.pj-arc-hero.in .pj-arc-hero-stats > div:nth-child(2){opacity:1;transform:none;transition-delay:.62s}
.pj-arc-hero.in .pj-arc-hero-stats > div:nth-child(3){opacity:1;transform:none;transition-delay:.72s}
.pj-arc-hero.in .pj-arc-hero-stats > div:nth-child(4){opacity:1;transform:none;transition-delay:.82s}
/* FEATURED reveal */
.pj-arc-featured .pj-feat-img,
.pj-arc-featured .pj-feat-content{
opacity:0;
transform:translateY(50px);
transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.pj-arc-featured.in .pj-feat-img{opacity:1;transform:none}
.pj-arc-featured.in .pj-feat-content{opacity:1;transform:none;transition-delay:.25s}
/* POSTER Cards: staggered fade-up + 2-Spalten gestaffelt */
.pj-poster{
opacity:0;
transform:translateY(48px);
transition:opacity .95s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1);
}
.pj-poster.in{opacity:1;transform:none}
.pj-poster:nth-child(2n).in{transition-delay:.12s}
/* POSTER inner stagger (eyebrow→title→loc) */
.pj-poster-bottom > *{
opacity:0;
transform:translateY(12px);
transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.pj-poster.in .pj-poster-eye{opacity:1;transform:none;transition-delay:.25s}
.pj-poster.in .pj-poster-title{opacity:1;transform:none;transition-delay:.35s}
.pj-poster.in .pj-poster-loc{opacity:1;transform:none;transition-delay:.45s}
/* PARALLAX via CSS-Variablen */
.pj-poster-img img{
transform:translateY(var(--py,0)) scale(var(--sc,1.08)) !important;
transition:transform .12s linear, filter .55s ease !important;
will-change:transform;
}
.pj-poster:hover .pj-poster-img img{
--sc:1.12;
transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .55s ease !important;
}
.pj-feat-img img{
transform:translateY(var(--py,0)) scale(var(--sc,1.05)) !important;
transition:transform .12s linear, filter .55s ease !important;
will-change:transform;
}
.pj-arc-featured:hover .pj-feat-img img{--sc:1.08}
/* Filter-Pills reveal */
.pj-arc-filter .pj-arc-pill{
opacity:0;
transform:translateY(10px);
transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.pj-arc-filter.in .pj-arc-pill{opacity:1;transform:none}
.pj-arc-filter.in .pj-arc-pill:nth-child(1){transition-delay:.05s}
.pj-arc-filter.in .pj-arc-pill:nth-child(2){transition-delay:.10s}
.pj-arc-filter.in .pj-arc-pill:nth-child(3){transition-delay:.15s}
.pj-arc-filter.in .pj-arc-pill:nth-child(4){transition-delay:.20s}
.pj-arc-filter.in .pj-arc-pill:nth-child(5){transition-delay:.25s}
.pj-arc-filter.in .pj-arc-pill:nth-child(6){transition-delay:.30s}
/* Reduce-motion respekt */
@media (prefers-reduced-motion: reduce){
.pj-arc-hero *, .pj-poster, .pj-poster-bottom > *, .pj-arc-featured *, .pj-arc-pill{
opacity:1 !important; transform:none !important; transition:none !important;
}
}
/* =========================================================
NEWS-OVERVIEW (re-uses .pj-archive pattern)
========================================================= */
.nw-archive .pj-poster-loc{
font-size:13.5px !important;
line-height:1.55 !important;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
color:rgba(255,255,255,.62) !important;
}
.nw-archive .pj-poster-counter{
text-transform:none !important;
letter-spacing:.08em !important;
font-weight:600 !important;
}
.nw-archive .pj-feat-counter{
text-transform:none !important;
letter-spacing:.08em !important;
}
/* Pagination */
.nw-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:80px;
flex-wrap:wrap;
}
.nw-pagination .page-numbers{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:42px;
height:42px;
padding:0 16px;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
font-family:'Roboto Condensed';
font-weight:700;
font-size:13.5px;
letter-spacing:.06em;
color:rgba(255,255,255,.7);
text-decoration:none;
transition:all .25s var(--ease);
}
.nw-pagination .page-numbers:hover{
color:#fff;
border-color:rgba(255,255,255,.35);
background:rgba(255,255,255,.04);
}
.nw-pagination .page-numbers.current{
background:var(--accent);
border-color:var(--accent);
color:#06080A;
}
.nw-pagination .dots{border:0;background:transparent}
/* =========================================================
HÖHENVORTEIL-RECHNER (white panel im dark theme)
========================================================= */
.rc-page{background:#000;color:#F4F6F8}
.rc-hero .pa-mega{max-width:14ch}
.rc-hero .pa-tagline{max-width:40ch}
.rc-calc{
background:linear-gradient(180deg, #000 0%, #06080A 50%, #0B0D10 100%);
padding:clamp(60px,9vh,120px) 0;
}
.rc-calc-inner{
max-width:1320px;
margin:0 auto;
padding:clamp(24px,4vw,48px) clamp(20px,3vw,40px);
background:#fff;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.rc-calc-inner .hsc{margin:0}
.rc-calc-inner .hsc .wrap{padding-top:0;padding-bottom:0}
@media(max-width:680px){
.rc-calc{padding:30px 0}
.rc-calc-inner{padding:24px 16px;border-radius:8px}
}
/* =========================================================
INNOTRANS LANDINGPAGE (Digital + Print)
========================================================= */
.it-page{background:#000;color:#F4F6F8}
.it-hero .pa-mega{max-width:16ch}
.it-hero .pa-tagline{max-width:52ch}
.it-intro{
max-width:60ch;
margin:24px auto 60px;
text-align:center;
font-family:'Roboto';
font-size:clamp(15px,1.3vw,18px);
line-height:1.65;
color:rgba(255,255,255,.7);
}
/* --- REQUIREMENTS GRID --- */
.it-req{background:#0B0D10}
.it-req-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:2px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
}
.it-req{
background:#0B0D10;
padding:36px 30px;
display:flex;flex-direction:column;gap:14px;
transition:background .3s var(--ease);
}
.it-req:hover{background:#13181D}
.it-req-num{
font-family:'Roboto Condensed';
font-weight:300;
font-size:46px;
line-height:1;
color:var(--accent);
letter-spacing:-.02em;
}
.it-req-name{
font-family:'Roboto Condensed';
font-weight:800;
font-size:17px;
text-transform:uppercase;
color:#fff;
letter-spacing:.01em;
line-height:1.25;
}
.it-req-text{
font-family:'Roboto';
font-size:14.5px;
line-height:1.55;
color:rgba(255,255,255,.65);
}
@media(max-width:900px){.it-req-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.it-req-grid{grid-template-columns:1fr}}
/* --- LÖSUNG SPLIT --- */
.it-solution{background:linear-gradient(180deg,#0B0D10 0%,#06080A 100%)}
.it-sol-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(30px,4vw,60px);
margin-top:20px;
}
.it-sol{
padding:44px 40px;
background:#0B0D10;
border:1px solid rgba(255,255,255,.08);
border-top:2px solid var(--accent);
}
.it-sol-tag{
display:inline-block;
padding:5px 12px;
background:var(--accent);
color:#06080A;
font-family:'Roboto Condensed';
font-weight:800;
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
border-radius:3px;
margin-bottom:24px;
}
.it-sol-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(22px,2.4vw,32px);
line-height:1.1;
text-transform:uppercase;
color:#fff;
margin:0 0 24px;
letter-spacing:-.005em;
}
@media(max-width:880px){.it-sol-grid{grid-template-columns:1fr}}
/* --- PRAXIS PHOTOS --- */
.it-photos{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:16px;
margin:60px 0 60px;
}
.it-photos figure{
margin:0;
display:flex;flex-direction:column;
}
.it-photos img{
width:100%;
aspect-ratio:3/4;
object-fit:cover;
border-radius:6px;
border:1px solid rgba(255,255,255,.08);
filter:saturate(.9);
transition:filter .35s,transform .5s cubic-bezier(.2,.7,.2,1);
}
.it-photos figure:hover img{filter:saturate(1.05);transform:translateY(-3px)}
.it-photos figcaption{
margin-top:12px;
font-family:'Roboto';
font-size:12.5px;
line-height:1.45;
color:rgba(255,255,255,.55);
}
@media(max-width:880px){.it-photos{grid-template-columns:repeat(2,1fr)}}
/* --- TIMELINE --- */
.it-timeline{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:32px;
margin:20px 0 60px;
}
.it-tl-item{padding-top:22px;border-top:2px solid var(--accent)}
.it-tl-date{
font-family:'Roboto Condensed';
font-weight:800;
font-size:14px;
text-transform:uppercase;
letter-spacing:.06em;
color:#fff;
margin-bottom:10px;
}
.it-tl-text{
font-family:'Roboto';
font-size:14px;
line-height:1.55;
color:rgba(255,255,255,.6);
}
@media(max-width:880px){.it-timeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.it-timeline{grid-template-columns:1fr}}
/* --- QUOTE --- */
.it-quote{
max-width:820px;
margin:20px auto 0;
padding:36px 46px;
background:rgba(118,184,42,.05);
border-left:3px solid var(--accent);
font-family:'Roboto Condensed';
font-weight:300;
font-size:clamp(20px,2vw,26px);
line-height:1.35;
color:rgba(255,255,255,.9);
font-style:italic;
text-align:left;
}
.it-quote-mark{color:var(--accent);font-weight:700;font-size:1.4em;line-height:0;vertical-align:-.2em}
.it-quote-cite{
margin-top:22px;
font-style:normal;
font-family:'Roboto Condensed';
font-weight:700;
text-transform:uppercase;
font-size:11.5px;
letter-spacing:.22em;
color:rgba(255,255,255,.55);
}
/* --- TECH ADAPTER --- */
.it-tech-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:20px;
}
.it-tech-card{
background:linear-gradient(180deg,#F2F4F7 0%,#E4E7EA 100%);
border-radius:12px;
padding:20px;
aspect-ratio:3/4;
display:flex;align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,.1);
transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.it-tech-card:hover{transform:translateY(-4px)}
.it-tech-card img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:880px){.it-tech-grid{grid-template-columns:1fr;max-width:340px;margin:20px auto 0}}
/* --- PRINT-FOOTER (nur bei Print sichtbar) --- */
.it-print-footer{display:none}
/* =========================================================
PRINT STYLES — Digital One-Pager als A4 druckbar
========================================================= */
@media print {
@page{ size:A4; margin:14mm 12mm; }
body{background:#fff!important;color:#111!important}
header.nav,.topbar,.announce,footer,.mobile-panel,
.pa-subnav,.pa-hero-scroll,.pa-hero-grain,.pa-hero-darken,
.pa-hero-cta,.it-print-btn,.pa-cta-buttons,.pj-arc-filter{display:none!important}
.it-page{background:#fff!important;color:#111!important}
.pa-hero{min-height:auto!important;padding:0 0 12mm!important;background:#fff!important}
.pa-hero-bg{display:none!important}
.pa-hero-inner{padding:0!important}
.pa-hero-text{max-width:none!important}
.pa-mega{color:#111!important;text-shadow:none!important;font-size:32pt!important;margin:4mm 0 3mm!important;line-height:1.05!important}
.pa-tagline{color:#333!important;font-size:11pt!important;line-height:1.4!important;max-width:none!important;margin:0 0 6mm!important}
.pa-eye{color:#76B82A!important;font-size:8pt!important;letter-spacing:.18em!important}
.pa-section{padding:6mm 0!important;background:#fff!important}
.pa-mega-mid{color:#111!important;text-shadow:none!important;font-size:18pt!important;line-height:1.1!important;margin:0 0 3mm!important}
.pa-mega-mid--center,.pa-eye--center{text-align:left!important}
.it-intro{color:#333!important;font-size:10pt!important;text-align:left!important;margin:0 0 5mm!important;max-width:none!important}
/* Requirements: 3-Spalten, kompakt */
.it-req-grid{background:transparent!important;border:0!important;gap:0!important;grid-template-columns:repeat(3,1fr)!important}
.it-req{background:transparent!important;padding:2mm 3mm 3mm 0!important;border-top:.4pt solid #ccc}
.it-req-num{color:#76B82A!important;font-size:18pt!important;margin-bottom:1mm}
.it-req-name{color:#111!important;font-size:9pt!important;letter-spacing:.02em!important}
.it-req-text{color:#333!important;font-size:8.5pt!important;line-height:1.35!important}
/* Solution: 2-Spalten */
.it-sol-grid{gap:5mm!important}
.it-sol{background:transparent!important;border:0!important;border-top:1pt solid #76B82A!important;padding:3mm 0 0 0!important}
.it-sol-tag{background:#76B82A!important;color:#fff!important;font-size:7.5pt!important;padding:1mm 3mm!important;margin-bottom:3mm!important}
.it-sol-title{color:#111!important;font-size:12pt!important;margin:0 0 3mm!important;line-height:1.15!important}
.pa-checks{margin:0!important;gap:1.5mm!important}
.pa-checks li{color:#333!important;font-size:8.5pt!important;line-height:1.35!important;padding-left:6mm!important}
.pa-checks li::before{width:3mm!important;height:3mm!important;border-color:#76B82A!important;top:2px!important;background:transparent!important}
.pa-checks li::after{width:1.5mm!important;height:.7mm!important;border-color:#76B82A!important;top:4px!important;left:1.2mm!important}
/* Stats: 4-Spalten */
.pa-stats-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:4mm!important;margin:0!important}
.pa-stat-value{color:#111!important;font-size:18pt!important;justify-content:flex-start!important;gap:2mm!important}
.pa-stat-unit{color:#76B82A!important;font-size:9pt!important}
.pa-stat-label{color:#666!important;font-size:7.5pt!important;letter-spacing:.14em!important;margin:1mm 0 0!important;padding:1mm 0 0!important;border-top:.3pt solid #ddd!important}
/* Praxis: Fotos kompakt */
.it-photos{grid-template-columns:repeat(4,1fr)!important;gap:2mm!important;margin:3mm 0 4mm!important}
.it-photos img{aspect-ratio:3/4!important;filter:none!important;border-radius:2px!important;border:.3pt solid #ccc!important}
.it-photos figcaption{color:#666!important;font-size:7pt!important;margin-top:1mm!important;line-height:1.3!important}
/* Timeline */
.it-timeline{grid-template-columns:repeat(4,1fr)!important;gap:3mm!important;margin:0 0 4mm!important}
.it-tl-item{border-top:1pt solid #76B82A!important;padding-top:2mm!important}
.it-tl-date{color:#111!important;font-size:9pt!important;margin-bottom:1mm!important}
.it-tl-text{color:#333!important;font-size:8pt!important;line-height:1.3!important}
/* Quote */
.it-quote{background:transparent!important;border-left:2pt solid #76B82A!important;padding:2mm 5mm!important;font-size:10pt!important;color:#111!important;margin:3mm 0!important}
.it-quote-cite{color:#666!important;font-size:7.5pt!important;margin-top:2mm!important}
/* Tech Adapter */
.it-tech-grid{grid-template-columns:repeat(3,1fr)!important;gap:3mm!important;margin:3mm 0 0!important}
.it-tech-card{background:#F2F4F7!important;aspect-ratio:1/1!important;padding:2mm!important;border-radius:3px!important}
/* Print-Footer sichtbar */
.it-print-footer{
display:block!important;
margin-top:6mm!important;
padding-top:3mm!important;
border-top:.4pt solid #ccc!important;
font-family:'Roboto Condensed',sans-serif!important;
font-size:8pt!important;
color:#555!important;
text-align:center!important;
line-height:1.4!important;
}
.it-print-footer strong{color:#111}
/* Page-Breaks steuern */
.it-req,.it-sol,.pa-stat,.it-tl-item,.it-tech-card{break-inside:avoid}
.pa-section{break-inside:avoid-page}
.pa-cta{display:none!important} /* CTA raus für Print — Kontakt steht im Footer */
}
/* =========================================================
PRODUKT-VIDEO auf Startseite (statt Static Image)
========================================================= */
.prod-video{
width:100%;
height:100%;
object-fit:cover;
display:block;
background:#000;
}
/* Wenn Video pausiert (offscreen), zeigen wir das Poster über CSS-Filter dezent an */
.prod-video[data-paused="1"]{filter:brightness(.8)}
/* =========================================================
VIDEO-CAROUSEL HEADLINE: Zeilenabstand fixen
========================================================= */
.video-head{
line-height:1.0 !important;
letter-spacing:-.02em !important;
}
.video-head br{line-height:1.0}
/* =========================================================
LIVE-STRUKTUR-SEKTIONEN (Referenzen · Checkliste · FAQ · Longform · Kontakt)
→ 100% konsistent mit bestehendem pa-*-Design-System
========================================================= */
/* --- REFERENZEN-GRID --- */
.pa-refs{background:#0B0D10;text-align:center}
.pa-refs-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
margin-top:60px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
text-align:left;
}
.pa-ref{
background:#0B0D10;
text-decoration:none;
color:inherit;
display:flex;
flex-direction:column;
transition:background .35s var(--ease), transform .35s cubic-bezier(.2,.7,.2,1);
}
.pa-ref:hover{background:#13181D;transform:translateY(-3px)}
.pa-ref-img{
position:relative;
aspect-ratio:5/3;
overflow:hidden;
background:#0F1216;
}
.pa-ref-img img{
width:100%;height:100%;
object-fit:cover;
filter:saturate(.88);
transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .5s;
}
.pa-ref:hover .pa-ref-img img{transform:scale(1.04);filter:saturate(1.02)}
.pa-ref-body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:6px}
.pa-ref-meta{
font-family:'Roboto Condensed';
font-weight:700;
font-size:11px;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--accent);
margin:0;
}
.pa-ref-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:16.5px;
text-transform:uppercase;
color:#fff;
letter-spacing:.005em;
line-height:1.25;
margin:6px 0 4px;
max-width:26ch;
}
.pa-ref-loc{
font-family:'Roboto';
font-size:13.5px;
color:rgba(255,255,255,.55);
margin:0;
}
@media(max-width:900px){.pa-refs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:580px){.pa-refs-grid{grid-template-columns:1fr}}
/* --- CHECKLISTE-CTA (schmaler Banner) --- */
.pa-checklist{background:#06080A;padding:clamp(50px,7vh,90px) 0}
.pa-checklist-box{
max-width:980px;
margin:0 auto;
padding:32px 40px;
border:1px solid rgba(118,184,42,.4);
background:rgba(118,184,42,.05);
border-radius:12px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:32px;
align-items:center;
}
.pa-checklist-icon{width:52px;height:52px;color:var(--accent);flex-shrink:0}
.pa-checklist-icon svg{width:100%;height:100%;display:block}
.pa-checklist-text h3{
margin:0 0 8px;
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(17px,1.6vw,22px);
text-transform:uppercase;
color:#fff;
letter-spacing:.005em;
line-height:1.15;
}
.pa-checklist-text p{
margin:0;
font-family:'Roboto';
font-size:14.5px;
line-height:1.55;
color:rgba(255,255,255,.7);
}
@media(max-width:780px){
.pa-checklist-box{grid-template-columns:1fr;text-align:center;padding:26px 22px}
.pa-checklist-icon{margin:0 auto}
}
/* --- FAQ-ACCORDION --- */
.pa-faq{background:#0B0D10;text-align:center}
.pa-faq-list{
max-width:820px;
margin:60px auto 0;
text-align:left;
display:flex;
flex-direction:column;
gap:1px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
}
.pa-faq-item{background:#0B0D10;transition:background .3s var(--ease)}
.pa-faq-item[open]{background:#13181D}
.pa-faq-q{
cursor:pointer;
list-style:none;
padding:22px 26px;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
font-family:'Roboto Condensed';
font-weight:700;
font-size:15.5px;
color:#fff;
letter-spacing:.005em;
line-height:1.35;
transition:color .25s;
}
.pa-faq-q::-webkit-details-marker{display:none}
.pa-faq-item:hover .pa-faq-q{color:var(--accent)}
.pa-faq-toggle{
flex-shrink:0;
width:24px;height:24px;
display:grid;place-items:center;
color:var(--accent);
font-family:'Roboto Condensed';
font-weight:300;
font-size:24px;
line-height:1;
transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.pa-faq-item[open] .pa-faq-toggle{transform:rotate(45deg)}
.pa-faq-a{
padding:0 26px 24px;
font-family:'Roboto';
font-size:14.5px;
line-height:1.65;
color:rgba(255,255,255,.72);
}
.pa-faq-a p{margin:0 0 12px}
.pa-faq-a p:last-child{margin-bottom:0}
.pa-faq-a strong{color:#fff;font-weight:500}
/* --- LONGFORM-VERGLEICH --- */
.pa-longform{background:#06080A}
.pa-longform-wrap{max-width:820px;margin:0 auto}
.pa-longform-intro{
max-width:56ch;
margin:24px auto 44px;
text-align:center;
font-family:'Roboto';
font-size:clamp(16px,1.35vw,18px);
line-height:1.65;
color:rgba(255,255,255,.68);
}
.pa-longform-body{color:rgba(255,255,255,.78)}
.pa-longform-body h2,
.pa-longform-body h3{
font-family:'Roboto Condensed';
font-weight:800;
text-transform:uppercase;
color:#fff;
letter-spacing:-.005em;
line-height:1.15;
margin:44px 0 16px;
}
.pa-longform-body h2{font-size:clamp(22px,2.4vw,30px)}
.pa-longform-body h3{font-size:clamp(18px,1.9vw,22px)}
.pa-longform-body h3::before{
content:"";
display:block;
width:38px;height:2px;
background:var(--accent);
margin:0 0 14px;
}
.pa-longform-body p{
margin:0 0 18px;
font-family:'Roboto';
font-size:16px;
line-height:1.7;
color:rgba(255,255,255,.78);
}
.pa-longform-body p strong{color:#fff;font-weight:500}
.pa-longform-body ul,
.pa-longform-body ol{padding-left:22px;margin:0 0 22px}
.pa-longform-body li{
margin:0 0 8px;
font-family:'Roboto';
font-size:16px;
line-height:1.65;
color:rgba(255,255,255,.75);
}
.pa-longform-body a{color:var(--accent);text-decoration:none}
.pa-longform-body a:hover{text-decoration:underline}
/* --- CONTACT-PERSON --- */
.pa-kp{background:#0B0D10}
.pa-kp-box{
max-width:900px;
margin:0 auto;
padding:44px 40px;
background:#06080A;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
display:grid;
grid-template-columns:auto 1fr;
gap:36px;
align-items:center;
}
.pa-kp-photo{
width:140px;height:140px;
border-radius:50%;
overflow:hidden;
border:2px solid rgba(118,184,42,.4);
background:#0F1216;
flex-shrink:0;
}
.pa-kp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pa-kp-info{display:flex;flex-direction:column;gap:8px}
.pa-kp-info .pa-eye{color:var(--accent);margin:0 0 6px;text-align:left}
.pa-kp-name{
font-family:'Roboto Condensed';
font-weight:800;
font-size:clamp(22px,2.4vw,30px);
text-transform:uppercase;
color:#fff;
margin:0;
letter-spacing:-.005em;
line-height:1.1;
}
.pa-kp-role{
font-family:'Roboto Condensed';
font-weight:600;
font-size:13px;
letter-spacing:.14em;
text-transform:uppercase;
color:rgba(255,255,255,.6);
margin:0;
}
.pa-kp-note{
font-family:'Roboto';
font-size:14.5px;
line-height:1.55;
color:rgba(255,255,255,.7);
margin:10px 0 4px;
max-width:46ch;
}
.pa-kp-actions{
display:flex;
gap:12px;
margin-top:14px;
flex-wrap:wrap;
}
.pa-kp-actions .pa-pill{padding:12px 22px;font-size:13px}
@media(max-width:680px){
.pa-kp-box{grid-template-columns:1fr;padding:34px 26px;text-align:center;gap:20px}
.pa-kp-photo{margin:0 auto}
.pa-kp-info{align-items:center}
.pa-kp-info .pa-eye{text-align:center}
.pa-kp-note{margin-left:auto;margin-right:auto}
.pa-kp-actions{justify-content:center}
}
/* =========================================================
LIFT-HIGHLIGHT (3 Vertrauens-Signale, Live-Struktur)
========================================================= */
.pa-lift-hl{
background:linear-gradient(180deg, #0B0D10 0%, #06080A 100%);
text-align:center;
}
.pa-lift-hl-lede{
max-width:56ch;
margin:24px auto 60px;
text-align:center;
font-family:'Roboto';
font-size:clamp(16px,1.3vw,18px);
line-height:1.65;
color:rgba(255,255,255,.7);
}
.pa-lift-hl-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
text-align:center;
}
.pa-lift-hl-item{
background:#0B0D10;
padding:48px 32px 42px;
display:flex;
flex-direction:column;
align-items:center;
gap:18px;
transition:background .3s var(--ease);
}
.pa-lift-hl-item:hover{background:#13181D}
.pa-lift-hl-icon{
width:54px;height:54px;
color:var(--accent);
margin-bottom:6px;
}
.pa-lift-hl-icon svg{width:100%;height:100%;display:block}
.pa-lift-hl-title{
font-family:'Roboto Condensed';
font-weight:800;
font-size:19px;
line-height:1.2;
color:#fff;
text-transform:uppercase;
letter-spacing:.005em;
margin:0;
max-width:20ch;
}
.pa-lift-hl-text{
margin:0;
font-family:'Roboto';
font-size:15px;
line-height:1.6;
color:rgba(255,255,255,.65);
max-width:30ch;
}
@media(max-width:880px){
.pa-lift-hl-grid{grid-template-columns:1fr}
}
/* ===== Applications v3 (Video einmal + Marker + Accordion-Chapter) ===== */
.ab-sec{background:#0B0D10;color:#fff;padding:120px 0 140px;border-top:1px solid var(--line, rgba(255,255,255,.08));position:relative}
.ab-wrap{max-width:1440px;margin:0 auto;padding:0 40px}
.ab-head{max-width:900px;margin-bottom:40px}
.ab-head .eyebrow{font:800 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#76B82A;margin:0 0 20px}
.ab-head .display{font:800 clamp(48px,7vw,110px)/.92 'Roboto Condensed',sans-serif;letter-spacing:-.01em;text-transform:uppercase;margin:0;color:#fff}
/* Stage — Video-Bühne */
.ab-stage{position:relative;grid-column:1;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#0B0D10;isolation:isolate}
.ab-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.85) saturate(1.05)}
.ab-stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(120% 90% at 50% 50%,transparent 65%,rgba(0,0,0,.35) 100%)}
/* Marker — anfangs unsichtbar, fadet ein wenn Stage die Klasse .video-done bekommt */
.ab-marker{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border:0;background:transparent;padding:0;cursor:pointer;z-index:5;
opacity:0;pointer-events:none;transition:opacity .5s ease}
.ab-stage.video-done .ab-marker{opacity:1;pointer-events:auto}
.ab-marker .ab-dot{position:absolute;inset:0;border-radius:50%;background:#76B82A;
box-shadow:0 0 0 3px rgba(11,13,16,.7),0 0 20px rgba(118,184,42,.9);opacity:.85;transition:all .35s ease}
.ab-marker .ab-pulse{position:absolute;inset:-8px;border-radius:50%;border:2px solid #76B82A;opacity:0;transform:scale(.6)}
.ab-marker:hover .ab-dot{opacity:1;transform:scale(1.15)}
.ab-marker.is-active{z-index:6}
.ab-marker.is-active .ab-dot{opacity:1;box-shadow:0 0 0 3px rgba(11,13,16,.7),0 0 30px rgba(118,184,42,1),0 0 80px rgba(118,184,42,.6)}
.ab-marker.is-active .ab-pulse{animation:abPulse 1.8s ease-out infinite}
@keyframes abPulse{
0%{transform:scale(.6);opacity:.9}
70%{transform:scale(2.6);opacity:0}
100%{transform:scale(2.6);opacity:0}
}
/* Chapter-Liste rechts (Accordion) */
.ab-label{font:800 15px/1.2 'Roboto Condensed',sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* Panel: expandierendes Detail unter dem Item */
/* Mobile */
@media (max-width:960px){
.ab-sec{padding:80px 0 100px}
.ab-wrap{grid-template-columns:1fr;gap:20px;padding:0 20px}
.ab-stage{grid-column:1;aspect-ratio:16/9}
.ab-head .display{font-size:clamp(40px,10vw,64px)}
}
/* ===== Anwendungsseiten — Final (Dedrone-Style, 1:1 aus Prototyp) ===== */
/* Section-Basis */
.pa-anwendung .pa-section{padding:120px 0;position:relative}
/* Hero-Text-Overrides (etwas markanter als Base pa-mega) */
.pa-anwendung .pa-hero{min-height:100vh}
.pa-anwendung .pa-hero .pa-mega{font-family:'Roboto Condensed',sans-serif!important;font-weight:800!important;font-size:clamp(56px,8.5vw,130px)!important;line-height:.88!important;letter-spacing:-.02em!important;text-transform:uppercase!important;max-width:14ch;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.pa-anwendung .pa-hero .pa-tagline{font-size:clamp(18px,1.7vw,26px);line-height:1.45;color:rgba(255,255,255,.9);max-width:640px;margin:28px 0 0;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.pa-anwendung .pa-hero .pa-eye{color:#76B82A;text-shadow:0 0 20px rgba(118,184,42,.6)}
/* Trust-Strip */
.pa-anwendung .pa-ts{padding:56px 0;background:#0B0D10;border-bottom:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-ts-eye{text-align:center;color:rgba(255,255,255,.35);letter-spacing:.28em;margin-bottom:32px}
.pa-anwendung .pa-ts-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0;max-width:1180px;margin:0 auto}
.pa-anwendung .pa-ts-item{flex:1 1 0;min-width:120px;display:flex;align-items:center;justify-content:center;padding:0 24px;position:relative;min-height:48px}
.pa-anwendung .pa-ts-item + .pa-ts-item::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:rgba(255,255,255,.08)}
.pa-anwendung .pa-ts-item img{max-height:36px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.55;transition:opacity .35s ease}
.pa-anwendung .pa-ts-item:hover img{opacity:.9}
.pa-anwendung .pa-ts-name{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:16px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:color .35s ease;white-space:nowrap}
.pa-anwendung .pa-ts-item:hover .pa-ts-name{color:#fff}
/* Consultation-Bar */
.pa-anwendung .pa-consult{padding:32px 0;background:linear-gradient(180deg,#0B0D10 0%,#0F1216 100%);border-top:1px solid rgba(118,184,42,.35);position:relative}
.pa-anwendung .pa-consult::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,#76B82A 50%,transparent 100%)}
.pa-anwendung .pa-consult-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.pa-anwendung .pa-consult-text{font-size:16px;color:rgba(255,255,255,.9);margin:0;flex:1;min-width:280px}
.pa-anwendung .pa-consult-text strong{color:#76B82A;font-weight:600}
/* Hero-Testimonial */
.pa-anwendung .pa-htesti{padding:120px 0;background:#0F1216;position:relative;overflow:hidden}
.pa-anwendung .pa-htesti::before{content:"„";position:absolute;top:20px;left:6%;font-family:'Roboto Condensed',serif;font-weight:800;font-size:300px;line-height:.8;color:rgba(118,184,42,.06);pointer-events:none}
.pa-anwendung .pa-htesti-inner{position:relative;z-index:2;display:grid;grid-template-columns:220px 1fr;gap:60px;align-items:center}
.pa-anwendung .pa-htesti-photo{width:220px;height:220px;border-radius:50%;overflow:hidden;background:#13181D;border:3px solid rgba(118,184,42,.35);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.pa-anwendung .pa-htesti-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pa-anwendung .pa-htesti-quote{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:clamp(22px,2.8vw,38px);line-height:1.3;color:#fff;margin:0 0 24px;quotes:none;max-width:820px}
.pa-anwendung .pa-htesti-foot{display:flex;flex-direction:column;gap:4px}
.pa-anwendung .pa-htesti-author{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.pa-anwendung .pa-htesti-role{font-size:14px;color:#76B82A}
/* Problem-Statement + Challenges */
.pa-anwendung .pa-challenges{padding:140px 0;background:#0B0D10}
.pa-anwendung .pa-challenges-intro{text-align:center;max-width:820px;margin:0 auto 80px}
.pa-anwendung .pa-challenges-intro p{margin:0}
.pa-anwendung .pa-challenges-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pa-anwendung .pa-challenge-card{background:#13181D;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 30px;transition:all .35s ease}
.pa-anwendung .pa-challenge-card:hover{transform:translateY(-6px);border-color:rgba(118,184,42,.45);box-shadow:0 30px 80px rgba(118,184,42,.08)}
.pa-anwendung .pa-challenge-icon{width:44px;height:44px;color:#76B82A;margin-bottom:24px;padding:10px;background:rgba(118,184,42,.08);border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
.pa-anwendung .pa-challenge-icon svg{width:100%;height:100%}
.pa-anwendung .pa-challenge-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:20px;line-height:1.15;letter-spacing:-.005em;text-transform:uppercase;margin:0 0 14px;color:#fff}
.pa-anwendung .pa-challenge-text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.72);margin:0}
/* Steps 1-6 */
.pa-anwendung .pa-steps{padding:160px 0;background:linear-gradient(180deg,#0B0D10 0%,#0F1216 50%,#0B0D10 100%);position:relative;overflow:hidden}
.pa-anwendung .pa-steps-head{text-align:center;max-width:820px;margin:0 auto 100px}
.pa-anwendung .pa-steps-list{display:grid;grid-template-columns:1fr;gap:60px;position:relative}
.pa-anwendung .pa-steps-list::before{content:"";position:absolute;left:60px;top:60px;bottom:60px;width:2px;background:linear-gradient(180deg,#76B82A 0%,transparent 100%);opacity:.3}
.pa-anwendung .pa-step{display:grid;grid-template-columns:120px 1fr;gap:40px;align-items:center;position:relative;padding:20px 0}
.pa-anwendung .pa-step-num{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:80px;line-height:.85;color:#76B82A;position:relative;z-index:2}
.pa-anwendung .pa-step-num::after{content:"";position:absolute;left:-10px;top:-10px;right:10px;bottom:-10px;background:radial-gradient(circle,rgba(118,184,42,.15) 0%,transparent 70%);z-index:-1}
.pa-anwendung .pa-step-body{padding-right:60px}
.pa-anwendung .pa-step-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 16px;color:#fff}
.pa-anwendung .pa-step-text{font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);margin:0;max-width:640px}
/* Cost-Split */
.pa-anwendung .pa-cost{padding:140px 0;background:#0F1216;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.pa-anwendung .pa-cost-num{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(72px,10vw,140px);line-height:.85;letter-spacing:-.03em;color:#76B82A;margin:32px 0 12px}
.pa-anwendung .pa-cost-numlabel{font-size:14px;line-height:1.5;color:rgba(255,255,255,.55);max-width:420px;margin:0}
.pa-anwendung .pa-cost-lede{font-size:17px;line-height:1.55;color:rgba(255,255,255,.72);margin:16px 0 0;max-width:520px}
.pa-anwendung .pa-cost-right .pa-eye{margin-bottom:24px;color:rgba(255,255,255,.55)}
.pa-anwendung .pa-cost-list{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.pa-anwendung .pa-cost-list li{padding:14px 0 14px 22px;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px;line-height:1.4;color:rgba(255,255,255,.72);position:relative}
.pa-anwendung .pa-cost-list li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:8px;background:#76B82A;transform:rotate(45deg)}
/* Refs-Grid */
.pa-anwendung .pa-refs{padding:140px 0;background:#0B0D10}
.pa-anwendung .pa-refs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.pa-anwendung .pa-ref{position:relative;display:block;border-radius:16px;overflow:hidden;background:#13181D;aspect-ratio:4/5;text-decoration:none;color:#fff;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pa-anwendung .pa-ref:hover{transform:translateY(-6px)}
.pa-anwendung .pa-ref img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:brightness(.85)}
.pa-anwendung .pa-ref:hover img{transform:scale(1.06);filter:brightness(1)}
.pa-anwendung .pa-ref-meta{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.9) 100%);z-index:2}
.pa-anwendung .pa-ref-stat{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:18px;line-height:1;color:#76B82A;margin-bottom:6px}
.pa-anwendung .pa-ref-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:14px;line-height:1.2;letter-spacing:-.005em;text-transform:uppercase;color:#fff}
/* Big-Stats */
.pa-anwendung .pa-stats-big{padding:140px 0;background:#0F1216;position:relative;overflow:hidden}
.pa-anwendung .pa-stats-big::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 60% at 50% 50%,rgba(118,184,42,.06) 0%,transparent 60%);pointer-events:none}
.pa-anwendung .pa-stats-big .pa-wrap{position:relative;z-index:1}
.pa-anwendung .pa-stats-big > .pa-wrap > .pa-eye,
.pa-anwendung .pa-stats-big > .pa-wrap > .pa-mega-mid{text-align:center}
.pa-anwendung .pa-stats-big .pa-mega-mid{margin-bottom:80px}
.pa-anwendung .pa-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:50px}
.pa-anwendung .pa-stat{text-align:center}
.pa-anwendung .pa-stat-value{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(64px,9vw,130px);line-height:.85;letter-spacing:-.03em;color:#76B82A;display:inline-flex;align-items:baseline;justify-content:center;margin-bottom:16px}
.pa-anwendung .pa-stat-unit{font-size:.4em;margin-left:4px;font-weight:800}
.pa-anwendung .pa-stat-label{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:13px;line-height:1.3;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.9);max-width:220px;margin:0 auto;padding-top:16px;position:relative}
.pa-anwendung .pa-stat-label::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:2px;background:#76B82A}
.pa-anwendung .pa-stat-sub{font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);margin-top:14px;max-width:220px;margin-left:auto;margin-right:auto}
/* Cinema-Break (full-bleed) */
.pa-anwendung .pa-cinema{position:relative;overflow:hidden;min-height:70vh;display:flex;align-items:center;justify-content:center;background:#000;padding:0}
.pa-anwendung .pa-cinema-bg{position:absolute;inset:0;z-index:0}
.pa-anwendung .pa-cinema-bg video,.pa-anwendung .pa-cinema-bg img{width:100%;height:100%;object-fit:cover}
.pa-anwendung .pa-cinema-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 50%,transparent 30%,rgba(0,0,0,.75) 100%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.6) 100%)}
.pa-anwendung .pa-cinema-inner{position:relative;z-index:2;text-align:center;padding:120px 32px;max-width:1000px}
.pa-anwendung .pa-cinema-eye{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#76B82A;margin:0 0 28px}
.pa-anwendung .pa-cinema-h{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(48px,7vw,110px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;color:#fff;margin:0 0 24px;text-shadow:0 4px 30px rgba(0,0,0,.7)}
.pa-anwendung .pa-cinema-t{font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:rgba(255,255,255,.9);max-width:720px;margin:0 auto}
/* Story-Block (Produkte) */
.pa-anwendung .pa-solution{padding:120px 0 40px;background:#0B0D10}
.pa-anwendung .pa-solution > .pa-wrap:first-child{text-align:center}
.pa-anwendung .pa-solution > .pa-wrap:first-child > .pa-mega-mid{margin:24px 0}
.pa-anwendung .pa-story{padding:80px 0;background:#0B0D10}
.pa-anwendung .pa-story:nth-of-type(even){background:#0F1216}
.pa-anwendung .pa-story > .pa-wrap{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.pa-anwendung .pa-story--right > .pa-wrap{grid-template-columns:1fr 1fr}
.pa-anwendung .pa-story--right .pa-story-media{order:2}
.pa-anwendung .pa-story--right .pa-story-grid{order:1}
.pa-anwendung .pa-story-media{border-radius:24px;overflow:hidden;aspect-ratio:5/6;background:#13181D;box-shadow:0 40px 100px rgba(0,0,0,.4);position:relative}
.pa-anwendung .pa-story-media img,.pa-anwendung .pa-story-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pa-anwendung .pa-story:hover .pa-story-media img,.pa-anwendung .pa-story:hover .pa-story-media video{transform:scale(1.03)}
.pa-anwendung .pa-story-text .pa-eye{color:#76B82A;margin-bottom:20px}
.pa-anwendung .pa-story-text .pa-mega-mid{font-family:'Roboto Condensed',sans-serif!important;font-weight:800!important;font-size:clamp(32px,4vw,54px)!important;line-height:.98!important;letter-spacing:-.01em!important;text-transform:uppercase!important;margin:0 0 24px!important}
.pa-anwendung .pa-story-body{font-size:17px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 28px;max-width:520px}
.pa-anwendung .pa-checks{list-style:none;padding:0;margin:0 0 32px}
.pa-anwendung .pa-checks li{position:relative;padding:12px 0 12px 32px;font-size:15px;line-height:1.4;color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-checks li::before{content:"";position:absolute;left:0;top:18px;width:14px;height:8px;border-left:2px solid #76B82A;border-bottom:2px solid #76B82A;transform:rotate(-45deg)}
/* Testimonial-Grid */
.pa-anwendung .pa-testimonials{padding:140px 0;background:#0B0D10}
.pa-anwendung .pa-testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:60px}
.pa-anwendung .pa-testi{background:#13181D;border:1px solid rgba(255,255,255,.08);border-left:3px solid #76B82A;border-radius:16px;padding:32px 28px;margin:0}
.pa-anwendung .pa-testi-quote{font-size:15px;line-height:1.55;color:rgba(255,255,255,.9);margin:0 0 20px;quotes:none}
.pa-anwendung .pa-testi-foot{display:flex;flex-direction:column;gap:2px}
.pa-anwendung .pa-testi-author{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.pa-anwendung .pa-testi-role{font-size:12px;color:rgba(255,255,255,.55)}
/* Trust-Badges */
.pa-anwendung .pa-trust{padding:140px 0;background:#0F1216;border-top:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-trust-lede{color:rgba(255,255,255,.72);text-align:center;max-width:640px;margin:0 auto 48px}
.pa-anwendung .pa-trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.pa-anwendung .pa-trust-badge{background:#13181D;border:1px solid rgba(118,184,42,.25);border-radius:12px;padding:24px;text-align:center;transition:all .35s ease}
.pa-anwendung .pa-trust-badge:hover{border-color:rgba(118,184,42,.6);transform:translateY(-2px)}
.pa-anwendung .pa-trust-code{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:16px;line-height:1.1;color:#76B82A;margin-bottom:6px}
.pa-anwendung .pa-trust-label{font-size:12px;line-height:1.4;color:rgba(255,255,255,.72)}
/* Longform */
.pa-anwendung .pa-longform{padding:140px 0;background:#0B0D10}
.pa-anwendung .pa-longform-content{font-size:17px;line-height:1.7;color:rgba(255,255,255,.9)}
.pa-anwendung .pa-longform-content h3{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:26px;line-height:1.2;letter-spacing:-.005em;text-transform:uppercase;color:#fff;margin:56px 0 20px;padding-top:24px;border-top:1px solid rgba(118,184,42,.35)}
.pa-anwendung .pa-longform-content p{margin:0 0 20px}
/* Articles */
.pa-anwendung .pa-articles{padding:140px 0;background:#0F1216;border-top:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-articles-head{text-align:center;max-width:820px;margin:0 auto 60px}
.pa-anwendung .pa-articles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.pa-anwendung .pa-art{display:block;background:#13181D;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .35s ease}
.pa-anwendung .pa-art:hover{transform:translateY(-4px)}
.pa-anwendung .pa-art-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#1a2a1a 0%,#0a1a0a 100%);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font-size:11px;letter-spacing:.2em;text-transform:uppercase;overflow:hidden}
.pa-anwendung .pa-art-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pa-anwendung .pa-art-body{padding:22px}
.pa-anwendung .pa-art-cat{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#76B82A;margin-bottom:10px}
.pa-anwendung .pa-art-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:17px;line-height:1.25;letter-spacing:-.005em;text-transform:uppercase;color:#fff;margin:0}
/* FAQ */
.pa-anwendung .pa-faq{padding:140px 0;background:#0B0D10}
.pa-anwendung .pa-faq-list{max-width:820px;margin:0 auto}
.pa-anwendung details.pa-faq-item{border-bottom:1px solid rgba(255,255,255,.08);padding:0}
.pa-anwendung .pa-faq-q{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:18px;line-height:1.35;letter-spacing:-.005em;text-transform:uppercase;color:#fff;padding:24px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px}
.pa-anwendung .pa-faq-q::-webkit-details-marker{display:none}
.pa-anwendung .pa-faq-toggle{font-family:'Roboto Condensed',sans-serif;font-weight:400;font-size:24px;line-height:1;color:#76B82A;transition:transform .35s ease}
.pa-anwendung details[open] .pa-faq-toggle{transform:rotate(45deg)}
.pa-anwendung .pa-faq-a{padding:0 0 28px;font-size:16px;line-height:1.65;color:rgba(255,255,255,.72)}
/* Kontakt-Person */
.pa-anwendung .pa-kp{padding:120px 0;background:#0F1216}
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget{display:grid;grid-template-columns:220px 1fr;gap:56px;align-items:center;max-width:1000px;margin:0 auto;padding:56px;background:#13181D;border:1px solid rgba(255,255,255,.08);border-radius:28px;box-shadow:0 40px 80px rgba(0,0,0,.4)}
.pa-anwendung .pa-kp-photo,
.pa-product .pa-kp-photo{width:220px;height:220px;border-radius:50%;overflow:hidden;background:#0F1216;border:3px solid rgba(118,184,42,.35);display:flex;align-items:center;justify-content:center}
.pa-anwendung .pa-kp-photo img,
.pa-product .pa-kp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pa-anwendung .pa-kp-name,
.pa-product .pa-kp-name{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:32px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:8px 0 6px}
.pa-anwendung .pa-kp-role,
.pa-product .pa-kp-role{color:#76B82A;font-size:16px;margin:0 0 20px}
.pa-anwendung .pa-kp-note,
.pa-product .pa-kp-note{color:rgba(255,255,255,.72);font-size:15px;line-height:1.55;margin:0 0 28px;max-width:520px}
.pa-anwendung .pa-kp-actions,
.pa-product .pa-kp-actions{display:flex;gap:12px;flex-wrap:wrap}
/* CTA-Band */
.pa-anwendung .pa-cta{padding:160px 0;background:radial-gradient(120% 80% at 50% 100%,rgba(118,184,42,.16) 0%,transparent 60%),linear-gradient(180deg,#0F1216 0%,#0B0D10 100%);text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-cta .pa-mega-mid{font-family:'Roboto Condensed',sans-serif!important;font-weight:800!important;font-size:clamp(48px,6vw,96px)!important;line-height:.95!important;letter-spacing:-.01em!important;text-transform:uppercase!important;margin:0 auto 24px!important;max-width:900px}
.pa-anwendung .pa-cta-lede{color:rgba(255,255,255,.72);font-size:18px;line-height:1.55;max-width:640px;margin:0 auto 40px}
.pa-anwendung .pa-cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
/* Reveals */
.pa-anwendung .pa-anim-up{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.pa-anwendung .pa-anim-up.pa-in{opacity:1;transform:translateY(0)}
/* Mobile */
@media (max-width:960px){
.pa-anwendung .pa-section{padding:80px 0}
.pa-anwendung .pa-hero{min-height:80vh}
.pa-anwendung .pa-htesti-inner{grid-template-columns:1fr;text-align:center;gap:32px}
.pa-anwendung .pa-htesti-photo{margin:0 auto}
.pa-anwendung .pa-steps-list::before{left:30px}
.pa-anwendung .pa-step{grid-template-columns:60px 1fr;gap:20px}
.pa-anwendung .pa-step-num{font-size:42px}
.pa-anwendung .pa-step-body{padding-right:0}
.pa-anwendung .pa-cost-grid,.pa-anwendung .pa-story > .pa-wrap{grid-template-columns:1fr;gap:40px}
.pa-anwendung .pa-cost-list{grid-template-columns:1fr}
.pa-anwendung .pa-cinema{min-height:60vh}
.pa-anwendung .pa-cinema-inner{padding:80px 24px}
.pa-anwendung .pa-story--right .pa-story-media{order:1}
.pa-anwendung .pa-story--right .pa-story-grid{order:2}
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget{grid-template-columns:1fr;padding:40px 28px;text-align:center;gap:32px}
.pa-anwendung .pa-kp-photo,
.pa-product .pa-kp-photo{margin:0 auto}
.pa-anwendung .pa-kp-actions,
.pa-product .pa-kp-actions{justify-content:center}
.pa-anwendung .pa-consult-inner{flex-direction:column;text-align:center;gap:20px}
}
/* ===== HighStep Footer (Dedrone-Style) ===== */
.hs-footer{background:#0B0D10;position:relative;overflow:hidden;padding:100px 0 40px;border-top:1px solid rgba(255,255,255,.08);color:#fff;font-family:-apple-system,'SF Pro Text','Inter',sans-serif}
.hs-footer::before{content:"";position:absolute;bottom:-100px;right:-100px;width:500px;height:400px;background:radial-gradient(ellipse at bottom right,rgba(118,184,42,.08) 0%,transparent 60%);pointer-events:none;z-index:0}
.hs-foot-wrap{max-width:1180px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
.hs-footer a{transition:color .3s ease;text-decoration:none;color:inherit}
/* TOP: CTA + Socials */
.hs-foot-top{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:flex-start;padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:56px}
.hs-foot-cta-block{max-width:540px}
.hs-foot-cta-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1.25;letter-spacing:-.01em;color:#fff;margin:0 0 28px}
.hs-foot-cta-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;background:#76B82A;color:#0B0D10!important;font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;transition:all .3s ease}
.hs-foot-cta-btn:hover{background:#8bd435;gap:16px;color:#0B0D10!important}
.hs-foot-socials{display:flex;gap:14px;align-items:center}
.hs-foot-social{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;opacity:.65;transition:all .3s ease}
.hs-foot-social:hover{opacity:1;color:#76B82A}
.hs-foot-social svg{width:22px;height:22px}
/* 4 SPALTEN */
.hs-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;padding-bottom:56px}
.hs-foot-col-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:14px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 20px;padding-bottom:14px;position:relative}
.hs-foot-col-title--brand{color:#76B82A}
.hs-foot-col-title::after{content:"";position:absolute;bottom:0;left:0;width:28px;height:2px;background:#76B82A}
.hs-foot-col-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.hs-foot-col-list li{list-style:none;padding:0;margin:0}
.hs-foot-col-list a{font-size:14px;line-height:1.4;color:rgba(255,255,255,.72);transition:color .3s ease;display:inline-block}
.hs-foot-col-list a:hover{color:#fff}
/* Kontakt-Spalte */
.hs-foot-contact-block{margin-bottom:20px}
.hs-foot-contact-block:last-child{margin-bottom:0}
.hs-foot-contact-country{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.02em;color:#fff;margin:0 0 4px}
.hs-foot-contact-detail{font-size:13px;line-height:1.5;color:rgba(255,255,255,.72);margin:0}
.hs-foot-contact-detail a{color:rgba(255,255,255,.72)}
.hs-foot-contact-detail a:hover{color:#76B82A}
/* AWARDS & ZERTIFIKATE (monochrome-weiß, Dedrone-Style) */
.hs-foot-awards{padding:40px 0;border-top:1px solid rgba(255,255,255,.08);display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.hs-foot-awards-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0;white-space:nowrap}
.hs-foot-awards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:24px;align-items:center;justify-items:center}
.hs-foot-award{display:flex;align-items:center;justify-content:center;height:56px;width:100%;text-decoration:none;transition:all .3s ease}
.hs-foot-award img{max-height:48px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.55;transition:opacity .35s ease}
.hs-foot-award:hover img{opacity:.9}
.hs-foot-award-txt{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:11px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:center;transition:color .3s ease}
.hs-foot-award:hover .hs-foot-award-txt{color:#fff}
/* HANDELSPARTNER */
.hs-foot-partners{padding:36px 0;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:32px;display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center}
.hs-foot-partners-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0;white-space:nowrap}
.hs-foot-partners-list{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hs-foot-partner-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:13px;color:rgba(255,255,255,.72);transition:all .3s ease}
.hs-foot-partner-chip:hover{border-color:rgba(118,184,42,.5);color:#fff;background:rgba(118,184,42,.06)}
.hs-foot-partners-more{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#76B82A;display:inline-flex;align-items:center;gap:6px;transition:gap .3s ease;white-space:nowrap}
.hs-foot-partners-more:hover{gap:10px;color:#8bd435}
/* BOTTOM: Logo + Legal */
.hs-foot-bottom{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
.hs-foot-logo{display:flex;align-items:center;gap:14px}
.hs-foot-logo-img{height:32px;width:auto;filter:brightness(0) invert(1);opacity:.9;transition:opacity .3s ease}
.hs-foot-logo:hover .hs-foot-logo-img{opacity:1}
.hs-foot-logo-tag{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);border-left:1px solid rgba(255,255,255,.08);padding-left:14px}
.hs-foot-legal-wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.hs-foot-legal-wrap a,.hs-foot-legal-wrap span{font-size:12px;color:rgba(255,255,255,.55)}
.hs-foot-legal-wrap a:hover{color:#fff}
/* Mobile */
@media (max-width:960px){
.hs-foot-awards{grid-template-columns:1fr;text-align:center;gap:20px}
.hs-foot-awards-grid{grid-template-columns:repeat(2,1fr);gap:20px}
.hs-footer{padding:60px 0 32px}
.hs-foot-top{grid-template-columns:1fr;padding-bottom:40px;margin-bottom:40px;gap:28px}
.hs-foot-cols{grid-template-columns:1fr 1fr;gap:32px;padding-bottom:40px}
.hs-foot-partners{grid-template-columns:1fr;text-align:center;gap:20px}
.hs-foot-partners-list{justify-content:center}
.hs-foot-bottom{grid-template-columns:1fr;gap:24px}
.hs-foot-legal-wrap{justify-content:flex-start;gap:12px}
}
@media (max-width:560px){
.hs-foot-cols{grid-template-columns:1fr;gap:28px}
}
/* Downloads-Section */
.pa-anwendung .pa-downloads{padding:140px 0;background:#0B0D10;border-top:1px solid rgba(255,255,255,.08)}
.pa-anwendung .pa-downloads-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:60px;max-width:1180px;margin-left:auto;margin-right:auto}
.pa-anwendung .pa-dl-card{display:block;background:#13181D;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:24px 24px 24px 60px;position:relative;transition:all .35s ease;text-decoration:none;color:#fff}
.pa-anwendung .pa-dl-card:hover{border-color:rgba(118,184,42,.45);transform:translateY(-2px)}
.pa-anwendung .pa-dl-card::before{content:"";position:absolute;left:24px;top:24px;width:24px;height:32px;background:no-repeat center/contain url("data:image/svg+xml;utf8,")}
.pa-anwendung .pa-dl-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:15px;line-height:1.25;letter-spacing:.02em;text-transform:uppercase;margin-bottom:4px}
.pa-anwendung .pa-dl-meta{font-size:12px;color:rgba(255,255,255,.55)}
/* Cinema-Break Full-Screen + breiterer Text-Container */
.pa-anwendung .pa-cinema{min-height:100vh}
.pa-anwendung .pa-cinema-inner{max-width:1400px;padding:80px 40px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.pa-anwendung .pa-cinema-h{max-width:1200px;margin-left:auto;margin-right:auto}
.pa-anwendung .pa-cinema-t{max-width:820px;margin-left:auto;margin-right:auto}
@media (max-width:960px){.pa-anwendung .pa-cinema{min-height:70vh}}
/* ===== Steps im Dedrone-Style (2-Column pro Step) ===== */
.pa-anwendung .pa-steps-d{padding:140px 0;background:#0B0D10}
.pa-anwendung .pa-steps-d .pa-steps-head{text-align:center;margin:0 auto 80px;max-width:900px}
.pa-anwendung .pa-steps-d .pa-steps-head .pa-mega-mid{margin:16px 0 0}
.pa-anwendung .pa-steps-d-list{display:flex;flex-direction:column;gap:80px}
.pa-anwendung .pa-step-d{display:grid;grid-template-columns:5fr 6fr;gap:80px;align-items:center}
.pa-anwendung .pa-step-d--right .pa-step-d-text{order:2}
.pa-anwendung .pa-step-d--right .pa-step-d-media{order:1}
.pa-anwendung .pa-step-d-headline{display:flex;align-items:baseline;gap:20px;margin:0 0 20px}
.pa-anwendung .pa-step-d-num{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(40px,4.5vw,64px);line-height:.9;color:#fff;padding-right:20px;border-right:2px solid #76B82A;position:relative;top:6px}
.pa-anwendung .pa-step-d-title{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,48px);line-height:1.05;letter-spacing:-.01em;color:#fff;margin:0;text-transform:none}
.pa-anwendung .pa-step-d-desc{font-size:17px;line-height:1.55;color:rgba(255,255,255,.72);margin:0 0 32px;max-width:560px}
.pa-anwendung .pa-step-d-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;background:#76B82A;color:#0B0D10;font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;border-radius:8px;text-decoration:none;transition:all .3s ease}
.pa-anwendung .pa-step-d-cta:hover{background:#8bd435;gap:14px}
.pa-anwendung .pa-step-d-cta span{transition:transform .3s ease}
.pa-anwendung .pa-step-d-cta:hover span{transform:translateX(4px)}
.pa-anwendung .pa-step-d-media{border-radius:20px;overflow:hidden;background:#13181D;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;position:relative}
.pa-anwendung .pa-step-d-media img{width:100%;height:100%;object-fit:cover;display:block}
.pa-anwendung .pa-step-d-media-ph{color:rgba(255,255,255,.35);font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
@media (max-width:960px){
.pa-anwendung .pa-steps-d{padding:80px 0}
.pa-anwendung .pa-steps-d-list{gap:60px}
.pa-anwendung .pa-step-d{grid-template-columns:1fr;gap:24px}
.pa-anwendung .pa-step-d--right .pa-step-d-text{order:2}
.pa-anwendung .pa-step-d--right .pa-step-d-media{order:1}
}
/* === Story-Section 50/50 (matched /produkt/highstep-schiene/) === */
.pa-anwendung .pa-story{padding:100px 0}
.pa-anwendung .pa-story > .pa-wrap{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:80px !important;
max-width:1360px !important;
padding:0 40px !important;
align-items:center !important;
}
.pa-anwendung .pa-story--right > .pa-wrap{grid-template-columns:1fr 1fr !important}
.pa-anwendung .pa-story--right .pa-story-media{order:2}
.pa-anwendung .pa-story--right .pa-story-grid,
.pa-anwendung .pa-story--right .pa-story-text{order:1}
.pa-anwendung .pa-story-media{aspect-ratio:1/1 !important;border-radius:20px !important;overflow:hidden;background:#13181D;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pa-anwendung .pa-story-media img,.pa-anwendung .pa-story-media video{width:100%;height:100%;object-fit:cover;display:block}
.pa-anwendung .pa-story-text{max-width:none;width:100%}
.pa-anwendung .pa-story-text .pa-eye{color:#76B82A;font-size:12px;letter-spacing:.2em;margin-bottom:16px}
.pa-anwendung .pa-story-text .pa-mega-mid{font-family:'Roboto Condensed',sans-serif !important;font-weight:800 !important;font-size:clamp(36px,4vw,60px) !important;line-height:1.02 !important;letter-spacing:-.01em !important;text-transform:uppercase !important;margin:0 0 24px !important;max-width:none !important}
.pa-anwendung .pa-story-body{font-size:17px !important;line-height:1.6 !important;color:rgba(255,255,255,.72) !important;margin:0 0 28px !important;max-width:none !important}
.pa-anwendung .pa-checks{margin:0 0 28px !important}
.pa-anwendung .pa-checks li{padding:11px 0 11px 30px !important;font-size:15px !important;line-height:1.4}
.pa-anwendung .pa-checks li::before{top:18px !important;width:14px !important;height:8px !important}
@media (max-width:960px){
.pa-anwendung .pa-story > .pa-wrap{grid-template-columns:1fr !important;gap:32px !important}
.pa-anwendung .pa-story--right .pa-story-media{order:1}
.pa-anwendung .pa-story--right .pa-story-text{order:2}
}
/* FIX: pa-story-grid ist ein nested Grid und quetscht den Text auf ~66% seiner Column.
Reset auf block/width:100% damit die Text-Column ihre volle 50% Breite nutzt. */
.pa-anwendung .pa-story .pa-story-grid{
display:block !important;
width:100% !important;
max-width:none !important;
grid-template-columns:none !important;
gap:0 !important;
padding:0 !important;
}
.pa-anwendung .pa-story .pa-story-text{
display:block !important;
width:100% !important;
max-width:none !important;
}
.pa-anwendung .pa-story .pa-story-body{max-width:none !important;width:100% !important}
/* Check-Icons: cleaner SVG-Check statt CSS-rotated-square (der als "Ø" gerendert wurde) */
.pa-anwendung .pa-checks li{
padding:11px 0 11px 32px !important;
position:relative;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.pa-anwendung .pa-checks li::before{
content:"" !important;
position:absolute !important;
left:0 !important;
top:14px !important;
width:18px !important;
height:18px !important;
background:no-repeat center/contain url("data:image/svg+xml;utf8,") !important;
border:0 !important;
transform:none !important;
}
/* Doppel-Häkchen Fix: alte border-basierte ::after + list-style entfernen */
.pa-anwendung .pa-checks{list-style:none !important;padding:0 !important;margin:0 0 28px !important}
.pa-anwendung .pa-checks li{list-style:none !important}
.pa-anwendung .pa-checks li::marker{content:"" !important;display:none !important}
.pa-anwendung .pa-checks li::after{content:none !important;display:none !important}
/* ===== EINHEITLICHER CONTAINER — alle Anwendungs-Sections auf 1360/40 ===== */
.pa-anwendung .pa-section > .pa-wrap,
.pa-anwendung .pa-consult > .pa-consult-inner,
.pa-anwendung .pa-htesti > .pa-htesti-inner,
.pa-anwendung .pa-cinema > .pa-cinema-inner,
.pa-anwendung .pa-cost > .pa-cost-grid,
.pa-anwendung .pa-stats-big > .pa-stats-grid,
.pa-anwendung .pa-refs-grid,
.pa-anwendung .pa-testi-grid,
.pa-anwendung .pa-trust-grid,
.pa-anwendung .pa-downloads-grid,
.pa-anwendung .pa-articles-grid,
.pa-anwendung .pa-story > .pa-wrap,
.pa-anwendung .pa-step-d,
.pa-anwendung .pa-faq-list,
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget,
.pa-anwendung .pa-longform-content{
max-width:1360px !important;
padding-left:40px !important;
padding-right:40px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
/* Einige Grid-Kinder haben schon eigenes padding — reset für die direkten .pa-wrap Wrapper */
.pa-anwendung .pa-refs .pa-wrap,
.pa-anwendung .pa-testimonials .pa-wrap,
.pa-anwendung .pa-trust .pa-wrap,
.pa-anwendung .pa-downloads .pa-wrap,
.pa-anwendung .pa-articles .pa-wrap,
.pa-anwendung .pa-faq .pa-wrap,
.pa-anwendung .pa-kp .pa-wrap,
.pa-anwendung .pa-cta .pa-wrap,
.pa-anwendung .pa-solution > .pa-wrap,
.pa-anwendung .pa-steps-d > .pa-wrap,
.pa-anwendung .pa-challenges > .pa-wrap,
.pa-anwendung .pa-ts > .pa-wrap{
max-width:1360px !important;
padding-left:40px !important;
padding-right:40px !important;
margin-left:auto !important;
margin-right:auto !important;
box-sizing:border-box !important;
}
/* Longform + FAQ innen eng lesbar halten — bekommen inneren Reader-Wrapper */
.pa-anwendung .pa-longform .pa-wrap-narrow,
.pa-anwendung .pa-faq .pa-wrap-narrow{max-width:820px;margin:0 auto}
/* Cinema-Break bleibt full-bleed (kein Container) */
.pa-anwendung .pa-cinema{padding-left:0 !important;padding-right:0 !important}
.pa-anwendung .pa-cinema-inner{max-width:1200px !important;padding:80px 40px !important}
@media (max-width:960px){
.pa-anwendung .pa-section > .pa-wrap,
.pa-anwendung .pa-consult-inner,
.pa-anwendung .pa-htesti-inner,
.pa-anwendung .pa-cost-grid,
.pa-anwendung .pa-stats-grid,
.pa-anwendung .pa-refs-grid,
.pa-anwendung .pa-testi-grid,
.pa-anwendung .pa-trust-grid,
.pa-anwendung .pa-downloads-grid,
.pa-anwendung .pa-articles-grid,
.pa-anwendung .pa-story > .pa-wrap,
.pa-anwendung .pa-step-d,
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget{
padding-left:20px !important;
padding-right:20px !important;
}
}
/* Container-Breite auf 1180px angleichen (matched /produkt/*) */
.pa-anwendung .pa-section > .pa-wrap,
.pa-anwendung .pa-consult > .pa-consult-inner,
.pa-anwendung .pa-htesti > .pa-htesti-inner,
.pa-anwendung .pa-cost > .pa-cost-grid,
.pa-anwendung .pa-stats-big > .pa-stats-grid,
.pa-anwendung .pa-refs-grid,
.pa-anwendung .pa-testi-grid,
.pa-anwendung .pa-trust-grid,
.pa-anwendung .pa-downloads-grid,
.pa-anwendung .pa-articles-grid,
.pa-anwendung .pa-story > .pa-wrap,
.pa-anwendung .pa-step-d,
.pa-anwendung .pa-faq-list,
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget,
.pa-anwendung .pa-longform-content,
.pa-anwendung .pa-refs .pa-wrap,
.pa-anwendung .pa-testimonials .pa-wrap,
.pa-anwendung .pa-trust .pa-wrap,
.pa-anwendung .pa-downloads .pa-wrap,
.pa-anwendung .pa-articles .pa-wrap,
.pa-anwendung .pa-faq .pa-wrap,
.pa-anwendung .pa-kp .pa-wrap,
.pa-anwendung .pa-cta .pa-wrap,
.pa-anwendung .pa-solution > .pa-wrap,
.pa-anwendung .pa-steps-d > .pa-wrap,
.pa-anwendung .pa-challenges > .pa-wrap,
.pa-anwendung .pa-ts > .pa-wrap{
max-width:1180px !important;
padding-left:32px !important;
padding-right:32px !important;
}
/* Reader-Widths respektieren — nicht alle Sections sollen 1180px sein */
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget{max-width:1000px !important}
.pa-anwendung .pa-faq-list{max-width:820px !important}
.pa-anwendung .pa-longform-content{max-width:820px !important}
.pa-anwendung .pa-htesti-inner{max-width:1000px !important}
.pa-anwendung .pa-cta .pa-wrap{max-width:900px !important;text-align:center}
/* Downloads-Cards: linksbündig statt zentriert, kompakter */
.pa-anwendung .pa-downloads-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) !important;gap:12px !important}
.pa-anwendung .pa-dl-card{text-align:left !important;padding:20px 20px 20px 56px !important;min-height:0 !important}
.pa-anwendung .pa-dl-card::before{left:20px !important;top:22px !important;width:20px !important;height:26px !important}
.pa-anwendung .pa-dl-title{text-align:left !important;font-size:14px !important;line-height:1.35 !important;letter-spacing:.04em !important;margin-bottom:6px !important;text-transform:none !important;font-weight:600 !important}
.pa-anwendung .pa-dl-meta{text-align:left !important;font-size:12px !important}
/* Cost-Teaser (kompakt, Ersatz für ehemalige Kosten-Section) */
.pa-anwendung .pa-cost-teaser{padding:80px 0;background:#0F1216;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.pa-anwendung .pa-cost-teaser-card{max-width:1180px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.pa-anwendung .pa-cost-teaser-left{max-width:720px}
.pa-anwendung .pa-cost-teaser-left .pa-eye{margin-bottom:12px}
.pa-anwendung .pa-cost-teaser-h{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:-.005em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.pa-anwendung .pa-cost-teaser-h span{color:#76B82A}
.pa-anwendung .pa-cost-teaser-t{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:560px}
@media (max-width:820px){.pa-anwendung .pa-cost-teaser-card{grid-template-columns:1fr;gap:24px}}
/* KP-Widget kompakter */
.pa-anwendung .pa-kp{padding:80px 0}
.pa-anwendung .pa-kp-widget,
.pa-product .pa-kp-widget{
max-width:820px !important;
grid-template-columns:160px 1fr !important;
gap:32px !important;
padding:32px !important;
border-radius:20px !important;
}
.pa-anwendung .pa-kp-photo,
.pa-product .pa-kp-photo{width:160px !important;height:160px !important;border-width:2px !important}
.pa-anwendung .pa-kp-info .pa-eye,
.pa-product .pa-kp-info .pa-eye{margin-bottom:8px}
.pa-anwendung .pa-kp-name,
.pa-product .pa-kp-name{font-size:22px !important;margin:4px 0 4px !important}
.pa-anwendung .pa-kp-role,
.pa-product .pa-kp-role{font-size:13px !important;margin:0 0 12px !important}
.pa-anwendung .pa-kp-note,
.pa-product .pa-kp-note{font-size:14px !important;line-height:1.5 !important;margin:0 0 18px !important;max-width:none !important}
.pa-anwendung .pa-kp-actions .pa-pill,
.pa-product .pa-kp-actions .pa-pill{padding:12px 20px !important;font-size:13px !important}
/* CTA-Band unten aus (der Footer hat schon eine CTA — Doppelung vermeiden) */
.pa-anwendung .pa-cta{display:none !important}
/* ===== Fachartikel-Teaser: großer Split mit Bild und CTA ===== */
.pa-anwendung .pa-article-teaser{padding:100px 0;background:#0F1216;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.pa-anwendung .pa-at-card{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch;max-width:1180px;margin:0 auto;padding:0 32px;text-decoration:none;color:#fff;border-radius:24px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.pa-anwendung .pa-at-card:hover{transform:translateY(-4px)}
.pa-anwendung .pa-at-card:hover .pa-at-media img{transform:scale(1.06)}
.pa-anwendung .pa-at-card:hover .pa-at-cta{gap:14px;color:#8bd435}
.pa-anwendung .pa-at-media{aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#13181D;position:relative}
.pa-anwendung .pa-at-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pa-anwendung .pa-at-media-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font:800 11px/1 'Roboto Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase}
.pa-anwendung .pa-at-body{display:flex;flex-direction:column;justify-content:center;padding:16px 0}
.pa-anwendung .pa-at-body .pa-eye{color:#76B82A;font-size:12px;letter-spacing:.22em;margin-bottom:20px}
.pa-anwendung .pa-at-h{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0 0 20px}
.pa-anwendung .pa-at-t{font-size:16px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 28px;max-width:520px}
.pa-anwendung .pa-at-cta{display:inline-flex;align-items:center;gap:10px;font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#76B82A;transition:all .3s ease}
@media (max-width:820px){
.pa-anwendung .pa-at-card{grid-template-columns:1fr;gap:32px}
}
/* ===== Referenzen-Section Redesign — mit Header, größer, cleaner ===== */
.pa-anwendung .pa-refs{padding:120px 0 !important;background:#0F1216}
.pa-anwendung .pa-refs > .pa-wrap{max-width:1180px !important;padding:0 32px !important;margin:0 auto !important}
.pa-anwendung .pa-refs .pa-eye{text-align:center;color:#76B82A;margin-bottom:20px;display:block}
.pa-anwendung .pa-refs .pa-mega-mid{
text-align:center !important;
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:clamp(32px,4.2vw,60px) !important;
line-height:1.02 !important;
letter-spacing:-.01em !important;
text-transform:uppercase !important;
color:#fff !important;
margin:0 auto 20px !important;
max-width:900px !important;
}
.pa-anwendung .pa-refs-lede{
text-align:center;
max-width:640px;
margin:0 auto 60px;
font-size:16px;
line-height:1.55;
color:rgba(255,255,255,.72);
}
.pa-anwendung .pa-refs-grid{
display:grid !important;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
gap:16px !important;
max-width:1180px !important;
margin:0 auto !important;
padding:0 !important;
}
.pa-anwendung .pa-ref{
aspect-ratio:3/4 !important;
border-radius:18px !important;
overflow:hidden !important;
position:relative !important;
background:#13181D !important;
transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease !important;
}
.pa-anwendung .pa-ref:hover{
transform:translateY(-8px) !important;
box-shadow:0 30px 60px rgba(0,0,0,.5),0 0 0 1px rgba(118,184,42,.4) !important;
}
.pa-anwendung .pa-ref img{filter:brightness(.75) !important;transition:filter .5s ease,transform .8s cubic-bezier(.2,.7,.2,1) !important}
.pa-anwendung .pa-ref:hover img{filter:brightness(1) !important;transform:scale(1.08) !important}
.pa-anwendung .pa-ref-meta{padding:24px !important;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 30%,rgba(0,0,0,.95) 100%) !important}
.pa-anwendung .pa-ref-stat{font-size:14px !important;color:#76B82A !important;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px !important}
.pa-anwendung .pa-ref-title{font-size:15px !important;line-height:1.3 !important;letter-spacing:.01em !important}
/* ===== Testimonials Redesign — Dedrone-Style (Avatar links, Zitat rechts, Trennlinien) ===== */
.pa-anwendung .pa-testimonials{padding:120px 0 !important;background:#0B0D10}
.pa-anwendung .pa-testimonials > .pa-wrap{max-width:1180px !important;padding:0 32px !important;margin:0 auto !important}
.pa-anwendung .pa-testimonials .pa-eye{text-align:center;color:#76B82A;margin-bottom:20px;display:block}
.pa-anwendung .pa-testimonials .pa-mega-mid{
text-align:center !important;
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:clamp(32px,4.2vw,60px) !important;
line-height:1.02 !important;
letter-spacing:-.01em !important;
text-transform:uppercase !important;
color:#fff !important;
margin:0 auto 60px !important;
max-width:900px !important;
}
/* Grid → vertikaler Stack mit horizontalen Trennlinien */
.pa-anwendung .pa-testi-grid{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
margin-top:0 !important;
max-width:1080px !important;
margin-left:auto !important;
margin-right:auto !important;
}
.pa-anwendung .pa-testi{
display:grid !important;
grid-template-columns:200px 1fr !important;
gap:60px !important;
align-items:center !important;
background:transparent !important;
border:0 !important;
border-top:1px solid rgba(255,255,255,.15) !important;
border-radius:0 !important;
padding:56px 0 !important;
margin:0 !important;
position:relative;
}
.pa-anwendung .pa-testi:last-child{border-bottom:1px solid rgba(255,255,255,.15) !important}
/* Avatar / Foto links (Kreis) */
.pa-anwendung .pa-testi::before{
content:"";
grid-column:1;
width:140px;height:140px;
border-radius:50%;
background:#13181D no-repeat center/60% url("data:image/svg+xml;utf8,");
border:2px solid rgba(118,184,42,.35);
justify-self:start;
}
/* Grid-Wrapper mit Name+Role links, Quote rechts */
.pa-anwendung .pa-testi-quote{
grid-column:2;
font-family:'Roboto Condensed',sans-serif !important;
font-weight:400 !important;
font-size:clamp(20px,2vw,28px) !important;
line-height:1.4 !important;
color:#fff !important;
margin:0 !important;
position:relative !important;
padding-left:40px !important;
}
/* Grünes Öffnungszitat */
.pa-anwendung .pa-testi-quote::before{
content:"„" !important;
position:absolute !important;
left:0 !important;
top:-20px !important;
font-family:'Roboto Condensed',serif !important;
font-weight:800 !important;
font-size:60px !important;
color:#76B82A !important;
line-height:1 !important;
}
.pa-anwendung .pa-testi-foot{
grid-column:1;
grid-row:2;
display:flex !important;
flex-direction:column !important;
gap:4px !important;
margin-top:16px;
text-align:left;
align-self:start;
}
.pa-anwendung .pa-testi-author{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:16px !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
color:#fff !important;
}
.pa-anwendung .pa-testi-role{
font-size:13px !important;
color:rgba(255,255,255,.55) !important;
line-height:1.4;
}
@media (max-width:820px){
.pa-anwendung .pa-testi{grid-template-columns:1fr !important;gap:24px !important;padding:36px 0 !important}
.pa-anwendung .pa-testi::before{width:100px;height:100px}
.pa-anwendung .pa-testi-quote{grid-column:1 !important;padding-left:24px !important}
.pa-anwendung .pa-testi-quote::before{font-size:44px !important;top:-14px !important}
.pa-anwendung .pa-testi-foot{grid-column:1;grid-row:3;margin-top:0}
}
/* ===== Mission-Section — One-System-Split (à la Dedrone) ===== */
.pa-anwendung .pa-mission{background:#0B0D10;position:relative;overflow:hidden;padding:0}
.pa-anwendung .pa-mission-grid{display:grid;grid-template-columns:1fr 1fr;min-height:600px;align-items:stretch}
.pa-anwendung .pa-mission-media{position:relative;overflow:hidden;background:#13181D;min-height:520px}
.pa-anwendung .pa-mission-media img,.pa-anwendung .pa-mission-media video{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.pa-anwendung .pa-mission-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);font:800 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase}
/* sanfter Fade auf der rechten Kante der Bild-Column → nahtloser Übergang zum Text-BG */
.pa-anwendung .pa-mission-fade{position:absolute;top:0;right:0;bottom:0;width:35%;background:linear-gradient(90deg,transparent 0%,rgba(11,13,16,.6) 60%,#0B0D10 100%);pointer-events:none;z-index:2}
.pa-anwendung .pa-mission-text{background:#0B0D10;padding:100px 80px 100px 60px;display:flex;flex-direction:column;justify-content:center;max-width:640px}
.pa-anwendung .pa-mission-h{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.01em;color:#fff;margin:0 0 24px}
.pa-anwendung .pa-mission-hl{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(16px,1.4vw,20px);line-height:1.3;letter-spacing:.01em;color:#76B82A;margin:0 0 24px;text-transform:none}
.pa-anwendung .pa-mission-body{font-size:16px;line-height:1.65;color:rgba(255,255,255,.78);margin:0 0 36px}
.pa-anwendung .pa-mission-body p{margin:0 0 12px}
.pa-anwendung .pa-mission-cta{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;background:#fff;color:#0B0D10;font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-radius:6px;text-decoration:none;transition:all .3s ease;align-self:flex-start}
.pa-anwendung .pa-mission-cta:hover{background:#76B82A;color:#0B0D10;transform:translateY(-2px)}
@media (max-width:960px){
.pa-anwendung .pa-mission-grid{grid-template-columns:1fr;min-height:0}
.pa-anwendung .pa-mission-media{aspect-ratio:16/10;min-height:0}
.pa-anwendung .pa-mission-fade{display:none}
.pa-anwendung .pa-mission-text{padding:60px 24px;max-width:none}
}
/* ===== Hero HUD-Overlay (Grid + Sensor-Nodes + Corner-Brackets, à la Dedrone AI-Dome) ===== */
.pa-anwendung .pa-hero-hud{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
/* Feines Grid-Pattern */
.pa-anwendung .pa-hero-hud-grid{
position:absolute;inset:0;
background-image:
linear-gradient(rgba(118,184,42,.10) 1px, transparent 1px),
linear-gradient(90deg, rgba(118,184,42,.10) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, black 40%, transparent 90%);
-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, black 40%, transparent 90%);
opacity:.65;
}
/* Sensor-Nodes (pulsierende grüne Punkte an definierten Positionen) */
.pa-anwendung .pa-hero-hud-nodes{position:absolute;inset:0}
.pa-anwendung .pa-hero-node{
position:absolute;
left:var(--x);top:var(--y);
width:12px;height:12px;
transform:translate(-50%,-50%);
}
.pa-anwendung .pa-hero-node::before,
.pa-anwendung .pa-hero-node::after{
content:"";position:absolute;inset:0;border-radius:50%;
}
.pa-anwendung .pa-hero-node::before{
background:#76B82A;
box-shadow:0 0 0 3px rgba(11,13,16,.7),0 0 24px rgba(118,184,42,.9);
opacity:.85;
}
.pa-anwendung .pa-hero-node::after{
border:1.5px solid #76B82A;
animation:paHeroNodePulse 2.8s ease-out infinite;
opacity:0;
}
.pa-anwendung .pa-hero-node:nth-child(2)::after{animation-delay:.5s}
.pa-anwendung .pa-hero-node:nth-child(3)::after{animation-delay:1s}
.pa-anwendung .pa-hero-node:nth-child(4)::after{animation-delay:1.5s}
.pa-anwendung .pa-hero-node:nth-child(5)::after{animation-delay:2s}
@keyframes paHeroNodePulse{
0%{transform:scale(1);opacity:.9}
70%{transform:scale(4);opacity:0}
100%{transform:scale(4);opacity:0}
}
/* Corner-Brackets (HUD-Style Ecken) */
.pa-anwendung .pa-hero-hud-brackets{position:absolute;inset:32px;pointer-events:none}
.pa-anwendung .pa-hero-bracket{
position:absolute;width:36px;height:36px;
border:0;
}
.pa-anwendung .pa-hero-bracket::before,
.pa-anwendung .pa-hero-bracket::after{
content:"";position:absolute;background:rgba(118,184,42,.75);
}
.pa-anwendung .pa-hero-bracket--tl{top:0;left:0}
.pa-anwendung .pa-hero-bracket--tl::before{top:0;left:0;width:20px;height:1.5px}
.pa-anwendung .pa-hero-bracket--tl::after{top:0;left:0;width:1.5px;height:20px}
.pa-anwendung .pa-hero-bracket--tr{top:0;right:0}
.pa-anwendung .pa-hero-bracket--tr::before{top:0;right:0;width:20px;height:1.5px}
.pa-anwendung .pa-hero-bracket--tr::after{top:0;right:0;width:1.5px;height:20px}
.pa-anwendung .pa-hero-bracket--bl{bottom:0;left:0}
.pa-anwendung .pa-hero-bracket--bl::before{bottom:0;left:0;width:20px;height:1.5px}
.pa-anwendung .pa-hero-bracket--bl::after{bottom:0;left:0;width:1.5px;height:20px}
.pa-anwendung .pa-hero-bracket--br{bottom:0;right:0}
.pa-anwendung .pa-hero-bracket--br::before{bottom:0;right:0;width:20px;height:1.5px}
.pa-anwendung .pa-hero-bracket--br::after{bottom:0;right:0;width:1.5px;height:20px}
/* Vignette verstärken für Cinema-Look */
.pa-anwendung .pa-hero-darken{background:radial-gradient(120% 90% at 50% 50%,transparent 30%,rgba(11,13,16,.4) 60%,rgba(11,13,16,.85) 100%),linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,.15) 45%,rgba(11,13,16,.6) 100%) !important}
/* ===== Hero Split (Text links + Media rechts, à la Dedrone) ===== */
.pa-anwendung .pa-hero--split{background:#0B0D10;min-height:auto !important;height:auto !important;position:relative;padding:80px 0 40px}
.pa-anwendung .pa-hero-split-inner{max-width:1360px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;min-height:70vh}
.pa-anwendung .pa-hero-split-text{padding:24px 0}
.pa-anwendung .pa-hero-pill{display:inline-block;font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:12px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);padding:10px 16px;border-radius:4px;margin-bottom:32px}
.pa-anwendung .pa-hero-split-h{font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:clamp(40px,5vw,80px);line-height:.98;letter-spacing:-.015em;text-transform:uppercase;color:#fff;margin:0 0 24px}
.pa-anwendung .pa-hero-split-t{font-size:clamp(16px,1.3vw,20px);line-height:1.55;color:rgba(255,255,255,.72);max-width:520px;margin:0 0 36px}
.pa-anwendung .pa-hero-split-cta{display:flex;gap:12px;flex-wrap:wrap}
.pa-anwendung .pa-hero-split-media{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#13181D;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.pa-anwendung .pa-hero-split-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* HUD-Layer im Media-Container */
.pa-anwendung .pa-hero-split-media .pa-hero-hud{position:absolute;inset:0;z-index:2;pointer-events:none}
/* Alte Full-Bleed Hero-Regeln neutralisieren wenn split aktiv */
.pa-anwendung .pa-hero--split{overflow:visible !important}
.pa-anwendung .pa-hero--split::after{display:none}
.pa-anwendung .pa-hero--split .pa-hero-scroll{display:none}
.pa-anwendung .pa-hero--split .pa-hero-darken,
.pa-anwendung .pa-hero--split .pa-hero-grain,
.pa-anwendung .pa-hero--split .pa-hero-inner{display:none !important}
@media (max-width:960px){
.pa-anwendung .pa-hero-split-inner{grid-template-columns:1fr;gap:40px;padding:0 20px;min-height:0}
.pa-anwendung .pa-hero-split-media{aspect-ratio:16/10}
.pa-anwendung .pa-hero--split{padding:60px 0 40px}
}
/* ===== Hero Full-Screen mit Layer-Stack (Dedrone AI-Dome Style) ===== */
.pa-anwendung .pa-hero--fs{
position:relative;
min-height:100vh;
max-height:1080px;
overflow:hidden;
padding:0;
background:#0B0D10;
display:flex;
align-items:center;
}
/* Layer-Wrapper (alle BG-Layer) */
.pa-anwendung .pa-hero--fs .pa-hero-tidy{position:absolute;inset:0;z-index:0}
.pa-anwendung .pa-hero--fs .pa-hero-bg-wrap{position:absolute;inset:0}
.pa-anwendung .pa-hero--fs .pa-hero-bg-media{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
/* Dome-Overlay SVG (Kuppel + Grid — inline data-URI) */
.pa-anwendung .pa-hero--fs .pa-hero-dome{
position:absolute;top:50%;right:-5%;transform:translateY(-50%);
width:80vh;height:80vh;max-width:60%;max-height:90%;
background:no-repeat center/contain url("data:image/svg+xml;utf8,");
opacity:.55;
pointer-events:none;
z-index:2;
filter:drop-shadow(0 0 40px rgba(118,184,42,.2));
}
/* Radial Vignette */
.pa-anwendung .pa-hero--fs .pa-hero-radial{
position:absolute;inset:0;
background:radial-gradient(ellipse 60% 80% at 25% 50%,rgba(11,13,16,.65) 0%,rgba(11,13,16,.1) 60%,transparent 100%);
z-index:3;
}
/* Bottom-Gradient (klassisch für Text-Lesbarkeit) */
.pa-anwendung .pa-hero--fs .pa-hero-bottomgrad{
position:absolute;left:0;right:0;bottom:0;height:50%;
background:linear-gradient(180deg,transparent 0%,rgba(11,13,16,.85) 100%);
z-index:3;
}
/* Grain */
.pa-anwendung .pa-hero--fs .pa-hero-grain{
position:absolute;inset:0;z-index:5;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.06;
mix-blend-mode:overlay;
}
/* HUD Layer bleibt aus vorheriger Definition — hier nur positionieren */
.pa-anwendung .pa-hero--fs .pa-hero-hud{position:absolute;inset:0;z-index:4;pointer-events:none}
/* Content Layer (Text) */
.pa-anwendung .pa-hero--fs .pa-hero-fs-content{
position:relative;z-index:10;
max-width:1360px;margin:0 auto;padding:0 40px;width:100%;
}
.pa-anwendung .pa-hero-pill{display:inline-block;font-family:'Roboto Condensed',sans-serif;font-weight:800;font-size:12px;line-height:1;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:#0B0D10;border:1px solid rgba(255,255,255,.35);padding:11px 18px;border-radius:4px;margin-bottom:32px}
.pa-anwendung .pa-hero-fs-h{
font-family:'Roboto Condensed',sans-serif;
font-weight:800;
font-size:clamp(44px,6vw,96px);
line-height:.98;
letter-spacing:-.02em;
text-transform:uppercase;
color:#fff;
margin:0 0 28px;
max-width:14ch;
text-shadow:0 4px 32px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
}
.pa-anwendung .pa-hero-fs-t{
font-size:clamp(17px,1.5vw,22px);
line-height:1.5;
color:#fff;
max-width:560px;
margin:0 0 40px;
text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.pa-anwendung .pa-hero-fs-cta{display:flex;gap:12px;flex-wrap:wrap}
/* Alte Hero-Reste ausschalten wenn full-screen */
.pa-anwendung .pa-hero--fs::after{display:none !important}
.pa-anwendung .pa-hero--fs .pa-hero-inner,
.pa-anwendung .pa-hero--fs .pa-hero-darken,
.pa-anwendung .pa-hero--fs .pa-hero-scroll{display:none !important}
/* Split-Reste aus */
.pa-anwendung .pa-hero--fs .pa-hero-split-inner{display:none !important}
@media (max-width:960px){
.pa-anwendung .pa-hero--fs{min-height:80vh}
.pa-anwendung .pa-hero--fs .pa-hero-dome{width:120vw;height:120vw;right:-30%;opacity:.35}
.pa-anwendung .pa-hero--fs .pa-hero-radial{background:radial-gradient(ellipse 100% 100% at 30% 50%,rgba(11,13,16,.75) 0%,rgba(11,13,16,.3) 70%,transparent 100%)}
}
/* Hero-Refinement: Video nur rechts als Bühne, Text links auf schwarz, Eyebrow raus */
.pa-anwendung .pa-hero--fs .pa-hero-pill{display:none !important}
/* Video/Bild-Bühne: rechts ~55% des Screens, kompakt */
.pa-anwendung .pa-hero--fs .pa-hero-bg-wrap{
position:absolute !important;
top:0;bottom:0;
left:auto !important;right:0 !important;
width:55% !important;
overflow:hidden;
/* Sanfter Fade zum Text-Bereich (linke Kante) */
mask-image:linear-gradient(90deg, transparent 0%, black 25%, black 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0%, black 25%, black 100%);
}
.pa-anwendung .pa-hero--fs .pa-hero-bg-media{object-position:center !important}
/* Dome-Overlay bleibt rechts */
.pa-anwendung .pa-hero--fs .pa-hero-dome{
right:-8% !important;
width:75vh !important;
height:75vh !important;
max-width:55% !important;
opacity:.7 !important;
}
/* Radial-Vignette: links (Text) VOLL dunkel — rechts (Bühne) frei */
.pa-anwendung .pa-hero--fs .pa-hero-radial{
background:linear-gradient(90deg, rgba(11,13,16,1) 0%, rgba(11,13,16,1) 30%, rgba(11,13,16,.4) 55%, transparent 75%) !important;
}
/* Bottom-Gradient nur rechts (nicht über Text-Column) */
.pa-anwendung .pa-hero--fs .pa-hero-bottomgrad{
left:45% !important;
background:linear-gradient(180deg, transparent 0%, rgba(11,13,16,.85) 100%);
}
/* HUD-Nodes/Brackets nur rechte Hälfte */
.pa-anwendung .pa-hero--fs .pa-hero-hud-grid{
mask-image:linear-gradient(90deg, transparent 40%, black 65%, black 100%),radial-gradient(ellipse 90% 70% at 50% 50%,black 0%,transparent 90%);
-webkit-mask-image:linear-gradient(90deg, transparent 40%, black 65%, black 100%);
}
/* Content Layer: links positioniert */
.pa-anwendung .pa-hero--fs .pa-hero-fs-content{
max-width:1360px;
margin:0 auto;
padding:0 40px;
width:100%;
}
.pa-anwendung .pa-hero-fs-h{max-width:11ch !important;text-shadow:0 4px 32px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.7) !important}
.pa-anwendung .pa-hero-fs-t{max-width:480px !important}
@media (max-width:960px){
.pa-anwendung .pa-hero--fs .pa-hero-bg-wrap{width:100% !important;mask-image:none !important;-webkit-mask-image:none !important;opacity:.35}
.pa-anwendung .pa-hero--fs .pa-hero-radial{background:linear-gradient(180deg, rgba(11,13,16,.6) 0%, rgba(11,13,16,.85) 100%) !important}
.pa-anwendung .pa-hero--fs .pa-hero-bottomgrad{left:0 !important}
}
/* Hero-Dome: echtes SVG-Netz mit Nodes, mix-blend screen für Overlay-Effekt */
.pa-anwendung .pa-hero--fs .pa-hero-dome{
background:no-repeat center/contain url("/wp-content/uploads/2026/08/hero-dome-net.svg") !important;
opacity:.9 !important;
mix-blend-mode:screen !important;
filter:drop-shadow(0 0 60px rgba(255,255,255,.15)) !important;
width:90vh !important;
height:90vh !important;
max-width:75% !important;
right:-12% !important;
}
/* FIX: Dome sichtbar (mix-blend war unterdrückt von Vignette-Layern) */
.pa-anwendung .pa-hero--fs .pa-hero-dome{
background:no-repeat center/contain url("/wp-content/uploads/2026/08/hero-dome-net.svg") !important;
opacity:1 !important;
mix-blend-mode:normal !important;
z-index:6 !important;
filter:drop-shadow(0 0 30px rgba(255,255,255,.35)) drop-shadow(0 0 80px rgba(118,184,42,.15)) !important;
width:85vh !important;
height:85vh !important;
max-width:70% !important;
right:-8% !important;
top:50% !important;
transform:translateY(-50%) !important;
}
/* Hero-Dome: hyperrealistisches Higgsfield-PNG als Overlay */
.pa-anwendung .pa-hero--fs .pa-hero-dome{
background:no-repeat center right/contain url("/wp-content/uploads/2026/08/hero-dome-highstep.png") !important;
opacity:.9 !important;
mix-blend-mode:screen !important;
z-index:6 !important;
filter:none !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
right:0 !important;
top:0 !important;
transform:none !important;
pointer-events:none;
}
/* Hero-Dome pausiert bis wir ein passendes Konzept haben */
.pa-anwendung .pa-hero--fs .pa-hero-dome{display:none !important}
/* ===== HERO CLEANUP: alle Overlay-Basteleien raus ===== */
/* Overlay-Layer komplett verstecken */
.pa-anwendung .pa-hero-dome,
.pa-anwendung .pa-hero-hud,
.pa-anwendung .pa-hero-hud-grid,
.pa-anwendung .pa-hero-hud-nodes,
.pa-anwendung .pa-hero-hud-brackets,
.pa-anwendung .pa-hero-node,
.pa-anwendung .pa-hero-bracket,
.pa-anwendung .pa-hero-grain,
.pa-anwendung .pa-hero-radial,
.pa-anwendung .pa-hero-bottomgrad{display:none !important}
/* BG-Wrap zurück auf full-bleed */
.pa-anwendung .pa-hero--fs .pa-hero-bg-wrap{
position:absolute !important;
inset:0 !important;
width:100% !important;
right:auto !important;
left:0 !important;
mask-image:none !important;
-webkit-mask-image:none !important;
}
.pa-anwendung .pa-hero--fs .pa-hero-bg-media{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
}
/* Sauberer Text-Overlay: nur ein dezenter Gradient links für Lesbarkeit */
.pa-anwendung .pa-hero--fs::before{
content:"";
position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(90deg, rgba(11,13,16,.85) 0%, rgba(11,13,16,.5) 40%, rgba(11,13,16,.15) 70%, transparent 100%);
}
.pa-anwendung .pa-hero--fs::after{
content:"";
position:absolute;left:0;right:0;bottom:0;height:40%;z-index:1;pointer-events:none;
background:linear-gradient(180deg,transparent 0%,rgba(11,13,16,.7) 100%);
}
/* Content bleibt oberhalb */
.pa-anwendung .pa-hero--fs .pa-hero-fs-content{position:relative;z-index:10}
.pa-anwendung .pa-hero-fs-h{max-width:16ch !important;text-shadow:0 4px 32px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5) !important}
/* Ken-Burns langsamer Zoom + Pan + darker Vignette */
.pa-anwendung .pa-hero--fs .pa-hero-bg-media{
transform-origin:60% 50% !important;
animation:paHeroKenBurns 22s ease-in-out infinite alternate !important;
will-change:transform !important;
}
@keyframes paHeroKenBurns{
0%{transform:scale(1.05) translate(0,0)}
100%{transform:scale(1.14) translate(-2%,-1.5%)}
}
/* Radial-Vignette an den Ecken (darker Cinema-Look) */
.pa-anwendung .pa-hero--fs .pa-hero-tidy::after{
content:"";
position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(ellipse 110% 85% at 50% 50%,transparent 40%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.85) 100%);
}
/* Bestehenden Text-Gradient etwas verstärken */
.pa-anwendung .pa-hero--fs::before{
background:linear-gradient(90deg, rgba(11,13,16,.92) 0%, rgba(11,13,16,.65) 40%, rgba(11,13,16,.2) 70%, transparent 100%) !important;
}
.pa-anwendung .pa-hero--fs::after{
height:50% !important;
background:linear-gradient(180deg,transparent 0%,rgba(11,13,16,.85) 100%) !important;
}
@media (prefers-reduced-motion:reduce){
.pa-anwendung .pa-hero--fs .pa-hero-bg-media{animation:none !important;transform:scale(1.05) !important}
}
/* ===== Steps-Section Dedrone-Correctional-Style (weißer BG, kleine Nummer, große H2) ===== */
.pa-anwendung .pa-steps-d{
padding:120px 0 !important;
background:#F5F5F5 !important;
color:#0B0D10;
border-top:1px solid rgba(0,0,0,.08);
border-bottom:1px solid rgba(0,0,0,.08);
}
.pa-anwendung .pa-steps-d .pa-steps-head{text-align:center;max-width:820px;margin:0 auto 100px}
.pa-anwendung .pa-steps-d .pa-eye{color:#76B82A !important;letter-spacing:.22em}
.pa-anwendung .pa-steps-d .pa-mega-mid{
color:#0B0D10 !important;
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:clamp(28px,3.4vw,42px) !important;
line-height:1.15 !important;
letter-spacing:-.005em !important;
text-transform:none !important;
margin:12px 0 0 !important;
}
.pa-anwendung .pa-steps-d .pa-lede{color:rgba(11,13,16,.65) !important;font-size:16px !important;margin-top:16px !important}
/* Steps List */
.pa-anwendung .pa-steps-d-list{display:flex;flex-direction:column;gap:80px}
.pa-anwendung .pa-step-d{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:80px !important;
align-items:center !important;
max-width:1180px !important;
margin:0 auto !important;
padding:0 32px !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{order:2}
.pa-anwendung .pa-step-d--right .pa-step-d-media{order:1}
/* Text-Column */
.pa-anwendung .pa-step-d-text{padding:0}
.pa-anwendung .pa-step-d-headline{display:flex !important;align-items:baseline !important;gap:18px !important;margin:0 0 24px !important}
.pa-anwendung .pa-step-d-num{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:32px !important;
line-height:1 !important;
color:#0B0D10 !important;
padding:0 16px 0 0 !important;
border-right:2px solid #76B82A !important;
position:static !important;
top:auto !important;
}
.pa-anwendung .pa-step-d-num::after{display:none !important;content:none !important}
.pa-anwendung .pa-step-d-title{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:clamp(24px,2.6vw,32px) !important;
line-height:1.15 !important;
letter-spacing:-.005em !important;
color:#0B0D10 !important;
text-transform:none !important;
margin:0 !important;
}
.pa-anwendung .pa-step-d-desc{
font-size:16px !important;
line-height:1.6 !important;
color:rgba(11,13,16,.72) !important;
margin:0 0 28px !important;
max-width:520px !important;
}
.pa-anwendung .pa-step-d-cta{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
padding:14px 24px !important;
background:#0B0D10 !important;
color:#fff !important;
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:12px !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
border:1px solid #0B0D10 !important;
border-radius:6px !important;
text-decoration:none !important;
transition:all .3s ease !important;
}
.pa-anwendung .pa-step-d-cta:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#0B0D10 !important;
gap:14px !important;
}
.pa-anwendung .pa-step-d-cta span{transition:transform .3s ease}
.pa-anwendung .pa-step-d-cta:hover span{transform:translateX(4px)}
/* Media-Column */
.pa-anwendung .pa-step-d-media{
aspect-ratio:1/1 !important;
border-radius:0 !important;
background:transparent !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:visible !important;
}
.pa-anwendung .pa-step-d-media img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
display:block !important;
}
.pa-anwendung .pa-step-d-media-ph{
color:rgba(11,13,16,.35) !important;
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:11px !important;
letter-spacing:.2em !important;
text-transform:uppercase !important;
padding:24px;
border:1px dashed rgba(11,13,16,.15);
border-radius:12px;
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
}
@media (max-width:960px){
.pa-anwendung .pa-steps-d{padding:80px 0 !important}
.pa-anwendung .pa-step-d{grid-template-columns:1fr !important;gap:32px !important}
.pa-anwendung .pa-step-d--right .pa-step-d-text{order:2}
.pa-anwendung .pa-step-d--right .pa-step-d-media{order:1}
}
/* Steps wieder DARK — Layout-Struktur (kleine Nummer + Titel) bleibt greifbar */
.pa-anwendung .pa-steps-d{
background:#0F1216 !important;
color:#fff;
border-top:1px solid rgba(255,255,255,.06) !important;
border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.pa-anwendung .pa-steps-d .pa-eye{color:#76B82A !important}
.pa-anwendung .pa-steps-d .pa-mega-mid{color:#fff !important}
.pa-anwendung .pa-steps-d .pa-lede{color:rgba(255,255,255,.72) !important}
.pa-anwendung .pa-step-d-num{color:#fff !important}
.pa-anwendung .pa-step-d-title{color:#fff !important}
.pa-anwendung .pa-step-d-desc{color:rgba(255,255,255,.72) !important}
/* Button-Kontrast auf dark: weiß mit schwarzem Text, Hover grün */
.pa-anwendung .pa-step-d-cta{
background:#fff !important;
color:#0B0D10 !important;
border:1px solid #fff !important;
}
.pa-anwendung .pa-step-d-cta:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#0B0D10 !important;
}
/* Placeholder-Border heller auf dark */
.pa-anwendung .pa-step-d-media-ph{
color:rgba(255,255,255,.35) !important;
border:1px dashed rgba(255,255,255,.15) !important;
}
/* Story-CTA prominenter: von Ghost auf Primary Look (grüner Fill) */
.pa-anwendung .pa-story .pa-pill--ghost{
background:transparent !important;
color:#76B82A !important;
border:1px solid #76B82A !important;
transition:all .3s ease;
}
.pa-anwendung .pa-story .pa-pill--ghost:hover{
background:#76B82A !important;
color:#0B0D10 !important;
border-color:#76B82A !important;
}
/* Claim-Section ("Herausforderungen..."-Text) raus — die Cards-Section bleibt */
.pa-anwendung .pa-claim{display:none !important}
/* ===== FAQ Redesign — clean, ohne BG-Boxes, klare Abtrennungen ===== */
.pa-anwendung .pa-faq{padding:100px 0 !important;background:#0B0D10}
.pa-anwendung .pa-faq .pa-mega-mid{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:clamp(28px,3.4vw,44px) !important;
line-height:1.1 !important;
letter-spacing:-.005em !important;
text-transform:none !important;
text-align:center !important;
color:#fff !important;
margin:16px auto 60px !important;
max-width:820px !important;
}
.pa-anwendung .pa-faq .pa-eye{color:#76B82A !important;letter-spacing:.22em;text-align:center;display:block;margin-bottom:0 !important}
.pa-anwendung .pa-faq-list{
max-width:820px !important;
margin:0 auto !important;
border-top:1px solid rgba(255,255,255,.12) !important;
}
.pa-anwendung details.pa-faq-item{
border-bottom:1px solid rgba(255,255,255,.12) !important;
border-top:0 !important;
padding:0 !important;
background:transparent !important;
}
.pa-anwendung details[open].pa-faq-item{background:transparent !important}
.pa-anwendung .pa-faq-q{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:16px !important;
line-height:1.35 !important;
letter-spacing:.02em !important;
text-transform:uppercase !important;
color:#fff !important;
padding:22px 0 !important;
cursor:pointer;
list-style:none;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:24px;
background:transparent !important;
transition:color .25s ease;
}
.pa-anwendung .pa-faq-q:hover{color:#76B82A !important}
.pa-anwendung .pa-faq-q::-webkit-details-marker{display:none}
.pa-anwendung .pa-faq-toggle{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:400 !important;
font-size:22px !important;
line-height:1;
color:#76B82A !important;
transition:transform .35s ease;
flex-shrink:0;
}
.pa-anwendung details[open] .pa-faq-toggle{transform:rotate(45deg)}
.pa-anwendung .pa-faq-a{
padding:0 0 24px !important;
font-size:15px !important;
line-height:1.65 !important;
color:rgba(255,255,255,.72) !important;
max-width:720px;
}
/* Konsistenz: alle Section-Headlines wieder UPPERCASE wie im Rest der Seite */
.pa-anwendung .pa-steps-d .pa-mega-mid,
.pa-anwendung .pa-faq .pa-mega-mid,
.pa-anwendung .pa-step-d-title{
text-transform:uppercase !important;
letter-spacing:-.01em !important;
}
/* Story-Headline kleiner (passt besser zur reduzierten Copy) */
.pa-anwendung .pa-story-text .pa-mega-mid{
font-size:clamp(24px,2.6vw,40px) !important;
line-height:1.05 !important;
margin:0 0 20px !important;
}
/* Challenges: Headline näher an die Karten ranrücken */
.pa-anwendung .pa-challenges .pa-mega-mid{
margin:0 0 28px !important;
line-height:1.02 !important;
}
.pa-anwendung .pa-challenges .pa-eyebrow{
margin:0 0 14px !important;
}
.pa-anwendung .pa-challenges{
padding-top:80px !important;
padding-bottom:80px !important;
}
.pa-anwendung .pa-challenges-grid{
margin-top:0 !important;
}
/* Hero-Testimonial: dunkler Kasten unter Zitat entfernen — Name/Position als schlichte Zeile */
.pa-anwendung .pa-htesti-meta,
.pa-anwendung .pa-htesti-author,
.pa-anwendung .pa-htesti-footer{
background:transparent !important;
border:0 !important;
border-top:1px solid rgba(255,255,255,.08) !important;
padding:20px 0 0 !important;
margin:28px 0 0 !important;
box-shadow:none !important;
border-radius:0 !important;
}
.pa-anwendung .pa-htesti-name{
color:#fff !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
letter-spacing:.02em !important;
text-transform:uppercase !important;
font-size:15px !important;
line-height:1.2 !important;
margin:0 0 4px !important;
}
.pa-anwendung .pa-htesti-role,
.pa-anwendung .pa-htesti-position{
color:#76B82A !important;
font-size:14px !important;
line-height:1.3 !important;
margin:0 !important;
font-weight:500 !important;
}
/* Hero-Testimonial: Kasten komplett weg, Name/Position direkt unter dem Zitat */
.pa-anwendung .pa-htesti-foot{
display:block !important;
background:transparent !important;
border:0 !important;
border-top:0 !important;
box-shadow:none !important;
border-radius:0 !important;
padding:0 !important;
margin:14px 0 0 !important;
min-height:0 !important;
height:auto !important;
}
.pa-anwendung .pa-htesti-author{
display:block !important;
color:#fff !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.02em !important;
font-size:15px !important;
line-height:1.2 !important;
margin:0 !important;
background:transparent !important;
}
.pa-anwendung .pa-htesti-role{
display:block !important;
color:#76B82A !important;
font-size:14px !important;
line-height:1.3 !important;
margin:2px 0 0 !important;
background:transparent !important;
font-weight:500 !important;
}
/* Unified Button-Typography: Roboto Condensed 800, uppercase, letter-spacing */
.pa-anwendung .pa-btn,
.pa-anwendung .pa-btn-primary,
.pa-anwendung .pa-btn-secondary,
.pa-anwendung .pa-btn-ghost,
.pa-anwendung .pa-btn-outline,
.pa-anwendung .pa-btn-light,
.pa-anwendung .pa-btn-dark,
.pa-anwendung .pa-cta,
.pa-anwendung .pa-cta-btn,
.pa-anwendung .pa-hero-fs-cta a,
.pa-anwendung .pa-hero-fs-cta .pa-btn,
.pa-anwendung .pa-story-cta,
.pa-anwendung .pa-story-cta a,
.pa-anwendung .pa-mission-cta,
.pa-anwendung .pa-mission-cta a,
.pa-anwendung .pa-cost-teaser-cta,
.pa-anwendung .pa-cost-teaser-cta a,
.pa-anwendung .pa-article-teaser-cta,
.pa-anwendung .pa-article-teaser-cta a,
.pa-anwendung .pa-steps-cta,
.pa-anwendung .pa-steps-cta a,
.pa-anwendung .pa-step-d-cta,
.pa-anwendung .pa-step-d-cta a,
.pa-anwendung .pa-cta-band a,
.pa-anwendung .pa-cta-band .pa-btn,
.pa-anwendung .pa-downloads a.pa-download,
.pa-anwendung .pa-download-btn,
.pa-anwendung a.pa-btn,
.pa-anwendung button.pa-btn{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
font-size:14px !important;
line-height:1 !important;
}
/* Größere Hero/CTA-Buttons dürfen etwas größer sein */
.pa-anwendung .pa-hero-fs-cta a,
.pa-anwendung .pa-hero-fs-cta .pa-btn,
.pa-anwendung .pa-cta-band a,
.pa-anwendung .pa-cta-band .pa-btn{
font-size:15px !important;
letter-spacing:.1em !important;
}
/* =========================================================
GLOBAL BUTTON-TYPO: Roboto Condensed 800 UPPERCASE
gilt für gesamte Site — Header, Footer, alle Templates
========================================================= */
body .pa-btn,
body .pa-btn-primary,
body .pa-btn-secondary,
body .pa-btn-ghost,
body .pa-btn-outline,
body .pa-btn-light,
body .pa-btn-dark,
body .pa-cta,
body .pa-cta-btn,
body a.pa-btn,
body button.pa-btn,
body button[type="submit"],
body input[type="submit"],
body input[type="button"],
body .button,
body .wp-block-button__link,
body .site-header a.pa-btn,
body .site-header .pa-btn,
body .site-header .menu-cta,
body .site-header .header-cta,
body .site-header .topbar-cta,
body .pa-topbar a.pa-btn,
body .pa-topbar .pa-btn,
body footer .pa-btn,
body footer a.pa-btn,
body .pa-footer .pa-btn,
body .pa-cta-band a,
body .pa-cta-band .pa-btn,
body .pa-hero-fs-cta a,
body .pa-hero-cta a,
body .pa-hero-cta .pa-btn,
body .pa-story-cta a,
body .pa-mission-cta a,
body .pa-cost-teaser-cta a,
body .pa-article-teaser-cta a,
body .pa-steps-cta a,
body .pa-step-d-cta a,
body .pa-downloads a.pa-download,
body .pa-download-btn,
body .highstep-btn,
body .btn,
body .btn-primary,
body .btn-secondary{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
line-height:1 !important;
}
/* Größe je nach Kontext */
body .pa-btn,
body button[type="submit"],
body input[type="submit"],
body .wp-block-button__link,
body .button{
font-size:14px !important;
}
body .pa-cta-band a,
body .pa-cta-band .pa-btn,
body .pa-hero-fs-cta a,
body .pa-hero-cta a{
font-size:15px !important;
letter-spacing:.1em !important;
}
body .site-header .pa-btn,
body .site-header a.pa-btn,
body .pa-topbar .pa-btn{
font-size:13px !important;
letter-spacing:.08em !important;
}
/* Menü-Typo global: Hauptmenü + Topbar-Menü + Nav-CTA */
body .nav .menu > li > a,
body .nav nav a,
body header.nav nav a,
body #nav nav a,
body .topbar a,
body .topbar .menu a,
body .topbar-menu a,
body .site-header nav a,
body .main-navigation a,
body .primary-menu a,
body .nav-cta,
body a.nav-cta,
body .mobile-menu a{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
}
/* Größen fein: Hauptmenü etwas größer, Topbar kleiner */
body .nav .menu > li > a,
body header.nav nav a,
body #nav nav a{
font-size:14px !important;
}
body .topbar a{
font-size:12px !important;
letter-spacing:.1em !important;
}
body .nav-cta{
font-size:13px !important;
letter-spacing:.08em !important;
}
/* =========================================================
UNIFIED BUTTON SYSTEM
Alle Buttons identisch — nur Farbe/Hover unterscheidet
Shape: Pill, Padding: 14px 28px, Typo: RC800 UPPERCASE 14px
========================================================= */
body a.pa-btn,
body button.pa-btn,
body .pa-btn,
body .pa-btn-primary,
body .pa-btn-secondary,
body .pa-btn-ghost,
body .pa-btn-outline,
body .pa-btn-light,
body .pa-btn-dark,
body .nav-cta,
body a.nav-cta,
body .header-cta,
body a.header-cta,
body .site-header .pa-btn,
body .pa-hero-fs-cta a,
body .pa-hero-cta a,
body .pa-story-cta a,
body .pa-mission-cta a,
body .pa-cost-teaser-cta a,
body .pa-article-teaser-cta a,
body .pa-steps-cta a,
body .pa-step-d-cta a,
body .pa-cta-band a,
body .pa-cta-band .pa-btn,
body .pa-downloads a.pa-download,
body .pa-download-btn,
body .wp-block-button__link{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:14px 28px !important;
border-radius:999px !important;
border:2px solid transparent !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:14px !important;
line-height:1 !important;
text-transform:uppercase !important;
letter-spacing:.08em !important;
text-decoration:none !important;
cursor:pointer !important;
transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
white-space:nowrap !important;
}
/* PRIMARY = Grün */
body a.pa-btn.pa-btn-primary,
body .pa-btn.pa-btn-primary,
body .nav-cta,
body a.nav-cta,
body .pa-hero-fs-cta a.pa-btn-primary,
body .pa-cta-band a.pa-btn-primary,
body .pa-cta-band a:not(.pa-btn-secondary):not(.pa-btn-ghost):not(.pa-btn-outline){
background:#76B82A !important;
color:#000 !important;
border-color:#76B82A !important;
}
body a.pa-btn.pa-btn-primary:hover,
body .pa-btn.pa-btn-primary:hover,
body .nav-cta:hover,
body a.nav-cta:hover,
body .pa-cta-band a:not(.pa-btn-secondary):hover{
background:#5f9622 !important;
border-color:#5f9622 !important;
color:#000 !important;
}
/* SECONDARY = Weiß */
body a.pa-btn.pa-btn-secondary,
body .pa-btn.pa-btn-secondary,
body .pa-btn-light,
body a.pa-btn-light{
background:#fff !important;
color:#000 !important;
border-color:#fff !important;
}
body a.pa-btn.pa-btn-secondary:hover,
body .pa-btn.pa-btn-secondary:hover,
body .pa-btn-light:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
}
/* GHOST/OUTLINE = transparent + weißer Rand → Hover grün */
body a.pa-btn.pa-btn-ghost,
body .pa-btn.pa-btn-ghost,
body a.pa-btn.pa-btn-outline,
body .pa-btn.pa-btn-outline{
background:transparent !important;
color:#fff !important;
border-color:rgba(255,255,255,.35) !important;
}
body a.pa-btn.pa-btn-ghost:hover,
body .pa-btn.pa-btn-ghost:hover,
body a.pa-btn.pa-btn-outline:hover,
body .pa-btn.pa-btn-outline:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
}
/* Pfeil-Icon in Buttons */
body .pa-btn .arrow,
body .pa-btn svg,
body .nav-cta span{
transition:transform .18s ease !important;
}
body .pa-btn:hover .arrow,
body .pa-btn:hover svg,
body .nav-cta:hover span{
transform:translateX(3px) !important;
}
/* Button-Typo etwas kompakter */
body a.pa-btn,
body button.pa-btn,
body .pa-btn,
body .pa-btn-primary,
body .pa-btn-secondary,
body .pa-btn-ghost,
body .pa-btn-outline,
body .pa-btn-light,
body .nav-cta,
body a.nav-cta,
body .pa-hero-fs-cta a,
body .pa-story-cta a,
body .pa-mission-cta a,
body .pa-cost-teaser-cta a,
body .pa-article-teaser-cta a,
body .pa-steps-cta a,
body .pa-step-d-cta a,
body .pa-cta-band a,
body .pa-cta-band .pa-btn,
body .pa-downloads a.pa-download,
body .pa-download-btn,
body .wp-block-button__link{
font-size:12px !important;
padding:12px 22px !important;
letter-spacing:.09em !important;
}
/* =========================================================
UNIFIED BUTTON — Erweiterung auf ALLE Templates
Home, Produkt-Seiten, Projekt-Seiten, Footer, News, etc.
========================================================= */
body .btn,
body a.btn,
body .btn-primary,
body a.btn-primary,
body .btn-ghost,
body a.btn-ghost,
body .btn-secondary,
body a.btn-secondary,
body .hs-foot-cta-btn,
body a.hs-foot-cta-btn,
body .mobile-cta,
body a.mobile-cta,
body .pa-at-cta,
body a.pa-at-cta,
body .pa-subnav-cta,
body a.pa-subnav-cta,
body .pa-pill,
body a.pa-pill,
body .pj-arc-cta,
body a.pj-arc-cta,
body .pj-feat-cta,
body a.pj-feat-cta,
body .pj-poster-hover-cta,
body a.pj-poster-hover-cta,
body .announce-cta,
body a.announce-cta,
body .it-print-btn,
body a.it-print-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
padding:12px 22px !important;
border-radius:999px !important;
border:2px solid transparent !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:12px !important;
line-height:1 !important;
text-transform:uppercase !important;
letter-spacing:.09em !important;
text-decoration:none !important;
cursor:pointer !important;
transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
white-space:nowrap !important;
}
/* PRIMARY (Grün) — btn-primary, Home-CTAs, Footer-CTA */
body .btn.btn-primary,
body a.btn.btn-primary,
body .btn-primary,
body a.btn-primary,
body .hs-foot-cta-btn,
body a.hs-foot-cta-btn,
body .mobile-cta,
body a.mobile-cta,
body .pa-at-cta,
body a.pa-at-cta,
body .pj-feat-cta,
body a.pj-feat-cta,
body .announce-cta,
body a.announce-cta{
background:#76B82A !important;
color:#000 !important;
border-color:#76B82A !important;
}
body .btn.btn-primary:hover,
body a.btn.btn-primary:hover,
body .btn-primary:hover,
body .hs-foot-cta-btn:hover,
body .mobile-cta:hover,
body .pa-at-cta:hover,
body .pj-feat-cta:hover,
body .announce-cta:hover{
background:#5f9622 !important;
border-color:#5f9622 !important;
color:#000 !important;
}
/* GHOST/OUTLINE — btn-ghost, pa-pill--ghost, it-print-btn */
body .btn.btn-ghost,
body a.btn.btn-ghost,
body .btn-ghost,
body a.btn-ghost,
body .pa-pill--ghost,
body a.pa-pill--ghost,
body .it-print-btn,
body a.it-print-btn,
body .pj-arc-cta,
body a.pj-arc-cta,
body .pj-poster-hover-cta,
body a.pj-poster-hover-cta,
body .pa-subnav-cta,
body a.pa-subnav-cta{
background:transparent !important;
color:#fff !important;
border-color:rgba(255,255,255,.35) !important;
}
body .btn.btn-ghost:hover,
body .btn-ghost:hover,
body .pa-pill--ghost:hover,
body .it-print-btn:hover,
body .pj-arc-cta:hover,
body .pj-poster-hover-cta:hover,
body .pa-subnav-cta:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
}
/* Ghost auf hellem BG: dunkler Rand + schwarzer Text */
body .pa-section-light .btn.btn-ghost,
body .pa-section-light .pa-pill--ghost,
body .light-bg .btn.btn-ghost{
color:#000 !important;
border-color:rgba(0,0,0,.25) !important;
}
body .pa-section-light .btn.btn-ghost:hover,
body .pa-section-light .pa-pill--ghost:hover,
body .light-bg .btn.btn-ghost:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
}
/* play-btn ist ein Sonderfall (nicht anfassen) */
body .play-btn{
/* nichts überschreiben */
}
/* =========================================================
FINAL BUTTON-NORMALIZER
Fixe Höhe für ALLE pa-pill/pa-btn-Varianten, egal wo
Löst Height-Mismatch zwischen Primary + Ghost
========================================================= */
html body .pa-pill,
html body a.pa-pill,
html body .pa-pill--primary,
html body a.pa-pill--primary,
html body .pa-pill--ghost,
html body a.pa-pill--ghost,
html body .pa-hero-fs-cta a,
html body .pa-hero-cta a,
html body .pa-btn,
html body a.pa-btn,
html body .btn,
html body a.btn{
box-sizing:border-box !important;
min-height:44px !important;
height:44px !important;
padding:0 22px !important;
border-width:2px !important;
border-style:solid !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
line-height:1 !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:12px !important;
letter-spacing:.09em !important;
text-transform:uppercase !important;
border-radius:999px !important;
transform:none !important;
}
/* Hover: kein translateY das Alignment zerstört */
html body .pa-pill:hover,
html body .pa-pill--primary:hover,
html body .pa-pill--ghost:hover,
html body .pa-btn:hover,
html body .btn:hover{
transform:none !important;
}
/* Primary Farbe forcen */
html body .pa-pill--primary,
html body a.pa-pill--primary{
background:#76B82A !important;
color:#000 !important;
border-color:#76B82A !important;
}
html body .pa-pill--primary:hover{
background:#5f9622 !important;
border-color:#5f9622 !important;
color:#000 !important;
}
/* Ghost Farbe forcen */
html body .pa-pill--ghost,
html body a.pa-pill--ghost{
background:transparent !important;
color:#fff !important;
border-color:rgba(255,255,255,.35) !important;
}
html body .pa-pill--ghost:hover{
background:#76B82A !important;
color:#000 !important;
border-color:#76B82A !important;
}
/* Steps-CTA & andere direkte Link-Klassen (Klasse sitzt am selbst) */
html body a.pa-step-d-cta,
html body a.pa-story-cta,
html body a.pa-mission-cta,
html body a.pa-cost-teaser-cta,
html body a.pa-article-teaser-cta,
html body a.pa-steps-cta,
html body a.pa-at-cta,
html body a.pa-subnav-cta,
html body a.pa-hero-cta,
html body a.pa-hero-fs-cta,
html body a.hs-foot-cta-btn,
html body a.mobile-cta,
html body a.nav-cta,
html body a.pj-arc-cta,
html body a.pj-feat-cta,
html body a.pj-poster-hover-cta,
html body a.announce-cta,
html body a.it-print-btn{
box-sizing:border-box !important;
min-height:44px !important;
height:44px !important;
padding:0 22px !important;
border-width:2px !important;
border-style:solid !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
line-height:1 !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:12px !important;
letter-spacing:.09em !important;
text-transform:uppercase !important;
border-radius:999px !important;
text-decoration:none !important;
width:auto !important;
max-width:max-content !important;
}
/* Steps-CTA: weißer Primary-Button auf dunklem BG */
html body a.pa-step-d-cta{
background:#fff !important;
color:#000 !important;
border-color:#fff !important;
}
html body a.pa-step-d-cta:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
}
/* Header + Footer + Mobile Primary in Grün */
html body a.nav-cta,
html body a.hs-foot-cta-btn,
html body a.mobile-cta,
html body a.pa-at-cta,
html body a.pj-feat-cta,
html body a.announce-cta{
background:#76B82A !important;
color:#000 !important;
border-color:#76B82A !important;
}
html body a.nav-cta:hover,
html body a.hs-foot-cta-btn:hover,
html body a.mobile-cta:hover,
html body a.pa-at-cta:hover,
html body a.pj-feat-cta:hover,
html body a.announce-cta:hover{
background:#5f9622 !important;
border-color:#5f9622 !important;
color:#000 !important;
}
/* Ghost-Varianten */
html body a.pa-subnav-cta,
html body a.pj-arc-cta,
html body a.pj-poster-hover-cta,
html body a.it-print-btn{
background:transparent !important;
color:#fff !important;
border-color:rgba(255,255,255,.35) !important;
}
html body a.pa-subnav-cta:hover,
html body a.pj-arc-cta:hover,
html body a.pj-poster-hover-cta:hover,
html body a.it-print-btn:hover{
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
}
/* HERO-CTAs: Primary und Ghost müssen pixelgenau identisch wirken */
html body .pa-hero-fs-cta{
gap:12px !important;
align-items:center !important;
}
html body .pa-hero-fs-cta > a.pa-pill,
html body .pa-hero-fs-cta > a.pa-pill--primary,
html body .pa-hero-fs-cta > a.pa-pill--ghost{
box-sizing:border-box !important;
height:48px !important;
min-height:48px !important;
padding:0 26px !important;
border-width:2px !important;
border-style:solid !important;
border-radius:999px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:10px !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:13px !important;
letter-spacing:.1em !important;
text-transform:uppercase !important;
line-height:1 !important;
text-decoration:none !important;
transition:background .18s ease, border-color .18s ease, color .18s ease !important;
}
html body .pa-hero-fs-cta > a.pa-pill--primary{
background:#76B82A !important;
color:#000 !important;
border-color:#76B82A !important;
}
html body .pa-hero-fs-cta > a.pa-pill--primary:hover{
background:#5f9622 !important;
border-color:#5f9622 !important;
color:#000 !important;
}
html body .pa-hero-fs-cta > a.pa-pill--ghost{
background:transparent !important;
color:#fff !important;
border-color:rgba(255,255,255,.4) !important;
}
html body .pa-hero-fs-cta > a.pa-pill--ghost:hover{
background:#fff !important;
border-color:#fff !important;
color:#000 !important;
}
html body .pa-hero-fs-cta > a > span{
display:inline-block !important;
line-height:1 !important;
transition:transform .18s ease !important;
}
html body .pa-hero-fs-cta > a:hover > span{
transform:translateX(3px) !important;
}
/* =========================================================
PA-CLIENTS — Kunden-Wand (Wordmark + Kennzahl + Standort)
========================================================= */
.pa-anwendung .pa-clients{background:#06080A;padding:110px 0}
.pa-anwendung .pa-clients .pa-eye{margin:0 0 14px}
.pa-anwendung .pa-clients .pa-mega-mid{
color:#fff;
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
text-transform:uppercase;
text-align:center;
line-height:1.05;
margin:0 0 56px;
}
.pa-anwendung .pa-clients-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
border-radius:8px;
overflow:hidden;
max-width:1080px;
margin:0 auto;
}
@media(max-width:900px){.pa-anwendung .pa-clients-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pa-anwendung .pa-clients-grid{grid-template-columns:1fr}}
.pa-anwendung .pa-client{
background:#0B0E10;
padding:44px 32px 36px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
gap:14px;
transition:background .25s ease;
color:#fff;
text-decoration:none;
min-height:220px;
}
.pa-anwendung a.pa-client:hover{background:#101418}
.pa-anwendung .pa-client-logo{
height:52px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:8px;
}
.pa-anwendung .pa-client-logo img{
max-height:44px;
max-width:180px;
object-fit:contain;
filter:brightness(0) invert(1);
opacity:.85;
transition:opacity .25s ease;
}
.pa-anwendung a.pa-client:hover .pa-client-logo img{opacity:1}
.pa-anwendung .pa-client-wordmark{
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
font-size:26px;
letter-spacing:.02em;
color:#fff;
text-transform:uppercase;
line-height:1;
}
.pa-anwendung .pa-client-stat{
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
font-size:32px;
color:#76B82A;
line-height:1;
letter-spacing:-.01em;
}
.pa-anwendung .pa-client-loc{
font-family:"Roboto Condensed",sans-serif;
font-weight:500;
font-size:12px;
color:rgba(255,255,255,.55);
letter-spacing:.12em;
text-transform:uppercase;
}
/* =========================================================
PA-CASES — Fallstudien (Dedrone-Style, grosse Karten)
========================================================= */
.pa-anwendung .pa-cases{background:#06080A;padding:120px 0}
.pa-anwendung .pa-cases .pa-eye{margin:0 0 14px}
.pa-anwendung .pa-cases .pa-mega-mid{
color:#fff;
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
text-transform:uppercase;
text-align:center;
line-height:1.05;
margin:0 0 64px;
}
.pa-anwendung .pa-cases-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:24px;
max-width:1180px;
margin:0 auto;
}
@media(max-width:900px){.pa-anwendung .pa-cases-grid{grid-template-columns:1fr}}
.pa-anwendung .pa-case{
display:block;
background:#0B0E10;
border-radius:16px;
overflow:hidden;
text-decoration:none;
color:#fff;
transition:transform .28s ease, box-shadow .28s ease;
position:relative;
border:1px solid rgba(255,255,255,.06);
}
.pa-anwendung a.pa-case:hover{
transform:translateY(-4px);
box-shadow:0 24px 60px rgba(0,0,0,.5);
border-color:rgba(118,184,42,.35);
}
.pa-anwendung .pa-case-media{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
}
.pa-anwendung .pa-case-media img{
width:100%;height:100%;object-fit:cover;
transition:transform .8s ease;
}
.pa-anwendung a.pa-case:hover .pa-case-media img{transform:scale(1.04)}
.pa-anwendung .pa-case-media-ph{
width:100%;height:100%;
background:#101418;
display:flex;align-items:center;justify-content:center;
color:rgba(255,255,255,.35);
font-family:"Roboto Condensed",sans-serif;
font-size:11px;
letter-spacing:.16em;
text-transform:uppercase;
}
.pa-anwendung .pa-case-media-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%);
pointer-events:none;
}
.pa-anwendung .pa-case-body{
padding:32px 32px 34px;
display:flex;
flex-direction:column;
gap:14px;
}
.pa-anwendung .pa-case-kunde{
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:#76B82A;
}
.pa-anwendung .pa-case-titel{
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
font-size:26px;
line-height:1.15;
color:#fff;
text-transform:uppercase;
letter-spacing:-.01em;
margin:0;
}
.pa-anwendung .pa-case-stat{
font-family:"Roboto Condensed",sans-serif;
font-weight:500;
font-size:13px;
color:rgba(255,255,255,.65);
letter-spacing:.02em;
}
.pa-anwendung .pa-case-arrow{
margin-top:6px;
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
font-size:12px;
letter-spacing:.14em;
text-transform:uppercase;
color:#fff;
opacity:.75;
transition:opacity .2s ease, transform .2s ease;
}
.pa-anwendung a.pa-case:hover .pa-case-arrow{
opacity:1;
transform:translateX(4px);
color:#76B82A;
}
/* pa-clients unter Hero — kompakter Streifen, nicht mehr Grid mit Kacheln */
.pa-anwendung .pa-clients{
background:#06080A !important;
padding:44px 0 40px !important;
border-bottom:1px solid rgba(255,255,255,.05);
}
.pa-anwendung .pa-clients .pa-mega-mid{display:none !important}
.pa-anwendung .pa-clients .pa-eye{
margin:0 0 24px !important;
color:rgba(255,255,255,.5) !important;
font-size:11px !important;
letter-spacing:.24em !important;
}
.pa-anwendung .pa-clients-grid{
background:transparent !important;
border:0 !important;
border-radius:0 !important;
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:0 !important;
max-width:1180px !important;
margin:0 auto !important;
}
.pa-anwendung .pa-client{
background:transparent !important;
padding:0 40px !important;
min-height:auto !important;
gap:0 !important;
flex:0 0 auto !important;
border-right:1px solid rgba(255,255,255,.1);
}
.pa-anwendung .pa-client:last-child{border-right:0 !important}
.pa-anwendung .pa-client-logo{margin:0 !important;height:auto !important}
.pa-anwendung .pa-client-wordmark{
font-size:18px !important;
color:rgba(255,255,255,.7) !important;
letter-spacing:.06em !important;
}
.pa-anwendung a.pa-client:hover .pa-client-wordmark{color:#fff !important}
.pa-anwendung .pa-client-stat,
.pa-anwendung .pa-client-loc{display:none !important}
@media(max-width:900px){
.pa-anwendung .pa-client{padding:8px 24px !important;border:0 !important}
}
/* Sticky Sub-Nav (Herausforderungen | Systeme | Referenzen | ...) raus */
.pa-anwendung .pa-subnav{display:none !important}
/* Mission YouTube-Iframe — full-cover Container, kein Player-UI sichtbar */
.pa-anwendung .pa-mission-yt{
position:absolute;inset:0;
overflow:hidden;
pointer-events:none;
}
.pa-anwendung .pa-mission-media{position:relative;overflow:hidden}
.pa-anwendung .pa-mission-yt iframe{
position:absolute;
top:50%;left:50%;
width:177.77vh;
height:100%;
min-width:100%;
min-height:56.25vw;
transform:translate(-50%,-50%);
border:0;
}
/* =========================================================
BRANCHEN MEGA-MENU (Dedrone-Style, 3-Spalten Grid)
========================================================= */
.nav .menu li.menu-branchen{position:static}
.nav .menu li.menu-branchen > .sub-menu.sub-mega{
position:fixed;
top:auto; left:0; right:0;
width:100vw;
max-width:none;
transform:none;
background:#06080A;
border-top:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
box-shadow:0 24px 60px rgba(0,0,0,.5);
padding:44px 6vw 48px;
display:grid;
grid-template-columns:repeat(3,1fr);
grid-column-gap:64px;
grid-row-gap:32px;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .18s ease, visibility .18s ease;
z-index:9998;
}
.nav .menu li.menu-branchen:hover > .sub-menu.sub-mega,
.nav .menu li.menu-branchen:focus-within > .sub-menu.sub-mega{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head{
grid-column:1 / -1;
font-family:"Roboto Condensed",sans-serif;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
font-size:12px;
color:#76B82A;
margin:0 0 12px;
padding:0 0 12px;
border-bottom:1px solid rgba(255,255,255,.06);
display:flex;align-items:center;gap:10px;
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head::before{
content:"";
width:8px;height:14px;
background:#76B82A;
transform:skewX(-14deg);
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega > li{
list-style:none;padding:0;margin:0;
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega > li > a{
display:flex;
flex-direction:column;
gap:6px;
padding:6px 0;
text-decoration:none;
transition:transform .18s ease;
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega > li > a:hover{
transform:translateX(4px);
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega .mm-title{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:18px !important;
color:#fff !important;
text-transform:none !important;
letter-spacing:0 !important;
line-height:1.15;
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega > li > a:hover .mm-title{
color:#76B82A !important;
}
.nav .menu li.menu-branchen > .sub-menu.sub-mega .mm-desc{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:500 !important;
font-size:13px !important;
color:rgba(255,255,255,.55) !important;
text-transform:none !important;
letter-spacing:0 !important;
line-height:1.35;
}
/* FIX: alte .sub-menu transform-Regeln überschreiben für Mega-Menu */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega{
position:fixed !important;
top:auto !important;
left:0 !important;
right:0 !important;
transform:none !important;
min-width:0 !important;
padding:44px 6vw 48px !important;
border-radius:0 !important;
background:#06080A !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
header.nav .menu li.menu-branchen:hover > .sub-menu.sub-mega,
header.nav .menu li.menu-branchen:focus-within > .sub-menu.sub-mega,
header.nav .menu li.menu-item-has-children.menu-branchen:hover > .sub-menu.sub-mega,
header.nav .menu li.menu-item-has-children.menu-branchen:focus-within > .sub-menu.sub-mega{
transform:none !important;
opacity:1 !important;
pointer-events:auto !important;
visibility:visible !important;
}
/* Sub-Mega Items müssen als grid-cells rendern, nicht als sub-menu-items */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega > li{
display:block !important;
padding:0 !important;
margin:0 !important;
background:transparent !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega > li > a{
padding:6px 0 !important;
background:transparent !important;
border-radius:0 !important;
white-space:normal !important;
color:#fff !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
border:0 !important;
}
/* Mega-Menu: Grid nochmal forcieren + head span über alle Spalten */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega{
display:grid !important;
grid-template-columns:repeat(3, 1fr) !important;
grid-column-gap:64px !important;
grid-row-gap:36px !important;
max-width:1440px !important;
margin:0 auto !important;
left:0 !important; right:0 !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega > li.sub-mega-head{
grid-column:1 / -1 !important;
}
/* Mega-Menu: Hintergrund heller + subtiler Gradient */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega{
background:linear-gradient(180deg,#0F1417 0%, #0B0F12 100%) !important;
border-top:1px solid rgba(118,184,42,.12) !important;
border-bottom:1px solid rgba(255,255,255,.05) !important;
}
/* Head-Zeile mit Sub-Headline */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
align-items:flex-start !important;
padding:0 0 20px !important;
margin:0 0 20px !important;
border-bottom:1px solid rgba(255,255,255,.08) !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head::before{
content:none !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head > span:first-child{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.14em !important;
font-size:12px !important;
color:#76B82A !important;
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head > span:first-child::before{
content:"";
width:8px;height:14px;
background:#76B82A;
transform:skewX(-14deg);
display:inline-block;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-sub{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:none !important;
font-size:22px !important;
color:#fff !important;
letter-spacing:-.005em !important;
line-height:1.15 !important;
}
/* Fix: Chevron INLINE, nicht als eigene Zeile */
header.nav .menu li.menu-item-has-children > a{
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
white-space:nowrap !important;
}
header.nav .menu li.menu-item-has-children > a::after{
display:inline-block !important;
margin-left:0 !important;
vertical-align:middle !important;
position:static !important;
content:"⌄" !important;
font-size:11px !important;
line-height:1 !important;
opacity:.6;
}
/* Kompaktere Menu-Item Abstände */
header.nav .menu{gap:4px !important}
header.nav .menu > li > a{padding-left:14px !important; padding-right:14px !important}
header.nav .menu{gap:0 !important}
header.nav .menu > li > a{padding-left:8px !important; padding-right:8px !important}
/* Menu-Items: kompakter, weniger vertikales Padding */
header.nav .menu > li > a{
min-height:0 !important;
height:auto !important;
padding-top:6px !important;
padding-bottom:6px !important;
}
header.nav .wrap{height:56px !important}
/* Mega-Menu: weniger Abstand von Header zu Items + kompakteres Grid */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega,
header.nav .menu li.menu-mega > .sub-menu.sub-mega{
padding-top:22px !important;
padding-bottom:26px !important;
grid-row-gap:22px !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega .sub-mega-head,
header.nav .menu li.menu-mega > .sub-menu.sub-mega .sub-mega-head{
padding:0 0 12px !important;
margin:0 0 8px !important;
}
/* Mega-Menu: NUR bei .open sichtbar — kein Hover-Trigger mehr */
header.nav .menu li.menu-branchen:hover > .sub-menu.sub-mega,
header.nav .menu li.menu-branchen:focus-within > .sub-menu.sub-mega,
header.nav .menu li.menu-mega:hover > .sub-menu.sub-mega,
header.nav .menu li.menu-mega:focus-within > .sub-menu.sub-mega,
header.nav .menu li.menu-item-has-children:hover > .sub-menu,
header.nav .menu li.menu-item-has-children:focus-within > .sub-menu{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
header.nav .menu li.menu-mega.open > .sub-menu.sub-mega,
header.nav .menu li.menu-branchen.open > .sub-menu.sub-mega,
header.nav .menu li.menu-item-has-children.open > .sub-menu{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
/* Chevron dreht sich nur bei .open */
header.nav .menu li.menu-item-has-children:hover > a::after{transform:none !important}
header.nav .menu li.menu-item-has-children.open > a::after{transform:rotate(180deg) !important}
/* Sub-Item hover: nur Farbwechsel, kein translateX */
header.nav .menu li.menu-branchen > .sub-menu.sub-mega > li > a:hover,
header.nav .menu li.menu-mega > .sub-menu.sub-mega > li > a:hover{
transform:none !important;
}
header.nav .menu li.menu-branchen > .sub-menu.sub-mega > li > a:hover .mm-title,
header.nav .menu li.menu-mega > .sub-menu.sub-mega > li > a:hover .mm-title{
color:#76B82A !important;
}
/* Nochmal alle Hover-Reveals mit stärkerer Spec deaktivieren */
html body header.nav .menu li:hover > .sub-menu{
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
}
html body header.nav .menu li.open > .sub-menu{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
/* Chevron nur bei .open drehen */
html body header.nav .menu li.menu-item-has-children > a::after{transform:none !important; transition:transform .18s ease !important}
html body header.nav .menu li.menu-item-has-children:hover > a::after{transform:none !important}
html body header.nav .menu li.menu-item-has-children.open > a::after{transform:rotate(180deg) !important}
/* Mega-Menu: unten mehr Luft — spürbarer Abschluss */
html body header.nav .menu li.menu-mega.open > .sub-menu.sub-mega,
html body header.nav .menu li.menu-branchen.open > .sub-menu.sub-mega{
padding-top:26px !important;
padding-bottom:64px !important;
}
/* =========================================================
MOBILE MENU (Dedrone-Style Accordion)
========================================================= */
.mobile-panel{
padding:80px 0 40px !important;
background:#0A0C0F !important;
width:min(92vw, 420px) !important;
}
.mobile-panel > .menu,
.mobile-panel > ul{
list-style:none;
margin:0;
padding:0;
display:block;
}
.mobile-panel li{list-style:none; margin:0; padding:0; position:relative}
/* Parent-Items als große Touch-Buttons */
.mobile-panel li > a{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:12px !important;
padding:18px 28px !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:16px !important;
letter-spacing:.02em !important;
text-transform:none !important;
color:#fff !important;
border-bottom:1px solid rgba(255,255,255,.06) !important;
background:transparent !important;
border-radius:0 !important;
border-top:0 !important;
border-left:0 !important;
border-right:0 !important;
min-height:0 !important;
height:auto !important;
white-space:normal !important;
text-decoration:none !important;
transition:background .18s ease, color .18s ease;
}
.mobile-panel li.menu-item-has-children > a::after{
content:"⌄" !important;
font-size:14px !important;
opacity:.5 !important;
transition:transform .2s ease !important;
display:inline-block !important;
margin-left:auto !important;
}
.mobile-panel li.menu-item-has-children.open > a::after{
transform:rotate(180deg) !important;
opacity:1 !important;
color:#76B82A !important;
}
/* Sub-Menu: standardmäßig zu, öffnet bei .open */
.mobile-panel .sub-menu{
display:none !important;
list-style:none;
margin:0;
padding:0;
background:#06080A;
border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-panel li.open > .sub-menu{
display:block !important;
}
/* Sub-Item: Titel + Description */
.mobile-panel .sub-menu li > a{
padding:14px 28px 16px !important;
border-bottom:1px solid rgba(255,255,255,.04) !important;
align-items:flex-start !important;
flex-direction:column !important;
gap:4px !important;
}
.mobile-panel .sub-menu .mm-title{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:15px !important;
color:#fff !important;
text-transform:none !important;
letter-spacing:0 !important;
line-height:1.2 !important;
}
.mobile-panel .sub-menu .mm-desc{
font-family:"Roboto Condensed",sans-serif !important;
font-weight:500 !important;
font-size:12px !important;
color:rgba(255,255,255,.55) !important;
text-transform:none !important;
letter-spacing:0 !important;
line-height:1.3 !important;
}
/* Bottom CTA: grüne Pill */
.mobile-panel .mobile-cta{
display:inline-flex !important;
margin:32px 28px 0 !important;
padding:14px 26px !important;
background:#76B82A !important;
color:#000 !important;
border:2px solid #76B82A !important;
border-radius:999px !important;
font-family:"Roboto Condensed",sans-serif !important;
font-weight:800 !important;
font-size:13px !important;
text-transform:uppercase !important;
letter-spacing:.1em !important;
text-decoration:none !important;
border-bottom:2px solid #76B82A !important;
gap:8px !important;
align-items:center !important;
justify-content:center !important;
}
/* Kein Sub-Nav mehr sichtbar auf mobile-panel Standard */
.mobile-panel li.menu-item-has-children > a{padding-right:24px !important}
/* Chevron nur bei mobile */
@media (max-width:900px){
.mobile-panel{padding-top:80px !important}
}
/* =========================================================
MISSION-SECTION — Dedrone-Style: Bild dominanter, Vignette stärker
========================================================= */
.pa-anwendung .pa-mission{
padding:0 !important;
background:#000 !important;
min-height:680px !important;
}
.pa-anwendung .pa-mission-grid{
grid-template-columns:1.15fr 1fr !important;
min-height:680px !important;
align-items:stretch !important;
}
.pa-anwendung .pa-mission-media{
min-height:680px !important;
background:#000 !important;
overflow:hidden !important;
position:relative !important;
}
.pa-anwendung .pa-mission-media img,
.pa-anwendung .pa-mission-media video,
.pa-anwendung .pa-mission-yt iframe{
width:100% !important;
height:100% !important;
object-fit:cover !important;
position:absolute !important;
inset:0 !important;
}
/* Stärkere Vignette: breiter, weicher */
.pa-anwendung .pa-mission-fade{
position:absolute !important;
top:0; bottom:0; right:-1px !important;
left:auto !important;
width:55% !important;
background:linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.15) 20%,
rgba(0,0,0,.5) 55%,
rgba(0,0,0,.92) 85%,
#000 100%) !important;
pointer-events:none !important;
z-index:2 !important;
}
/* Text-Bereich pur schwarz */
.pa-anwendung .pa-mission-text{
background:#000 !important;
padding:120px 80px 120px 40px !important;
min-height:680px !important;
}
@media (max-width:900px){
.pa-anwendung .pa-mission{min-height:0 !important}
.pa-anwendung .pa-mission-grid{grid-template-columns:1fr !important; min-height:0 !important}
.pa-anwendung .pa-mission-media{aspect-ratio:16/10 !important; min-height:0 !important; height:auto !important}
.pa-anwendung .pa-mission-media img,
.pa-anwendung .pa-mission-media video{position:absolute !important}
.pa-anwendung .pa-mission-fade{
inset:auto 0 0 0 !important;
width:100% !important;
height:50% !important;
background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.8) 60%, #000 100%) !important;
}
.pa-anwendung .pa-mission-text{padding:56px 24px !important; min-height:0 !important}
}
/* Mission-Section: Dedrone-Style-Anpassung rückgängig — Original wiederherstellen */
.pa-anwendung .pa-mission{
background:#0B0D10 !important;
padding:0 !important;
min-height:0 !important;
}
.pa-anwendung .pa-mission-grid{
grid-template-columns:1fr 1fr !important;
min-height:600px !important;
}
.pa-anwendung .pa-mission-media{
min-height:520px !important;
background:#13181D !important;
}
.pa-anwendung .pa-mission-fade{
width:35% !important;
left:auto !important;
right:0 !important;
background:linear-gradient(90deg,transparent 0%,rgba(11,13,16,.6) 60%,#0B0D10 100%) !important;
}
.pa-anwendung .pa-mission-text{
background:#0B0D10 !important;
padding:100px 80px 100px 60px !important;
min-height:0 !important;
}
/* YouTube-Iframe in Mission — sauberes cover-cropping ohne Ecken */
.pa-anwendung .pa-mission-yt{
position:absolute !important;
inset:0 !important;
overflow:hidden !important;
z-index:1;
}
.pa-anwendung .pa-mission-yt iframe{
position:absolute !important;
top:50% !important;
left:50% !important;
width:max(100%, calc(100% * 16 / 9)) !important;
height:max(100%, calc(100% * 9 / 16 * 100 / 100)) !important;
min-width:100% !important;
min-height:100% !important;
aspect-ratio:16 / 9 !important;
transform:translate(-50%,-50%) !important;
border:0 !important;
pointer-events:none !important;
}
/* =========================================================
STEPS-D — Dedrone-Style: Bild dominant, cinematische Vignette
========================================================= */
.pa-anwendung .pa-step-d{
grid-template-columns:5fr 7fr !important;
gap:0 !important;
align-items:stretch !important;
min-height:520px !important;
}
.pa-anwendung .pa-step-d-text{
padding:80px 60px 80px 0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:center !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{padding:80px 0 80px 60px !important}
.pa-anwendung .pa-step-d-media{
border-radius:0 !important;
aspect-ratio:auto !important;
min-height:520px !important;
height:100% !important;
background:#000 !important;
position:relative !important;
overflow:hidden !important;
}
.pa-anwendung .pa-step-d-media img,
.pa-anwendung .pa-step-d-media video{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
/* Vignette: fade zum Text hin */
.pa-anwendung .pa-step-d-media::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:2;
}
.pa-anwendung .pa-step-d--left .pa-step-d-media::after{
background:linear-gradient(-90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.15) 30%,
rgba(0,0,0,.65) 75%,
rgba(0,0,0,.95) 100%);
}
.pa-anwendung .pa-step-d--right .pa-step-d-media::after{
background:linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,.15) 30%,
rgba(0,0,0,.65) 75%,
rgba(0,0,0,.95) 100%);
}
/* Placeholder-Style anpassen */
.pa-anwendung .pa-step-d-media-ph{
border:0 !important;
background:#0B0D10 !important;
width:100% !important;
height:100% !important;
min-height:520px !important;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d{grid-template-columns:1fr !important; min-height:0 !important}
.pa-anwendung .pa-step-d-text{padding:40px 0 !important}
.pa-anwendung .pa-step-d--right .pa-step-d-text{padding:40px 0 !important}
.pa-anwendung .pa-step-d-media{aspect-ratio:16/10 !important; min-height:0 !important; height:auto !important}
.pa-anwendung .pa-step-d-media::after{display:none}
}
/* Steps: Bild bis Bildschirm-Rand + Vignette komplett schwarz */
.pa-anwendung .pa-steps-d .pa-wrap{max-width:none !important; padding:0 !important}
.pa-anwendung .pa-steps-d-list{padding:0 !important; margin:0 auto !important; max-width:none !important}
.pa-anwendung .pa-step-d{
max-width:none !important;
padding:0 !important;
}
/* --left: Bild rechts, geht bis zum rechten Rand */
.pa-anwendung .pa-step-d--left .pa-step-d-media{
margin-right:0 !important;
margin-left:0 !important;
}
.pa-anwendung .pa-step-d--left .pa-step-d-text{
padding-left:max(24px, calc((100vw - 1180px) / 2 + 24px)) !important;
padding-right:60px !important;
}
/* --right: Bild links, geht bis zum linken Rand */
.pa-anwendung .pa-step-d--right .pa-step-d-media{
margin-left:0 !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-right:max(24px, calc((100vw - 1180px) / 2 + 24px)) !important;
padding-left:60px !important;
}
/* Vignette voll schwarz an Text-Seite */
.pa-anwendung .pa-step-d--left .pa-step-d-media::after{
background:linear-gradient(-90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,.6) 80%,
#000 100%) !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-media::after{
background:linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 40%,
rgba(0,0,0,.6) 80%,
#000 100%) !important;
}
/* Steps-Section: dark background rundum */
.pa-anwendung .pa-steps-d{
background:#000 !important;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:24px !important;
padding-right:24px !important;
}
}
/* Steps: Layout auf max 1600px begrenzen, damit Ultrawide nicht auseinanderreißt */
.pa-anwendung .pa-steps-d .pa-wrap{max-width:1600px !important; margin:0 auto !important; padding:0 !important}
.pa-anwendung .pa-step-d--left .pa-step-d-text{
padding-left:60px !important;
padding-right:60px !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:60px !important;
padding-right:60px !important;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:24px !important;
padding-right:24px !important;
}
}
/* Steps: --right (Bild links) muss dieselbe 7fr Bild + 5fr Text Proportion haben */
.pa-anwendung .pa-step-d--right{
grid-template-columns:7fr 5fr !important;
}
.pa-anwendung .pa-step-d--left{
grid-template-columns:5fr 7fr !important;
}
/* Steps: mehr Padding außen um Container */
.pa-anwendung .pa-steps-d .pa-wrap{
padding-left:60px !important;
padding-right:60px !important;
}
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:20px !important;
padding-right:40px !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:40px !important;
padding-right:20px !important;
}
@media(max-width:900px){
.pa-anwendung .pa-steps-d .pa-wrap{padding:0 24px !important}
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{padding:24px 0 !important}
}
/* Steps: Bild bricht aus pa-wrap-Padding aus bis Bildschirm-Rand */
.pa-anwendung .pa-step-d--left .pa-step-d-media{
margin-right:calc(-1 * max(0px, (100vw - 1600px) / 2 + 60px)) !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-media{
margin-left:calc(-1 * max(0px, (100vw - 1600px) / 2 + 60px)) !important;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d--left .pa-step-d-media,
.pa-anwendung .pa-step-d--right .pa-step-d-media{margin:0 !important}
}
/* Steps: Chevron-Grafik als Overlay über dem Bild — Dedrone-Style */
.pa-anwendung .pa-step-d-media::before{
content:"";
position:absolute;
bottom:24px;
z-index:3;
width:90px;
height:100px;
background:url('/wp-content/themes/highstep-2026/assets/img/step-chevrons.svg') no-repeat center center;
background-size:contain;
pointer-events:none;
opacity:.85;
}
/* Chevron sitzt auf der Text-Seite des Bildes */
.pa-anwendung .pa-step-d--left .pa-step-d-media::before{
left:32px;
}
.pa-anwendung .pa-step-d--right .pa-step-d-media::before{
right:32px;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d-media::before{
width:64px; height:70px; bottom:16px;
left:16px !important; right:auto !important;
}
}
/* Steps: pa-wrap ohne padding, Text bekommt eigenes padding-left/right */
.pa-anwendung .pa-steps-d .pa-wrap{
padding:0 !important;
max-width:none !important;
}
.pa-anwendung .pa-step-d--left .pa-step-d-media,
.pa-anwendung .pa-step-d--right .pa-step-d-media{
margin:0 !important;
}
/* Text — asymmetrisch, sitzt außen mit max-width für Ultrawide */
.pa-anwendung .pa-step-d--left .pa-step-d-text{
padding-left:max(40px, calc((100vw - 1600px) / 2 + 60px)) !important;
padding-right:60px !important;
max-width:none !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-right:max(40px, calc((100vw - 1600px) / 2 + 60px)) !important;
padding-left:60px !important;
max-width:none !important;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:24px !important;
padding-right:24px !important;
}
}
/* Steps-Text: mehr Padding außen — Minimum 100px */
.pa-anwendung .pa-step-d--left .pa-step-d-text{
padding-left:max(100px, calc((100vw - 1600px) / 2 + 100px)) !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-right:max(100px, calc((100vw - 1600px) / 2 + 100px)) !important;
}
@media(max-width:900px){
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-left:24px !important;
padding-right:24px !important;
}
}
/* Steps: auf breiten Viewports Text nicht auseinanderreißen */
.pa-anwendung .pa-step-d{
max-width:1800px !important;
margin:0 auto !important;
}
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-top:80px !important;
padding-bottom:80px !important;
}
.pa-anwendung .pa-step-d--left .pa-step-d-text{
padding-left:min(200px, max(60px, calc((100vw - 1800px) / 2 + 80px))) !important;
padding-right:40px !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding-right:min(200px, max(60px, calc((100vw - 1800px) / 2 + 80px))) !important;
padding-left:40px !important;
}
.pa-anwendung .pa-step-d-desc,
.pa-anwendung .pa-step-d-title{
max-width:560px !important;
}
.pa-anwendung .pa-step-d-headline{max-width:560px !important}
@media(max-width:900px){
.pa-anwendung .pa-step-d{max-width:none !important}
.pa-anwendung .pa-step-d--left .pa-step-d-text,
.pa-anwendung .pa-step-d--right .pa-step-d-text{
padding:32px 24px !important;
}
}
/* Chevron-Overlay: über die Vignette legen */
.pa-anwendung .pa-step-d-media::before{z-index:4 !important}
/* Chevron: größer, halb über die Bildkante hinaus, mit Glow */
.pa-anwendung .pa-step-d-media::before{
width:120px !important;
height:135px !important;
bottom:40px !important;
filter:
drop-shadow(0 0 24px rgba(118,184,42,.9))
drop-shadow(0 0 48px rgba(118,184,42,.6))
drop-shadow(0 0 80px rgba(118,184,42,.35)) !important;
opacity:1 !important;
z-index:5 !important;
}
/* Positionierung: Chevron ragt halb aus dem Bild in den schwarzen Text-Bereich */
.pa-anwendung .pa-step-d--left .pa-step-d-media::before{
left:-60px !important; /* halb außerhalb des Bildes links (=zum Text hin) */
right:auto !important;
}
.pa-anwendung .pa-step-d--right .pa-step-d-media::before{
right:-60px !important; /* halb außerhalb des Bildes rechts (=zum Text hin) */
left:auto !important;
}
/* Wichtig: pa-step-d-media darf overflow nicht clippen */
.pa-anwendung .pa-step-d-media{overflow:visible !important}
.pa-anwendung .pa-step-d-media img,
.pa-anwendung .pa-step-d-media video{
clip-path:inset(0) !important; /* aber Bild selbst weiterhin geclippt */
}
@media(max-width:900px){
.pa-anwendung .pa-step-d-media::before{
width:80px !important; height:88px !important; bottom:20px !important;
left:12px !important; right:auto !important;
}
.pa-anwendung .pa-step-d-media{overflow:hidden !important}
}
/* Chevron: kleiner + horizontal wiederholend (Dedrone-Style Zickzack-Kette) */
.pa-anwendung .pa-step-d-media::before{
width:100% !important;
height:32px !important;
bottom:-16px !important;
left:0 !important;
right:0 !important;
background:url('/wp-content/themes/highstep-2026/assets/img/step-chevrons.svg') repeat-x center center !important;
background-size:auto 32px !important;
filter:
drop-shadow(0 0 12px rgba(118,184,42,.9))
drop-shadow(0 0 24px rgba(118,184,42,.5)) !important;
opacity:1 !important;
z-index:5 !important;
}
.pa-anwendung .pa-step-d-media{overflow:visible !important}
@media(max-width:900px){
.pa-anwendung .pa-step-d-media::before{
height:20px !important;
bottom:-10px !important;
background-size:auto 20px !important;
}
}
/* Chevron dezent, kein Glow */
.pa-anwendung .pa-step-d-media::before{
filter:none !important;
opacity:.6 !important;
}
/* =========================================================
MOBILE FIX: Steps + Mission auf 1-Column stapeln
========================================================= */
@media(max-width:900px){
/* Steps stapeln — höchste Spec */
html body .pa-anwendung .pa-step-d,
html body .pa-anwendung .pa-step-d--left,
html body .pa-anwendung .pa-step-d--right{
display:block !important;
grid-template-columns:1fr !important;
min-height:0 !important;
max-width:none !important;
padding:0 !important;
}
html body .pa-anwendung .pa-step-d-media{
width:100vw !important;
max-width:100% !important;
height:auto !important;
min-height:0 !important;
aspect-ratio:16/10 !important;
margin:0 !important;
order:1 !important;
display:block !important;
}
html body .pa-anwendung .pa-step-d-text{
width:100% !important;
max-width:100% !important;
padding:32px 24px 40px !important;
order:2 !important;
display:block !important;
}
html body .pa-anwendung .pa-step-d-desc,
html body .pa-anwendung .pa-step-d-title,
html body .pa-anwendung .pa-step-d-headline{max-width:100% !important}
html body .pa-anwendung .pa-step-d-num{font-size:28px !important}
html body .pa-anwendung .pa-step-d-title{font-size:22px !important}
html body .pa-anwendung .pa-step-d-media::after,
html body .pa-anwendung .pa-step-d-media::before{display:none !important}
/* Mission stapeln */
html body .pa-anwendung .pa-mission,
html body .pa-anwendung .pa-mission-grid{
display:block !important;
grid-template-columns:1fr !important;
min-height:0 !important;
}
html body .pa-anwendung .pa-mission-media{
width:100% !important;
aspect-ratio:16/10 !important;
min-height:0 !important;
height:auto !important;
}
html body .pa-anwendung .pa-mission-text{
padding:40px 24px !important;
min-height:0 !important;
max-width:100% !important;
}
html body .pa-anwendung .pa-mission-h{font-size:28px !important; line-height:1.15 !important}
html body .pa-anwendung .pa-mission-fade{display:none !important}
}
/* Extra small (unter 480px) */
@media(max-width:480px){
html body .pa-anwendung .pa-step-d-text,
html body .pa-anwendung .pa-mission-text{padding-left:20px !important; padding-right:20px !important}
}
/* Mobile: nav-cta Button durch Icon-Only ersetzen */
@media(max-width:900px){
header.nav .nav-cta{
width:44px !important;
height:44px !important;
min-height:44px !important;
padding:0 !important;
border-radius:50% !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:0 !important;
letter-spacing:0 !important;
background:#76B82A !important;
border-color:#76B82A !important;
color:#000 !important;
gap:0 !important;
position:relative;
}
header.nav .nav-cta > span{display:none !important}
/* Telefon-Icon via ::after (SVG in url-encoded) */
header.nav .nav-cta::after{
content:"" !important;
display:block !important;
width:20px !important;
height:20px !important;
background:url("data:image/svg+xml;utf8,") no-repeat center center !important;
background-size:contain !important;
transform:none !important;
opacity:1 !important;
}
}
/* Mobile: nav-cta als plain weißes Icon (kein Hintergrund) */
@media(max-width:900px){
header.nav .nav-cta{
background:transparent !important;
border:0 !important;
border-color:transparent !important;
width:44px !important;
height:44px !important;
padding:0 !important;
border-radius:0 !important;
color:#fff !important;
}
header.nav .nav-cta::after{
background:url("data:image/svg+xml;utf8,") no-repeat center center !important;
width:24px !important;
height:24px !important;
}
}
/* Mobile: Bild IMMER oben, Text drunter (egal ob --left/--right) */
@media(max-width:900px){
html body .pa-anwendung .pa-step-d,
html body .pa-anwendung .pa-step-d--left,
html body .pa-anwendung .pa-step-d--right{
display:flex !important;
flex-direction:column !important;
}
html body .pa-anwendung .pa-step-d .pa-step-d-media,
html body .pa-anwendung .pa-step-d--left .pa-step-d-media,
html body .pa-anwendung .pa-step-d--right .pa-step-d-media{order:1 !important}
html body .pa-anwendung .pa-step-d .pa-step-d-text,
html body .pa-anwendung .pa-step-d--left .pa-step-d-text,
html body .pa-anwendung .pa-step-d--right .pa-step-d-text{order:2 !important}
}
/* Mobile: pa-kp (Ansprechpartner-Widget) stapelt vertikal */
@media(max-width:900px){
html body .pa-anwendung .pa-kp-widget,
html body .pa-product .pa-kp-widget{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
text-align:center !important;
padding:32px 24px !important;
gap:20px !important;
max-width:none !important;
}
html body .pa-anwendung .pa-kp-photo,
html body .pa-product .pa-kp-photo{
width:120px !important;
height:120px !important;
flex:0 0 auto !important;
margin:0 auto !important;
}
html body .pa-anwendung .pa-kp-photo img,
html body .pa-product .pa-kp-photo img{width:100% !important; height:100% !important; object-fit:cover !important}
html body .pa-anwendung .pa-kp-info,
html body .pa-product .pa-kp-info{
width:100% !important;
text-align:center !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
html body .pa-anwendung .pa-kp-name,
html body .pa-product .pa-kp-name{font-size:22px !important; text-align:center !important}
html body .pa-anwendung .pa-kp-role,
html body .pa-product .pa-kp-role{text-align:center !important}
html body .pa-anwendung .pa-kp-note,
html body .pa-product .pa-kp-note{text-align:center !important; max-width:340px !important}
html body .pa-anwendung .pa-kp-actions,
html body .pa-product .pa-kp-actions{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
align-items:stretch !important;
width:100% !important;
max-width:280px !important;
margin:16px auto 0 !important;
}
html body .pa-anwendung .pa-kp-actions a,
html body .pa-product .pa-kp-actions a{width:100% !important; justify-content:center !important}
}
/* Mobile: Telefon-Icon direkt neben Burger */
@media(max-width:900px){
header.nav .wrap{gap:0 !important}
header.nav .nav-cta{margin-left:auto !important; margin-right:0 !important}
header.nav .burger{margin-left:4px !important}
}
/* Hero-Slider Text weiß + dunklere Vignette */
.hero h1, .hero h1 .accent, .hero .eyebrow, .hero-sub{color:#fff !important}
.hero-bg::after{
background:
linear-gradient(180deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.75) 100%),
linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%) !important;
}
.hero h1{max-width:28ch !important}
.hero-sub{max-width:78ch !important}
.hero .hero-controls{position:absolute !important;right:32px !important;bottom:30px !important;z-index:20 !important;display:flex !important;opacity:1 !important;visibility:visible !important}
.hero .scroll-hint{position:absolute !important;left:32px !important;bottom:30px !important;z-index:20 !important;display:flex !important;opacity:1 !important;visibility:visible !important}
.hero .hero-slide .wrap{padding-bottom:120px !important}
/* Announcement-Bar dunkel */
.announce{background:#0B0D10 !important;color:#fff !important;border-bottom:1px solid rgba(118,184,42,.35) !important}
.announce p, .announce p b{color:#fff !important}
.announce p b{color:#76B82A !important;font-weight:800 !important;letter-spacing:.04em !important;text-transform:uppercase !important}
.announce-cta{background:transparent !important;color:#fff !important;border:0 !important;border-radius:0 !important;padding:0 !important;text-decoration:underline !important;text-underline-offset:4px !important;font-weight:700 !important;font-size:13px !important;letter-spacing:.05em !important;text-transform:uppercase !important}
.announce-cta:hover{color:#76B82A !important;background:transparent !important;transform:none !important}
.announce-close{color:#fff !important;opacity:.7 !important}
.announce-close:hover{opacity:1 !important}
/* Branchen-Section (.ab-sec) — kompakt wie News */
.ab-sec{padding:60px 0 80px !important;background:#0B0D10;color:#fff;border-top:1px solid rgba(255,255,255,.08);position:relative}
.ab-sec .ab-wrap{max-width:1280px !important; padding:0 32px !important}
.ab-sec .ab-head{max-width:74ch !important; margin-bottom:40px !important}
.ab-sec .ab-head .display{font-size:clamp(32px, 5vw, 68px) !important;line-height:1.06 !important;letter-spacing:-.015em !important;margin:18px 0 0 !important;max-width:none !important}
/* Products-Section (#system) — kompakt wie News */
#system .sec-head{max-width:74ch !important; margin-bottom:40px}
#system .sec-head .display{font-size:clamp(32px, 5vw, 68px) !important;line-height:1.06 !important;letter-spacing:-.015em !important;margin:18px 0 0 !important;max-width:none !important}
section#system{padding-top:60px !important; padding-bottom:80px !important}
/* Products-Cards Eyebrow (01 — Schiene) weg */
.prod .prod-body .idx{display:none !important}
/* ==========================================================================
-Wrapper aus dem Layout nehmen (WebP-Ausgabe via hs_picture()).
display:contents laesst gar keine Box erzeugen: das ![]()
bleibt
Layout- und Paint-Kind seines urspruenglichen Elternelements. Damit greifen
alle bestehenden Regeln (height:100%, Ken-Burns-transform, Stacking) genau
wie vor der Umstellung auf . Ein positionierter Wrapper wuerde sich
dagegen in den Stacking-Kontext des Heros schieben und das Bild verdecken.
========================================================================== */
picture.hs-picture{display:contents}
/* ==========================================================================
Hinweis-Leiste: CTA als Textlink statt Pill.
Direkt darunter sitzt der gruene Header-Button „Beratung anfragen" — zwei
gleiche Pills uebereinander konkurrieren miteinander. Der obere wird daher
zum fett unterstrichenen Weiss-Link zurueckgenommen.
========================================================================== */
/* Text und Link sind zwei getrennte Flex-Items. Ohne Baseline-Ausrichtung
zentriert der Container beide einzeln und der Link sitzt zu hoch. */
html body .announce p{align-items:baseline !important}
html body .announce-cta,
html body a.announce-cta{
/* Elternelement ist ein Flex-Container: inline wuerde zu block blockifiziert
und der Link bekaeme die volle Zeilenhoehe. inline-block + align-self haelt
ihn auf der Textlinie. */
display:inline-block !important;
align-self:baseline !important;
height:auto !important;
/* Das globale Button-System setzt min-height:44px fuer Pill-Buttons. Beim
Textlink erzeugt das einen 44px hohen Kasten, dessen Text oben sitzt --
das mittig zentrierte Schliessen-x wirkt dadurch nach unten versetzt. */
min-height:0 !important;
padding:0 !important;
border:0 !important;
border-radius:0 !important;
background:none !important;
color:#fff !important;
font-family:inherit !important;
font-size:inherit !important;
line-height:inherit !important;
font-weight:800 !important;
text-transform:none !important;
letter-spacing:normal !important;
text-decoration:underline !important;
text-decoration-thickness:2px !important;
text-underline-offset:3px !important;
transform:none !important;
}
html body .announce-cta:hover,
html body a.announce-cta:hover{
color:#fff !important;
background:none !important;
text-decoration-color:#76B82A !important;
}
/* ==========================================================================
Hero der Branchenseiten: Ken-Burns-Zoom aus.
Ueber dem Bild lief eine Zoomfahrt (scale 1.05 -> 1.14), die dauerhaft
zwischen 5 und 14 Prozent des Motivs aus dem Bild schob — zusaetzlich zum
Anschnitt, der ohnehin entsteht, weil die Hero-Flaeche breiter proportioniert
ist als die 16:9-Motive.
Ein randloser Hero ueber der Falz kann ein 16:9-Bild nicht vollstaendig
zeigen: bei 1440px Breite braeuchte er 810px Hoehe, nach Hinweisleiste,
Topbar und Header stehen rund 620px zur Verfuegung. Ohne den Zoom ist der
sichtbare Ausschnitt aber so gross wie geometrisch moeglich.
========================================================================== */
@media (min-width:961px){
.pa-anwendung .pa-hero--fs .pa-hero-bg-media{
animation:none !important;
transform:none !important;
}
}
/* ==========================================================================
Testimonial-Slider als Kartenreihe.
Track-Mechanik wie beim Meet-Karussell; Karten mit gruener Kontur,
Anfuehrungszeichen oben und Logo- bzw. Namenszeile unten.
========================================================================== */
.ts .sec-head{text-align:center;max-width:760px;margin:0 auto}
.ts .ts-sub{color:var(--muted);margin:16px auto 0;max-width:620px}
.ts-carousel{position:relative;margin-top:48px}
.ts-track{
display:flex;gap:20px;overflow-x:auto;
scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
padding:6px clamp(20px,calc((100vw - var(--maxw))/2 + 32px),320px);
}
.ts-track::-webkit-scrollbar{display:none}
.ts-card{
position:relative;
flex:0 0 clamp(280px,32vw,420px);
min-height:clamp(380px,42vw,460px);
scroll-snap-align:center;
display:flex;flex-direction:column;
border:1px solid rgba(118,184,42,.4);
border-radius:16px;
background:rgba(255,255,255,.02);
padding:32px 30px 30px;
text-align:center;
}
.ts-mark{
display:block;
font-family:Georgia,'Times New Roman',serif;
font-size:64px;line-height:.8;
color:var(--accent);
margin-bottom:8px;
}
/* Zitat mittig in der Karte, Fusszeile bleibt unten buendig */
.ts-quote{
flex:1;display:flex;align-items:center;justify-content:center;
margin:0;border:0;padding:0;
color:var(--muted);
font-size:16px;line-height:1.6;
}
.ts-foot{margin-top:26px;min-height:52px;display:grid;place-items:center}
.ts-logo{max-height:44px;max-width:70%;width:auto;object-fit:contain}
.ts-by{margin:0;color:var(--muted-2);font-size:13.5px;letter-spacing:.02em}
.ts-by b{color:var(--ink);font-weight:700}
.ts-arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:6;
width:50px;height:50px;border-radius:50%;
background:#fff;color:#0B0D10;border:0;cursor:pointer;
font-size:26px;line-height:1;display:grid;place-items:center;
box-shadow:0 8px 28px rgba(0,0,0,.35);
transition:transform .2s,background .2s,color .2s;
}
.ts-arrow:hover{background:var(--accent);transform:translateY(-50%) scale(1.06)}
.ts-arrow.prev{left:18px}
.ts-arrow.next{right:18px}
.ts-dots{display:flex;justify-content:center;gap:9px;margin-top:28px}
.ts-dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:background .2s,transform .2s}
.ts-dots button.active{background:var(--accent);transform:scale(1.3)}
[data-theme="light"] .ts-card{background:rgba(0,0,0,.02)}
@media (max-width:640px){
.ts-card{flex-basis:min(84vw,360px);padding:26px 22px 24px}
.ts-arrow{display:none}
}
/* Hinweisleiste kompakter: ohne den 44px-Kasten reicht die Zeilenhoehe. */
.announce .wrap{padding-top:10px !important;padding-bottom:10px !important}
/* ==========================================================================
Referenzen-Sektion: Leitprojekt als Split, darunter kompakte Karten.
Der Text liegt bewusst NEBEN bzw. UNTER dem Bild, nie darauf. Damit
entfaellt der abdunkelnde Verlauf, der die Motive vorher geschluckt hat,
und die Lesbarkeit haengt nicht mehr davon ab, wie hell das Foto an der
Stelle gerade ist. Die Kennzahl aus den Eckdaten fuehrt jede Karte an.
========================================================================== */
/* ---- Kennzahl ---- */
.hs-ref-stat{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.hs-ref-stat b{
font-family:'Roboto Condensed',sans-serif;font-weight:800;
font-size:clamp(40px,4.6vw,64px);line-height:.92;letter-spacing:-.02em;
color:var(--accent);
}
.hs-ref-stat span{
font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted-2);font-weight:700;
}
.hs-ref-stat--sm b{font-size:clamp(28px,2.6vw,38px)}
.hs-ref-stat--sm span{font-size:11px;letter-spacing:.14em}
.hs-ref-meta{
font-size:11px;letter-spacing:.2em;text-transform:uppercase;
color:var(--muted-2);font-weight:700;
}
.hs-ref-title{
font-family:'Roboto Condensed',sans-serif;font-weight:800;text-transform:uppercase;
font-size:clamp(26px,3vw,42px);line-height:1.04;letter-spacing:-.01em;
color:var(--ink);margin:0;
}
.hs-ref-title--sm{font-size:clamp(18px,1.7vw,23px);line-height:1.1}
.hs-ref-cta{
font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;
color:var(--ink);display:inline-flex;align-items:center;gap:9px;
position:relative;padding-bottom:5px;align-self:flex-start;
}
.hs-ref-cta::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:28px;
background:var(--accent);transition:width .35s var(--ease);
}
/* ---- Leitprojekt ---- */
.hs-ref-lead{
display:grid;grid-template-columns:1.35fr 1fr;gap:0;
margin-top:56px;border:1px solid var(--line);overflow:hidden;
background:var(--panel);
transition:border-color .35s ease;
}
.hs-ref-lead-media{position:relative;overflow:hidden;min-height:clamp(320px,34vw,460px)}
.hs-ref-lead-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--ease);
}
.hs-ref-lead-body{
padding:clamp(28px,3.2vw,48px);
display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.hs-ref-lead:hover{border-color:rgba(118,184,42,.55)}
.hs-ref-lead:hover .hs-ref-lead-media img{transform:scale(1.05)}
.hs-ref-lead:hover .hs-ref-cta::after{width:64px}
/* ---- Kompakte Karten ---- */
.hs-ref-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.hs-ref-item{
display:flex;flex-direction:column;
border:1px solid var(--line);overflow:hidden;background:var(--panel);
transition:border-color .35s ease,transform .45s var(--ease);
}
.hs-ref-item-media{position:relative;overflow:hidden;aspect-ratio:4/3}
.hs-ref-item-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--ease);
}
.hs-ref-item-body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:12px;flex:1}
.hs-ref-item:hover{border-color:rgba(118,184,42,.55);transform:translateY(-4px)}
.hs-ref-item:hover .hs-ref-item-media img{transform:scale(1.06)}
@media (max-width:1100px){
.hs-ref-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
.hs-ref-lead{grid-template-columns:1fr}
.hs-ref-lead-media{min-height:0;aspect-ratio:16/10}
}
@media (max-width:560px){
.hs-ref-row{grid-template-columns:1fr}
}
/* ==========================================================================
Utility-Zeile im Footer (Sekundaerlinks + Sprachwahl).
Lag vorher als eigene Leiste im Header und kostete dort Hoehe; hier fuellt
sie den Platz oberhalb von „Zertifiziert · Ausgezeichnet".
========================================================================== */
.hs-foot-utility{
display:flex;align-items:center;gap:26px;flex-wrap:wrap;
padding:22px 0;margin-top:8px;
border-top:1px solid var(--line);
font-size:12.5px;letter-spacing:.04em;
}
.hs-foot-utility a{color:var(--muted);transition:color .2s}
.hs-foot-utility a:hover{color:var(--ink)}
.hs-foot-utility .lang{
margin-left:auto; /* Sprachwahl rechts */
color:var(--muted-2);display:flex;gap:8px;
border-left:1px solid var(--line);padding-left:22px;
}
.hs-foot-utility .lang b{color:var(--ink)}
@media (max-width:640px){
.hs-foot-utility{gap:16px;padding:18px 0}
.hs-foot-utility .lang{margin-left:0;border-left:0;padding-left:0;width:100%}
}
/* ==========================================================================
Hauptnavigation: gleichmaessige Verteilung + Chevron statt Mini-Dreieck.
========================================================================== */
/* Menue nutzt den Raum zwischen Logo und CTA, statt mittig zu klumpen */
.nav .wrap > nav{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
.nav .wrap > nav .menu{
width:100%;
justify-content:space-evenly;
gap:clamp(14px,1.6vw,30px);
padding:0 clamp(12px,2vw,40px);
}
/* Chevron.
Weiter oben stehen zwei Regeln, gegen die hier gearbeitet werden muss:
content:"⌄" !important (Zeile ~6768) und transform:none !important
(Zeile ~6851, damit sich der Pfeil nur bei .open dreht). Beide werden
deshalb bewusst per !important ueberschrieben. Das Zeichen ⌄ sass je nach
Font unterschiedlich tief; ein Pfeil aus zwei Rahmenkanten sitzt exakt.
Gedreht wird weiterhin ueber .open, passend zum Klick-Mega-Menue. */
html body header.nav .menu li.menu-item-has-children > a::after{
content:"" !important;
display:inline-block !important;
position:relative !important;
top:-2px;
bottom:auto;
width:7px;height:7px;
border:0 !important;
border-right:2px solid currentColor !important;
border-bottom:2px solid currentColor !important;
background:none !important;
margin-left:9px !important;
vertical-align:middle !important;
font-size:0 !important;
opacity:.75;
transform:rotate(45deg) !important;
transition:transform .2s ease,opacity .2s ease,top .2s ease !important;
}
html body header.nav .menu li.menu-item-has-children > a:hover::after{opacity:1}
html body header.nav .menu li.menu-item-has-children.open > a::after{
transform:rotate(225deg) !important;
top:2px;
opacity:1;
}
/* Etwas Luft ueber und unter der Navigationszeile, damit Logo, Menue und
Button nicht am Rand kleben. */
.nav .wrap{height:auto;min-height:86px;padding-top:16px;padding-bottom:16px}
/* ==========================================================================
Einsatzbereiche: randlose Buehne statt Bild + Listen-Sidebar.
Die Szene laeuft ueber die volle Fensterbreite; die Marker sitzen
beschriftet auf den Bauwerken und sind selbst die Navigation. Die
Detailkarte schwebt als eigenstaendiges Panel darueber und ist am
Seitenraster ausgerichtet, nicht am Bildrand.
========================================================================== */
.ab-sec .ab-stage{
position:relative;
width:100vw;
margin-left:calc(50% - 50vw); /* randlos, ohne transform (kein Stacking-Kontext) */
/* Kein max-height: das wuerde das Seitenverhaeltnis wieder brechen und
das 16:9-Video oben und unten beschneiden — genau das, was der
Zuschnitt vermeiden sollte. Die Szene traegt die Sektion. */
aspect-ratio:16 / 9;
border-radius:0;
overflow:hidden;
background:#0B0D10;
isolation:isolate;
}
.ab-sec .ab-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Vignette: unten dunkler, damit die Karte traegt — oben bleibt das Motiv klar */
.ab-vignette{
position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(180deg, rgba(6,8,10,.35) 0%, rgba(6,8,10,0) 22%),
linear-gradient(0deg, rgba(6,8,10,.80) 0%, rgba(6,8,10,.35) 26%, rgba(6,8,10,0) 52%);
}
/* ---- Marker mit Beschriftung ---- */
.ab-sec .ab-marker{
position:absolute;transform:translate(-50%,-50%);
z-index:5;display:flex;align-items:center;gap:10px;
background:none;border:0;padding:0;cursor:pointer;
opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.ab-sec .ab-stage.video-done .ab-marker{opacity:1;pointer-events:auto}
.ab-sec .ab-dot{
position:relative;flex:0 0 auto;width:14px;height:14px;border-radius:50%;
background:#76B82A;box-shadow:0 0 0 3px rgba(6,8,10,.55),0 0 22px rgba(118,184,42,.85);
transition:transform .3s var(--ease),box-shadow .3s ease;
}
.ab-sec .ab-pulse{
position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;
border-radius:50%;border:2px solid #76B82A;opacity:0;pointer-events:none;
}
.ab-sec .ab-tag{
font:800 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;
color:#fff;white-space:nowrap;
padding:7px 12px;border-radius:999px;
background:rgba(6,8,10,.55);border:1px solid rgba(255,255,255,.16);
backdrop-filter:blur(6px);
transition:background .3s ease,border-color .3s ease,color .3s ease;
}
.ab-sec .ab-marker:hover .ab-dot{transform:scale(1.18)}
.ab-sec .ab-marker:hover .ab-tag{background:rgba(6,8,10,.78);border-color:rgba(118,184,42,.5)}
.ab-sec .ab-marker.is-active{z-index:6}
.ab-sec .ab-marker.is-active .ab-dot{
transform:scale(1.25);
box-shadow:0 0 0 3px rgba(6,8,10,.7),0 0 34px rgba(118,184,42,1),0 0 80px rgba(118,184,42,.55);
}
.ab-sec .ab-marker.is-active .ab-tag{background:#76B82A;border-color:#76B82A;color:#06080A}
.ab-sec .ab-marker.is-active .ab-pulse{animation:abPulse 1.8s ease-out infinite}
/* Marker in der rechten Bildhaelfte: Label nach links, damit es nicht rausragt */
.ab-sec .ab-marker[data-side="left"]{flex-direction:row-reverse}
.ab-sec .ab-marker[data-side="left"] .ab-pulse{left:auto;right:0}
/* ---- Detailkarte ---- */
.ab-card{
position:absolute;z-index:7;
left:max(28px, calc(50vw - 700px));
bottom:clamp(90px,11vw,132px);
width:min(430px, calc(100vw - 56px));
}
.ab-card-panel{
position:absolute;left:0;bottom:0;width:100%;
opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
background:rgba(11,13,16,.72);
border:1px solid rgba(255,255,255,.12);
border-left:3px solid #76B82A;
backdrop-filter:blur(14px);
padding:24px 26px 26px;
}
.ab-card-panel.is-active{opacity:1;visibility:visible;transform:none;position:relative}
.ab-card-eye{
display:flex;align-items:baseline;gap:10px;margin:0 0 12px;
font:800 11px/1 'Roboto Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,255,255,.6);
}
.ab-card-num{color:#76B82A}
.ab-card-title{
font:800 clamp(20px,1.9vw,26px)/1.12 'Roboto Condensed',sans-serif;
text-transform:uppercase;letter-spacing:-.005em;color:#fff;margin:0 0 12px;
}
.ab-card-text{font:400 14.5px/1.6 'Roboto',sans-serif;color:rgba(255,255,255,.78);margin:0 0 16px}
.ab-card-link{
display:inline-flex;align-items:center;gap:8px;
font:700 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase;
color:#76B82A;text-decoration:none;transition:gap .25s ease,color .25s ease;
}
.ab-card-link:hover{gap:13px;color:#8bd435}
/* ---- Index unten ---- */
.ab-index{
position:absolute;z-index:7;
left:max(28px, calc(50vw - 700px));
right:max(28px, calc(50vw - 700px));
bottom:clamp(24px,3vw,40px);
display:flex;gap:6px;flex-wrap:wrap;
border-top:1px solid rgba(255,255,255,.14);
padding-top:16px;
}
.ab-index-item{
display:flex;align-items:baseline;gap:8px;
background:none;border:0;padding:8px 14px 8px 0;cursor:pointer;
color:rgba(255,255,255,.5);transition:color .25s ease;
}
.ab-index-item:hover{color:rgba(255,255,255,.85)}
.ab-index-item.is-active{color:#fff}
.ab-index-num{font:800 11px/1 'Roboto Condensed',sans-serif;letter-spacing:.14em;color:rgba(255,255,255,.3)}
.ab-index-item.is-active .ab-index-num{color:#76B82A}
.ab-index-label{font:800 12.5px/1 'Roboto Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:900px){
.ab-sec .ab-stage{aspect-ratio:4/5;max-height:none}
.ab-sec .ab-tag{display:none} /* Labels wuerden sich ueberlagern */
.ab-card{left:20px;right:20px;width:auto;bottom:clamp(120px,26vw,180px)}
.ab-index{left:20px;right:20px}
.ab-index-label{display:none}
}
/* ==========================================================================
Glas-Effekt für Kopfzeile und Mega-Menü.
Beide hatten bereits backdrop-filter, der Effekt war aber wirkungslos:
die Kopfzeile springt beim Scrollen auf .92 Deckkraft, das Mega-Menü
liegt bei .96 — dahinter bleibt nichts zum Durchscheinen. Deckkraft
runter, Unschärfe und Sättigung rauf, damit das Glas trägt.
========================================================================== */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
header.nav{
background:rgba(11,13,16,.42) !important;
backdrop-filter:blur(18px) saturate(1.35) !important;
-webkit-backdrop-filter:blur(18px) saturate(1.35) !important;
}
header.nav.scrolled{
background:rgba(8,10,13,.68) !important;
backdrop-filter:blur(22px) saturate(1.4) !important;
-webkit-backdrop-filter:blur(22px) saturate(1.4) !important;
}
header.nav .menu .sub-menu{
background:rgba(11,13,16,.75) !important;
backdrop-filter:blur(28px) saturate(1.5) !important;
-webkit-backdrop-filter:blur(28px) saturate(1.5) !important;
/* feine Lichtkante oben — laesst die Flaeche wie Glas wirken */
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 60px rgba(0,0,0,.45) !important;
}
/* Hinweisleiste mitziehen, sonst bricht der Verlauf nach oben ab */
.announce{
background:rgba(11,13,16,.55) !important;
backdrop-filter:blur(18px) saturate(1.3);
-webkit-backdrop-filter:blur(18px) saturate(1.3);
}
}
/* ==========================================================================
Produktkarten: Bilder in die dunkle Seite einbinden.
Die Motive sind echte Arbeitsfotos, aber teils sehr hell (blauer Himmel,
ausgeleuchtete Lagerhalle). Auf durchgehend dunklem Grund wirkt das wie
ein Fremdkoerper. Leichte Absenkung von Helligkeit und Saettigung bindet
sie ein; beim Hover kommt die volle Farbe zurueck — dieselbe Logik wie
bei den Projekt-Karten, damit die Seite als ein System liest.
========================================================================== */
.prod-media .bg-img{
filter:saturate(.9) brightness(.84);
transition:transform .6s var(--ease),filter .45s ease;
}
.prod:hover .prod-media .bg-img{filter:saturate(1.05) brightness(1)}
/* Weniger Totraum: die Textspalte fuellte nur rund ein Drittel der Hoehe */
.prod-media{min-height:380px}
/* ==========================================================================
Produktsektion: Bild randbuendig zur Aussenseite.
Kein Kartenrahmen. Der Text bleibt am Seitenraster ausgerichtet, das Bild
laeuft zur gegenueberliegenden Fensterkante durch — begrenzt bleibt nur
die innere Kante, wo ein Verlauf das Foto in den schwarzen Textbereich
aufloest. Bei alternierender Anordnung spiegelt sich das.
========================================================================== */
.hs-prod{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
gap:0;
align-items:center;
/* Aus dem .wrap ausbrechen: 50% ist die halbe Wrap-Breite, 50vw die halbe
Fensterbreite — die Differenz ist genau der seitliche Wrap-Einzug. */
width:100vw;
margin-left:calc(50% - 50vw);
margin-top:clamp(56px,7vw,110px);
}
/* Gespiegelt: order tauscht nur die Position, nicht die Spaltenbreite —
deshalb muessen die Spalten mitgedreht werden, sonst landet das Bild
in der schmalen Spalte. */
.hs-prod--right{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.hs-prod--right .hs-prod-text{order:2}
.hs-prod--right .hs-prod-media{order:1}
/* ---- Text: am Seitenraster ausgerichtet ---- */
.hs-prod-text{padding-block:clamp(24px,3vw,48px)}
/* Der Text fluchtet mit Headline und Fliesstext der Seite. Die Einrueckung
haengt vom umgebenden Container ab und steckt deshalb in einer Variablen:
Startseite .wrap = 1280px bei 32px Innenabstand -> Inhalt ab 50vw - 608px,
Produktseite .pa-wrap = 1180px bei 32px -> ab 50vw - 558px. */
.hs-prod{--hs-prod-inset:max(32px, calc(50vw - 608px))}
.pa-product .hs-prod{--hs-prod-inset:max(32px, calc(50vw - 558px))}
.hs-prod--left .hs-prod-text{
padding-left:var(--hs-prod-inset);
padding-right:clamp(28px,4.5vw,80px);
}
.hs-prod--right .hs-prod-text{
padding-right:var(--hs-prod-inset);
padding-left:clamp(28px,4.5vw,80px);
}
.hs-prod-title{
font:800 clamp(26px,3.1vw,44px)/1.06 'Roboto Condensed',sans-serif;
letter-spacing:-.01em;color:#fff;margin:0 0 20px;text-transform:uppercase;
}
.hs-prod-desc{font-size:16.5px;line-height:1.6;color:var(--muted);margin:0 0 28px;max-width:460px}
.hs-prod-cta{
display:inline-flex;align-items:center;gap:9px;
font:700 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;
color:#fff;text-decoration:none;position:relative;padding-bottom:6px;
}
.hs-prod-cta::after{
content:"";position:absolute;left:0;bottom:0;height:2px;width:32px;
background:var(--accent);transition:width .35s var(--ease);
}
.hs-prod-cta:hover::after{width:100%}
.hs-prod-cta span{transition:transform .3s ease}
.hs-prod-cta:hover span{transform:translateX(4px)}
/* ---- Bild ---- */
.hs-prod-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg)}
.hs-prod-media img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .7s var(--ease);
}
.hs-prod:hover .hs-prod-media img{transform:scale(1.03)}
/* Umlaufende Vignette — symmetrisch, ohne Seitenlogik.
Eine einheitliche Verlaufsrichtung kann nicht funktionieren: bei
gespiegelten Karten liegt die innere Kante auf der anderen Seite, und der
Verlauf loest dann die Aussenkante auf, waehrend die Kante zum Text hart
stehen bleibt. Deshalb blenden jetzt BEIDE Seiten aus. Die innere Kante
verschwindet damit immer, die aeussere liegt an der Fensterkante und
liest sich als natuerliche Vignettierung.
Alle Stufen laufen auf var(--bg), nicht auf Schwarz — die Seite ist
#0B0D10, ein Ausblenden nach #000 waere dunkler als die Umgebung. */
.hs-prod-media::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
--v70:color-mix(in srgb, var(--hs-prod-bg) 70%, transparent);
--v45:color-mix(in srgb, var(--hs-prod-bg) 45%, transparent);
--v24:color-mix(in srgb, var(--hs-prod-bg) 24%, transparent);
--v00:color-mix(in srgb, var(--hs-prod-bg) 0%, transparent);
background:
linear-gradient(90deg,
var(--hs-prod-bg) 0%, var(--v70) 9%, var(--v24) 24%, var(--v00) 42%,
var(--v00) 58%, var(--v24) 76%, var(--v70) 91%, var(--hs-prod-bg) 100%),
linear-gradient(180deg, var(--hs-prod-bg) 0%, var(--v45) 8%, var(--v00) 26%),
linear-gradient(0deg, var(--hs-prod-bg) 0%, var(--v45) 8%, var(--v00) 26%);
}
.hs-prod-tag{
position:absolute;z-index:3;top:clamp(18px,2vw,28px);
font:800 11px/1 'Roboto Condensed',sans-serif;letter-spacing:.16em;text-transform:uppercase;
color:#06080A;background:var(--accent);padding:8px 14px;
}
.hs-prod--left .hs-prod-tag{right:clamp(18px,2vw,28px)}
.hs-prod--right .hs-prod-tag{left:clamp(18px,2vw,28px)}
@media (max-width:900px){
.hs-prod,
.hs-prod--right{grid-template-columns:1fr}
.hs-prod--right .hs-prod-text{order:2}
.hs-prod--right .hs-prod-media{order:1}
.hs-prod-text,
.hs-prod--left .hs-prod-text,
.hs-prod--right .hs-prod-text{padding:26px 20px 0}
.hs-prod-media{aspect-ratio:16/10}
/* Auch mobil ueber das Token, nicht ueber feste Farbwerte — sonst
passt die Vignette auf einem anders gefaerbten Grund wieder nicht. */
.hs-prod-media::after{background:linear-gradient(0deg,
var(--hs-prod-bg) 0%,
color-mix(in srgb, var(--hs-prod-bg) 25%, transparent) 35%,
color-mix(in srgb, var(--hs-prod-bg) 0%, transparent) 70%) !important}
.hs-prod{margin-top:48px}
}
/* ==========================================================================
Dieselbe Sektion auf den Produktseiten (stories).
Nutzt exakt die .hs-prod-Regeln oben; hier nur die Elemente, die es auf
der Startseite nicht gibt: Eyebrow und Haken-Liste.
========================================================================== */
.pa-product .hs-prod-desc{max-width:520px}
.hs-prod-eye{
font:800 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.22em;
text-transform:uppercase;color:var(--accent);margin:0 0 18px;
}
.hs-prod-text .pa-checks{list-style:none;margin:26px 0 28px;padding:0;max-width:520px}
.hs-prod-text .pa-checks li{
position:relative;padding-left:34px;margin:0 0 14px;
font-size:15.5px;line-height:1.5;color:var(--muted);
}
.hs-prod-text .pa-checks li::before{
content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
border-radius:50%;border:1.5px solid var(--accent);
}
.hs-prod-text .pa-checks li::after{
content:"";position:absolute;left:6.5px;top:8px;width:6px;height:3px;
border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
transform:rotate(-45deg);
}
/* =========================================================
DESIGN-VEREINHEITLICHUNG
---------------------------------------------------------
Die Seitentypen sind historisch mit eigenen Skalen gewachsen:
Section-Padding lief in 87 / 79 / 120 / 140 / 160 px, Eyebrows in
11.5 / 12 / 12.5 / 13 px mit .22em bis .28em Laufweite, und
Section-Headlines in 42 / 52 / 54 / 58 / 68 px — teilweise
mehrfach auf ein und derselben Seite.
Massgebend ist die Startseite. Ihre Section-Head-Kombination
(.sec-head: .eyebrow 13px/.22em + h2.display clamp(32,5vw,68))
und ihr Rhythmus (.pad) definieren hier die Tokens; alle
pa-*-Familien (Produkt- und Branchenseiten) werden darauf gezogen.
========================================================= */
:root{
/* Vertikaler Rhythmus */
--sec-pad:clamp(72px,11vh,140px);
--sec-pad-sm:clamp(40px,6vh,72px);
/* Section-Headline (zentriert / Sektionskopf) */
--h2-sec:clamp(32px,5vw,68px);
--h2-sec-lh:1.06;
--h2-sec-ls:-.015em;
/* Headline in schmaler Textspalte (Story-/Produktkarte) */
--h2-col:clamp(26px,3.1vw,44px);
--h2-col-lh:1.06;
--h2-col-ls:-.01em;
/* Eyebrow */
--eye-fs:13px;
--eye-lh:1.6;
--eye-ls:.22em;
--eye-mb:18px;
/* Fliesstext */
--body-fs:16.5px;
--body-lh:1.6;
}
/* ---- 1. Vertikaler Rhythmus ---------------------------- */
.pad{padding:var(--sec-pad) 0}
.showcase{padding-bottom:var(--sec-pad)}
.pa-section,
.pa-anwendung .pa-section,
.pa-anwendung .pa-htesti,
.pa-anwendung .pa-challenges,
.pa-anwendung .pa-steps-d,
.pa-anwendung .pa-faq,
.pa-anwendung .pa-kp,
.pa-anwendung .pa-cta,
.pa-anwendung .pa-cases,
.ab-sec{
padding-top:var(--sec-pad) !important;
padding-bottom:var(--sec-pad) !important;
}
/* Schmale Baender (Logo-Leiste, Beratungs-Bar) behalten ihre
Sonderrolle, laufen aber ebenfalls ueber ein Token. */
.pa-anwendung .pa-ts{padding:var(--sec-pad-sm) 0 !important}
/* Sektionen, die bewusst randlos sind, bleiben randlos. */
.pa-hero,
.pa-anwendung .pa-mission{padding-top:0 !important;padding-bottom:0 !important}
/* ---- 2. Eyebrow ---------------------------------------- */
.eyebrow,
.pa-eye,
.pa-eyebrow,
.pa-hero-text .pa-eye,
.hs-prod-eye,
.pa-scroll-text .pa-eye,
.pa-story--full .pa-eye{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:700 !important;
font-size:var(--eye-fs) !important;
line-height:var(--eye-lh) !important;
letter-spacing:var(--eye-ls) !important;
text-transform:uppercase !important;
color:var(--accent);
margin-bottom:var(--eye-mb) !important;
}
.pa-eye--center,
.pa-hero .pa-eye{margin-bottom:24px !important}
/* ---- 3. Section-Headline ------------------------------- */
.pa-mega-mid,
.pa-mega-mid--center,
.pa-anwendung .pa-mission-h,
.pj-section-head h2,
.pj-feat-title{
font-family:'Roboto Condensed',sans-serif;
font-weight:800;
font-size:var(--h2-sec);
line-height:var(--h2-sec-lh);
letter-spacing:var(--h2-sec-ls);
}
/* In der schmalen Textspalte bleibt die kleinere Stufe — dieselbe,
die .hs-prod-title auf der Startseite verwendet. */
.pa-anwendung .pa-story-text .pa-mega-mid,
.pa-story-text .pa-mega-mid,
.hs-prod-title{
font-family:'Roboto Condensed',sans-serif !important;
font-weight:800 !important;
font-size:var(--h2-col) !important;
line-height:var(--h2-col-lh) !important;
letter-spacing:var(--h2-col-ls) !important;
text-transform:uppercase !important;
margin:0 0 20px !important;
}
/* ---- 4. Fliesstext in Sektionen ------------------------ */
.hs-prod-desc,
.pa-claim-text,
.pa-story-body,
.pa-cta-text,
.pa-anwendung .pa-challenge-text,
.pa-anwendung .pa-faq-a{
font-size:var(--body-fs);
line-height:var(--body-lh);
}
/* ---- 5. Nachzuegler mit hoeherer Spezifitaet ------------
Einzelne Sektionen hatten eigene !important-Skalen (Steps 42px,
FAQ 44px, CTA 96px, FAQ-Eyebrow ohne Abstand). Sie werden hier
auf dieselben Tokens gezogen. */
.pa-anwendung .pa-steps-d .pa-steps-head .pa-mega-mid,
.pa-anwendung .pa-faq .pa-mega-mid{
font-size:var(--h2-sec) !important;
line-height:var(--h2-sec-lh) !important;
letter-spacing:var(--h2-sec-ls) !important;
text-transform:uppercase !important;
}
/* Der Abschluss-CTA bleibt eine Display-Groesse — aber dieselbe,
die die Startseite verwendet (.cta h2). */
.pa-anwendung .pa-cta .pa-mega-mid{
font-size:clamp(34px,6vw,86px) !important;
line-height:.98 !important;
letter-spacing:-.02em !important;
}
.pa-anwendung .pa-faq .pa-eye{margin-bottom:var(--eye-mb) !important}
/* Zentrierte "full"-Stories sind Sektionskoepfe, keine Spaltentexte. */
.pa-story--full .pa-story-text .pa-mega-mid{
font-size:var(--h2-sec) !important;
line-height:var(--h2-sec-lh) !important;
letter-spacing:var(--h2-sec-ls) !important;
}
/* Ein einziger Abstand zwischen Eyebrow und Headline — 18px, wie der
Section-Head der Startseite ihn ueber h2{margin-top:18px} erzeugt. */
.pa-eye--center,
.pa-hero .pa-eye,
.pa-anwendung .pa-faq .pa-eye{margin-bottom:var(--eye-mb) !important}
section#system{padding-top:var(--sec-pad) !important;padding-bottom:var(--sec-pad) !important}
/* Cinema-Text ist ebenfalls eine schmale Spalte (max-width:42ch). */
.pa-cinema-text .pa-mega-mid{
font-size:var(--h2-col) !important;
line-height:var(--h2-col-lh) !important;
letter-spacing:var(--h2-col-ls) !important;
}
/* =========================================================
PRODUKTKARTE: gleicher Look wie auf der Startseite
---------------------------------------------------------
Die Vignette lief fest auf var(--bg) (#0B0D10). Auf der
Startseite stimmt das — die Sektion erbt den Body-Hintergrund.
Auf den Produktseiten haben die Sektionen aber background:#000,
und ein Ausblenden nach #0B0D10 ist dort HELLER als der Grund:
Um jedes Bild stand ein sichtbarer Lichthof. Der Verlauf laeuft
jetzt auf ein Token, das dem tatsaechlichen Sektionsgrund folgt.
========================================================= */
.hs-prod{--hs-prod-bg:var(--bg)}
.pa-section .hs-prod{--hs-prod-bg:#000}
.hs-prod-media{background:var(--hs-prod-bg)}
/* Und zusaetzlich: die Sektionen selbst auf den Seitengrund der
Startseite ziehen, statt auf reines Schwarz. */
.pa-section{background:var(--bg)}
.pa-section .hs-prod{--hs-prod-bg:var(--bg)}
/* Story-Sektionen ohne eigenes Padding — auf der Startseite liegen
alle Karten in EINER Sektion und stehen nur ueber den 110px
Article-Abstand auseinander. Auf der Produktseite steckte jede
Story in einer eigenen Sektion, dadurch kamen 87+110+87 = 284px
zwischen die Karten. */
.pa-story-sec{padding-top:0 !important;padding-bottom:0 !important}
/* =========================================================
KUNDENSTIMME + KUNDENREFERENZEN (Produktseiten)
---------------------------------------------------------
Aufbau nach der Vorlage: Zitat-Block mit Trennlinien oben und
unten, links Logo-Kreis mit Name und Rolle, rechts das Zitat mit
grossem Anfuehrungszeichen, darunter der Button. Farbwelt aber
HighStep — dunkler Grund, gruener Akzent statt Gelb.
========================================================= */
.hs-voice .pa-mega-mid{margin:0 0 clamp(40px,5vw,72px)}
.hs-voice-body{
display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
gap:clamp(32px,6vw,90px);align-items:center;
padding:clamp(40px,5vw,72px) 0;
border-top:1px solid rgba(255,255,255,.14);
border-bottom:1px solid rgba(255,255,255,.14);
}
.hs-voice-who{text-align:center}
.hs-voice-badge{
width:190px;height:190px;border-radius:50%;margin:0 auto 22px;
background:#13181D;border:1px solid rgba(255,255,255,.10);
display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.hs-voice-badge img{max-width:66%;max-height:66%;width:auto;height:auto;object-fit:contain;display:block}
.hs-voice-badge--empty{border:1px solid rgba(118,184,42,.35)}
.hs-voice-badge--empty span{
font:800 46px/1 'Roboto Condensed',sans-serif;letter-spacing:.04em;
color:rgba(255,255,255,.28);
}
.hs-voice-name{
font:800 17px/1.2 'Roboto Condensed',sans-serif;letter-spacing:.06em;
text-transform:uppercase;color:#fff;margin:0 0 6px;
}
.hs-voice-role{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.hs-voice-quote{position:relative;max-width:60ch}
/* 34ch aus der Vorlage waren fuer diesen Container zu eng — der Satz
brach nach gut 40 Zeichen um, obwohl rechts die halbe Spalte frei
blieb. 60ch fuellt die Spalte und bleibt in der Lesebreite. */
.hs-voice-mark{
display:block;font:800 72px/.6 'Roboto Condensed',sans-serif;
color:var(--accent);margin:0 0 18px;
}
.hs-voice-quote blockquote{
margin:0;font-size:clamp(19px,1.9vw,26px);line-height:1.45;
letter-spacing:-.005em;color:#fff;
}
.hs-voice-cta{margin-top:clamp(36px,4.5vw,64px);text-align:center}
@media (max-width:820px){
.hs-voice-body{grid-template-columns:1fr;text-align:center;gap:32px}
.hs-voice-quote{max-width:none;margin:0 auto}
.hs-voice-badge{width:140px;height:140px}
}
/* ---- Kundenreferenzen ---- */
.hs-clients .pa-mega-mid{margin:0 0 clamp(40px,5vw,72px)}
/* Feste Drittel statt auto-fit: bei nur einer Referenz zog auto-fit die
Kachel ueber die volle Breite — ein einzelnes Projekt sah dann aus wie
ein Banner. Drei Spalten halten die Groesse unabhaengig von der Anzahl. */
.hs-clients-grid{
display:grid;grid-template-columns:repeat(3,1fr);
gap:clamp(20px,2.6vw,36px);
}
@media (max-width:900px){
.hs-clients-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
.hs-clients-grid{grid-template-columns:1fr}
}
.hs-client{text-decoration:none;display:block}
.hs-client-card{
position:relative;display:flex;align-items:center;justify-content:center;
aspect-ratio:4/3;padding:28px;overflow:hidden;
border:1px solid rgba(118,184,42,.45);border-radius:14px;
background:#0B0D10;
}
/* Das Projektbild liegt unter dem Namen und blendet beim Hover auf. */
.hs-client-media{
position:absolute;inset:0;opacity:0;
transition:opacity .45s var(--ease),transform .7s var(--ease);
transform:scale(1.04);
}
.hs-client-media img{width:100%;height:100%;object-fit:cover;display:block}
.hs-client-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,13,16,.30) 0%,rgba(11,13,16,.78) 100%);
}
.hs-client-name{
position:relative;z-index:2;text-align:center;
font:800 clamp(19px,2vw,26px)/1.2 'Roboto Condensed',sans-serif;
letter-spacing:.02em;text-transform:uppercase;color:#fff;
transition:transform .45s var(--ease);
}
.hs-client:hover .hs-client-media,
.hs-client:focus-visible .hs-client-media{opacity:1;transform:scale(1)}
.hs-client:hover .hs-client-card,
.hs-client:focus-visible .hs-client-card{border-color:var(--accent)}
.hs-client:hover .hs-client-name{transform:translateY(-4px)}
.hs-client:focus-visible .hs-client-card{outline:2px solid var(--accent);outline-offset:3px}
.hs-client-caption{display:block;margin-top:18px}
.hs-client-title{
display:block;font-size:15px;line-height:1.45;color:#fff;
transition:color .3s ease;
}
.hs-client:hover .hs-client-title{color:var(--accent)}
.hs-client-ort{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
@media (prefers-reduced-motion: reduce){
.hs-client-media{transition:opacity .2s linear;transform:none}
.hs-client:hover .hs-client-media{transform:none}
.hs-client:hover .hs-client-name{transform:none}
}
/* =========================================================
ANSPRECHPARTNER-BUBBLE
---------------------------------------------------------
Dezent heisst hier: taucht erst nach echtem Lese-Fortschritt
auf, bleibt klein, laesst sich wegklicken und kommt in
derselben Sitzung nicht wieder.
========================================================= */
.hs-bub{
position:fixed;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);
z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
opacity:0;transform:translateY(14px);pointer-events:none;
transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.hs-bub.is-in{opacity:1;transform:none;pointer-events:auto}
/* ---- Eingeklappt ---- */
.hs-bub-trigger{
display:flex;align-items:center;gap:12px;
padding:8px 18px 8px 8px;border:1px solid rgba(255,255,255,.12);
border-radius:999px;background:rgba(19,24,29,.92);
-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
box-shadow:0 18px 40px rgba(0,0,0,.45);
cursor:pointer;color:#fff;text-align:left;
transition:border-color .3s ease,transform .3s var(--ease);
}
.hs-bub-trigger:hover{border-color:rgba(118,184,42,.55);transform:translateY(-2px)}
.hs-bub-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hs-bub-avatar{
width:46px;height:46px;border-radius:50%;overflow:hidden;flex:0 0 auto;
border:2px solid rgba(118,184,42,.55);background:#0B0D10;position:relative;
}
.hs-bub-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.hs-bub-hint{display:flex;flex-direction:column;gap:2px;min-width:0}
.hs-bub-hint-eye{
font:700 10.5px/1.2 'Roboto Condensed',sans-serif;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);
}
.hs-bub-hint-name{font-size:13.5px;line-height:1.3;color:rgba(255,255,255,.82);white-space:nowrap}
/* Kleines "Ich bin da"-Signal am Avatar. */
.hs-bub-avatar::after{
content:"";position:absolute;right:1px;bottom:1px;width:10px;height:10px;
border-radius:50%;background:var(--accent);border:2px solid #13181D;
}
/* Das kleine x am eingeklappten Zustand — wegklicken ohne Oeffnen. */
.hs-bub-dismiss{
order:-1;width:24px;height:24px;border-radius:50%;
border:1px solid rgba(255,255,255,.14);background:rgba(19,24,29,.92);
color:rgba(255,255,255,.55);font-size:16px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:color .25s ease,border-color .25s ease;
}
.hs-bub-dismiss:hover{color:#fff;border-color:rgba(255,255,255,.35)}
.hs-bub-dismiss:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-bub.is-open .hs-bub-dismiss{display:none}
/* ---- Ausgeklappt ---- */
.hs-bub-card{
position:relative;width:min(330px,calc(100vw - 40px));
padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:18px;
background:rgba(19,24,29,.97);
-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.hs-bub.is-open .hs-bub-trigger{display:none}
.hs-bub-close{
position:absolute;top:10px;right:12px;width:26px;height:26px;
border:0;background:none;color:rgba(255,255,255,.5);font-size:20px;line-height:1;
cursor:pointer;transition:color .25s ease;
}
.hs-bub-close:hover{color:#fff}
.hs-bub-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hs-bub-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hs-bub-photo{
width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;
border:2px solid rgba(118,184,42,.5);background:#0B0D10;
}
.hs-bub-photo img{width:100%;height:100%;object-fit:cover;display:block}
.hs-bub-ident{display:flex;flex-direction:column;gap:3px;min-width:0}
.hs-bub-name{
font:800 16px/1.2 'Roboto Condensed',sans-serif;letter-spacing:.04em;
text-transform:uppercase;color:#fff;
}
.hs-bub-role{
font:700 10.5px/1.3 'Roboto Condensed',sans-serif;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);
}
.hs-bub-note{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 16px}
.hs-bub-actions{display:flex;flex-direction:column;gap:8px}
.hs-bub-btn{
display:block;text-align:center;padding:11px 16px;border-radius:999px;
border:1px solid rgba(255,255,255,.20);text-decoration:none;color:#fff;
font:700 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase;
transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.hs-bub-btn:hover{border-color:rgba(255,255,255,.45)}
.hs-bub-btn--primary{background:var(--accent);border-color:var(--accent);color:#06080A}
.hs-bub-btn--primary:hover{filter:brightness(1.08)}
@media (max-width:520px){
.hs-bub-hint{display:none}
.hs-bub-trigger{padding:8px}
}
@media (prefers-reduced-motion: reduce){
.hs-bub{transition:opacity .2s linear;transform:none}
.hs-bub.is-in{transform:none}
.hs-bub-trigger:hover{transform:none}
}
/* Sicherheitsnetz: laeuft der Observer nicht (Skriptfehler, Bot, sehr
kurze Seite), bleiben die Bullets sonst dauerhaft auf opacity:0.
Sichtbarer Inhalt darf nicht von JavaScript abhaengen. */
@media (scripting: none){
.pa-checks li{opacity:1 !important;transform:none !important}
}
.no-js .pa-checks li{opacity:1 !important;transform:none !important}
/* =========================================================
HAKEN IM KREIS ZENTRIEREN
---------------------------------------------------------
Der Haken ist die linke und die untere Kante eines kleinen
Kastens, um -45 Grad gedreht. Sein Kasten war bisher mittig
im Kreis positioniert — aber die Tinte liegt nicht in der
Kastenmitte, sondern auf zwei Kanten. Deren Schwerpunkt
wandert beim Drehen nach unten, hier um rund 1,7 px bei
einem 7x3,5-Kasten. Der Haken stand deshalb sichtbar zu
hoch und zu weit links.
Loesung: den Kasten am Kreismittelpunkt aufhaengen und um
genau diesen Versatz gegensteuern, statt an left/top zu
raten. ========================================================= */
.hs-prod-text .pa-checks li::before{
content:"";position:absolute;left:0;top:2px;width:20px;height:20px;
border-radius:50%;border:1.5px solid var(--accent);
}
.hs-prod-text .pa-checks li::after{
content:"";position:absolute;
/* Nicht der Kasten wird zentriert, sondern die sichtbare Tinte:
Kreismitte (10|12), korrigiert um den Schwerpunkt des gedrehten Hakens. */
left:10.19px;top:10.92px;
width:7px;height:3.5px;
border-left:1.6px solid var(--accent);
border-bottom:1.6px solid var(--accent);
background:none;
transform:translate(-50%,-50%) rotate(-45deg);
}
/* Dieselbe Korrektur fuer die Basis-Variante (Story-Bloecke ohne Bild). */
.pa-checks li::after{
left:11.18px;top:13.64px; /* Kreismitte (11|15), um den Hakenschwerpunkt korrigiert */
width:8px;height:4px;
transform:translate(-50%,-50%) rotate(-45deg);
}
/* =========================================================
KUNDEN-SEITE: Fallstudie + Kundenbeispiele
========================================================= */
.pj-cs{padding:var(--sec-pad) 0;background:var(--bg)}
.pj-cs .pa-mega-mid{margin:0 0 clamp(36px,4.5vw,64px)}
.pj-cs-inner{
display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
align-items:stretch;gap:0;
border:1px solid rgba(255,255,255,.10);border-radius:16px;overflow:hidden;
background:#0F1216;
}
.pj-cs-text{
display:flex;flex-direction:column;justify-content:center;
padding:clamp(32px,4vw,60px);
}
.pj-cs-title{
font:800 clamp(26px,3vw,40px)/1.1 'Roboto Condensed',sans-serif;
letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0 0 18px;
}
.pj-cs-desc{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 30px;max-width:42ch}
.pj-cs-btn{
display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
padding:14px 24px;border:0;border-radius:999px;cursor:pointer;
background:var(--accent);color:#06080A;text-decoration:none;
font:700 12.5px/1 'Roboto Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;
transition:filter .25s ease,transform .25s var(--ease);
}
.pj-cs-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.pj-cs-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pj-cs-btn-icon{display:inline-flex;width:19px;height:19px}
.pj-cs-btn-icon svg{width:100%;height:100%}
.pj-cs-media{
position:relative;display:block;border:0;padding:0;cursor:pointer;
background:#06080A;min-height:clamp(240px,32vw,460px);overflow:hidden;
}
.pj-cs-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;
transition:transform .7s var(--ease)}
.pj-cs-media:hover img{transform:scale(1.03)}
.pj-cs-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:clamp(56px,6vw,84px);height:clamp(56px,6vw,84px);
opacity:.9;transition:opacity .3s ease,transform .3s var(--ease);
filter:drop-shadow(0 6px 22px rgba(0,0,0,.55));
}
.pj-cs-media:hover .pj-cs-play{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
.pj-cs-media:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
/* ---- Kopf der Kundenbeispiele ---- */
.pj-arc-head{padding:var(--sec-pad) 0 clamp(24px,3vw,40px);background:var(--bg);text-align:center}
.pj-arc-head .pa-mega-mid{margin:0 0 20px}
.pj-arc-head-sub{
font-size:16.5px;line-height:1.65;color:var(--muted);
max-width:60ch;margin:0 auto;
}
/* ---- Filterleiste ---- */
.pj-arc-filter-bar{
display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding:14px 20px;border-radius:12px;
background:#06080A;border:1px solid rgba(255,255,255,.10);
}
.pj-arc-select{position:relative;display:inline-flex;align-items:center}
.pj-arc-select select{
appearance:none;-webkit-appearance:none;
background:none;border:0;color:#fff;cursor:pointer;
font:700 13px/1 'Roboto Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;
padding:8px 34px 8px 0;
}
.pj-arc-select select option{background:#0F1216;color:#fff;text-transform:none;letter-spacing:normal}
.pj-arc-select select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pj-arc-select-chev{
position:absolute;right:10px;top:50%;width:8px;height:8px;pointer-events:none;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:translateY(-70%) rotate(45deg);
}
.pj-arc-filter-right{display:flex;align-items:center;gap:16px}
.pj-arc-count{font-size:13.5px;color:rgba(255,255,255,.62)}
.pj-arc-reset{
border:0;background:none;cursor:pointer;padding:6px 2px;
font-size:13.5px;color:#fff;border-bottom:1px solid rgba(255,255,255,.35);
transition:color .25s ease,border-color .25s ease;
}
.pj-arc-reset:hover{color:var(--accent);border-color:var(--accent)}
.pj-arc-reset:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:820px){
.pj-cs-inner{grid-template-columns:1fr}
.pj-cs-media{min-height:220px;order:-1}
.pj-arc-filter-bar{justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){
.pj-cs-media:hover img{transform:none}
.pj-cs-btn:hover{transform:none}
.pj-cs-media:hover .pj-cs-play{transform:translate(-50%,-50%)}
}
/* ---- Kunden-Seite: vertraulicher Kundenkontakt ---- */
.pj-conf{padding:var(--sec-pad) 0;background:#0F1216;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.pj-conf .pa-mega-mid{margin:0 0 16px}
.pj-conf-sub{
font:700 13px/1.5 'Roboto Condensed',sans-serif;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);margin:0 0 26px;
}
.pj-conf-text{
font-size:16.5px;line-height:1.75;color:var(--muted);
max-width:68ch;margin:0 auto 34px;
}
.pj-conf-cta{display:flex;justify-content:center}
/* Kunden-Grid: gefilterte Kacheln sauber ausblenden. */
.hs-client.pj-arc-item.hidden{display:none}
/* Auf der Kunden-Seite mehr Kacheln pro Reihe als auf den Produktseiten. */
/* Kunden-Uebersicht nutzt dieselben Drittel wie ueberall sonst. */
.pj-arc-grid{padding-bottom:var(--sec-pad)}
/* =========================================================
KUNDEN-SEITE: KENNZAHLEN
Raster mit Trennlinien, Zahl und Icon nebeneinander,
Bezeichnung darunter.
========================================================= */
.pj-kpi{padding:var(--sec-pad) 0;background:var(--bg);text-align:center}
.pj-kpi .pa-mega-mid{margin:0 0 20px}
.pj-kpi-sub{
font-size:17px;line-height:1.65;color:var(--muted);
max-width:56ch;margin:0 auto clamp(48px,6vw,86px);
}
/* Festes 4er-Raster statt auto-fit: bei acht Zellen ergibt das zwei
volle Reihen. auto-fit brach je nach Fensterbreite in 5+3 um, und
eine angebrochene zweite Reihe zerstoert die Ruhe des Rasters. */
.pj-kpi-grid{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid rgba(255,255,255,.13);
}
.pj-kpi{
padding:clamp(30px,3.4vw,48px) clamp(12px,1.6vw,24px);
border-bottom:1px solid rgba(255,255,255,.13);
border-right:1px solid rgba(255,255,255,.13);
display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
}
/* Aeussere rechte Kante bleibt offen — sonst wirkt das Raster wie ein Kasten. */
.pj-kpi:nth-child(4n){border-right:0}
.pj-kpi-top{
display:flex;align-items:center;justify-content:center;
gap:clamp(8px,.9vw,14px);margin-bottom:14px;
}
.pj-kpi-value{
font:800 clamp(34px,3.8vw,52px)/.95 'Roboto Condensed',sans-serif;
letter-spacing:-.025em;color:#fff;
}
.pj-kpi-icon{
display:inline-flex;color:var(--accent);
width:clamp(24px,2.4vw,32px);height:clamp(24px,2.4vw,32px);
flex:0 0 auto;
}
.pj-kpi-icon svg{width:100%;height:100%;stroke-width:1.4}
.pj-kpi-label{
font-size:15.5px;line-height:1.4;color:rgba(255,255,255,.74);
max-width:20ch;margin:0 auto;
}
@media (max-width:900px){
.pj-kpi-grid{grid-template-columns:repeat(2,1fr)}
.pj-kpi:nth-child(4n){border-right:1px solid rgba(255,255,255,.13)}
.pj-kpi:nth-child(2n){border-right:0}
}
@media (max-width:460px){
.pj-kpi-grid{grid-template-columns:1fr}
.pj-kpi{border-right:0 !important}
}
/* Fallstudien untereinander: gleiche Karte, mehrfach gestapelt. */
.pj-cs .pj-cs-inner + .pj-cs-inner{margin-top:clamp(24px,3vw,44px)}
.pj-cs-eye{
font:700 12px/1.4 'Roboto Condensed',sans-serif;letter-spacing:.18em;
text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.pj-cs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pj-cs-media picture.hs-picture{display:contents}
/* Fallstudien-Karte ohne Video: neutrales Feld mit Logo bzw. Kundennamen. */
.pj-cs-media--leer{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
background:#0B0D10;cursor:default;padding:32px;
}
.pj-cs-logo{position:static !important;width:auto;max-width:220px;max-height:88px;object-fit:contain}
.pj-cs-leer-name{
font:800 clamp(22px,2.4vw,32px)/1.15 'Roboto Condensed',sans-serif;
letter-spacing:.01em;text-transform:uppercase;color:rgba(255,255,255,.85);text-align:center;
}
.pj-cs-leer-hint{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.pj-cs-dauer{opacity:.7;font-weight:700;letter-spacing:.08em}
/* Kundenlogo auf der Portfolio-Kachel — gleiche Rolle wie .hs-client-name. */
.hs-client-logo{
position:relative;z-index:2;
max-width:70%;max-height:58%;width:auto;height:auto;
object-fit:contain;display:block;
transition:transform .45s var(--ease);
}
.hs-client:hover .hs-client-logo{transform:translateY(-4px)}
@media (prefers-reduced-motion: reduce){
.hs-client:hover .hs-client-logo{transform:none}
}
/* Kundenlogo im Meta-Streifen der Projekt-Detailseite. */
.pj-meta-logo{
display:flex;align-items:center;justify-content:flex-start;
flex:0 0 auto;padding-right:clamp(20px,2.4vw,38px);
margin-right:clamp(20px,2.4vw,38px);
border-right:1px solid rgba(255,255,255,.14);
}
.pj-meta-logo img{
max-width:180px;max-height:52px;width:auto;height:auto;
object-fit:contain;display:block;
}
@media (max-width:720px){
.pj-meta-logo{
border-right:0;border-bottom:1px solid rgba(255,255,255,.14);
padding:0 0 18px;margin:0 0 18px;width:100%;
}
.pj-meta-logo img{max-height:44px}
}
/* Referenz-Kacheln auf der Startseite: gleiche Komponente, eigener Abstand. */
.hs-ref-tiles{margin-top:clamp(24px,3vw,44px)}
/* ---- Referenz-Kachel als Vorschau ("Coming soon") ---- */
.hs-client--soon{cursor:default}
.hs-client--soon .hs-client-card{border-style:dashed;border-color:rgba(118,184,42,.35)}
.hs-client--soon .hs-client-logo{opacity:.72}
.hs-client--soon .hs-client-name{color:rgba(255,255,255,.78)}
.hs-client-soon{
position:absolute;top:14px;right:14px;z-index:3;
padding:6px 12px;border-radius:999px;
background:rgba(118,184,42,.14);border:1px solid rgba(118,184,42,.45);
font:700 10.5px/1 'Roboto Condensed',sans-serif;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent);
}
.hs-client--soon .hs-client-title{color:rgba(255,255,255,.82)}
.hs-client--soon:hover .hs-client-title{color:rgba(255,255,255,.82)}
.hs-client--soon .hs-client-ort{color:rgba(255,255,255,.42);font-style:italic}
/* =========================================================
TEAM-KARTEN: Portrait fuellt die Karte
---------------------------------------------------------
Vorher sass ein 160-px-Kreis mittig in einer viel groesseren
Karte — links und rechts blieb totes Schwarz, und weil die
Portraits ohnehin auf schwarzem Grund fotografiert sind,
war der Kreis kaum als Form erkennbar. Jetzt laeuft das Bild
randlos ueber die volle Kartenbreite, der Text sitzt darunter.
========================================================= */
.ua-team .ua-person{
padding:0 0 28px !important;
overflow:hidden;
gap:0;
justify-content:flex-start;
}
.ua-team .ua-person-photo,
.ua-team .ua-person--featured .ua-person-photo{
width:100% !important;
height:auto !important;
/* 1:1 statt 4:5. Die Portraits sind 16:9-Querformate mit viel Schwarz
ringsum; object-fit:cover behaelt die volle Hoehe und schneidet
seitlich. Bei 4:5 blieben nur 45 Prozent der Bildbreite stehen und
die Schultern liefen aus dem Rahmen — bei 1:1 sind es 56 Prozent. */
aspect-ratio:1/1;
border-radius:0 !important;
border:0 !important;
margin:0 0 22px !important;
background:#0B0D10;
}
.ua-team .ua-person-photo img{
width:100%;height:100%;
object-fit:cover;object-position:center center;
transition:transform .6s var(--ease);
}
.ua-team .ua-person:hover .ua-person-photo img{transform:scale(1.04)}
.ua-team .ua-person:hover .ua-person-photo{border:0 !important}
/* Text bekommt den Seitenabstand, den die Karte selbst verloren hat. */
.ua-team .ua-person-name,
.ua-team .ua-person-role,
.ua-team .ua-person-bio{padding-left:22px;padding-right:22px}
.ua-team .ua-person-role{margin-top:8px}
.ua-team .ua-person-links{
margin:18px 22px 0;padding-top:16px;width:auto;
}
/* Die hervorgehobene Karte skalierte um 4 Prozent — bei randlosen
Bildern faellt der dadurch unscharfe Zuschnitt auf. Stattdessen
nur der gruene Rahmen. */
.ua-team .ua-person--featured{transform:none !important}
.ua-team .ua-person--featured:hover{transform:translateY(-3px) !important}
@media (prefers-reduced-motion: reduce){
.ua-team .ua-person:hover .ua-person-photo img{transform:none}
}
/* ---- "Wie alles begann" als Produkt-Karte ---- */
/* .pa-wrap ist 1180 breit — derselbe Einzug wie auf den Produktseiten. */
.ua-origin .hs-prod{--hs-prod-inset:max(32px, calc(50vw - 558px))}
.ua-origin{padding-top:0}
.ua-origin .hs-prod{margin-top:0}
.hs-prod-body{font-size:16.5px;line-height:1.75;color:var(--muted);max-width:52ch}
.hs-prod-body p{margin:0 0 18px}
.hs-prod-body p:last-child{margin-bottom:0}
.hs-prod-body strong{color:#fff;font-weight:700}
.hs-prod-body em{color:rgba(255,255,255,.82)}
/* Bildunterschrift im Bild — wie das Tag, nur unten und unaufdringlicher. */
.hs-prod-cap{
position:absolute;left:clamp(18px,2vw,28px);bottom:clamp(18px,2vw,28px);z-index:3;
max-width:min(70%,420px);
font:400 12.5px/1.4 'Roboto',sans-serif;color:rgba(255,255,255,.72);
text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.hs-prod-cap b{color:var(--accent);font-weight:700}
/* Mission mit Bild: gleicher Einzug wie die Herkunfts-Sektion. */
.ua-mission--bild .hs-prod{--hs-prod-inset:max(32px, calc(50vw - 558px));margin-top:0}
.ua-mission--bild{padding-top:0}
.ua-mission--bild .hs-prod-text .pa-checks{margin-top:26px}
/* Platzhalter im Bildbereich einer Produkt-Karte. */
.hs-prod-media--ph{
display:flex;align-items:center;justify-content:center;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 14px, transparent 14px 28px),
#0F1216;
}
.hs-prod-media--ph::after{
/* Die Vignette der Bildkarten wuerde den Platzhalter nur abdunkeln. */
background:none !important;
}
.hs-prod-ph{
font:700 13px/1 'Roboto Condensed',sans-serif;letter-spacing:.22em;
text-transform:uppercase;color:rgba(255,255,255,.34);
padding:14px 22px;border:1px dashed rgba(255,255,255,.18);border-radius:999px;
}
/* =========================================================
DOWNLOADS & VIDEOS
========================================================= */
.dl-head{padding-bottom:0;text-align:center}
.dl-head .pa-mega-mid{margin:0 0 20px}
.dl-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:62ch;margin:0 auto}
.dl-videos .pa-mega-mid{margin:0 0 clamp(36px,4.5vw,64px);text-align:center}
.dl-video-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,30px);
}
.dl-video{display:block;text-align:left;padding:0;border:0;background:none;cursor:pointer}
.dl-video-thumb{
position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
border:1px solid rgba(255,255,255,.10);border-radius:12px;background:#06080A;
transition:border-color .3s ease;
}
.dl-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s var(--ease)}
.dl-video-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:52px;height:52px;opacity:.9;
transition:opacity .3s ease,transform .3s var(--ease);
filter:drop-shadow(0 4px 16px rgba(0,0,0,.6));
}
.dl-video:hover .dl-video-thumb{border-color:rgba(118,184,42,.55)}
.dl-video:hover .dl-video-thumb img{transform:scale(1.04)}
.dl-video:hover .dl-video-play{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.dl-video:focus-visible .dl-video-thumb{outline:2px solid var(--accent);outline-offset:3px}
.dl-video-title{
display:block;margin-top:14px;font-size:14.5px;line-height:1.4;color:#fff;
transition:color .3s ease;
}
.dl-video:hover .dl-video-title{color:var(--accent)}
/* ---- Dateilisten ---- */
.dl-group + .dl-group{margin-top:clamp(44px,5vw,76px)}
.dl-group-title{
font:800 clamp(20px,2.2vw,28px)/1.2 'Roboto Condensed',sans-serif;
letter-spacing:-.01em;text-transform:uppercase;color:#fff;
margin:0 0 20px;padding-bottom:14px;
border-bottom:1px solid rgba(255,255,255,.13);
}
.dl-list{list-style:none;margin:0;padding:0}
.dl-item + .dl-item{border-top:1px solid rgba(255,255,255,.08)}
.dl-item a{
display:flex;align-items:center;gap:16px;padding:16px 4px;
text-decoration:none;color:#fff;transition:color .25s ease,padding-left .25s var(--ease);
}
.dl-item a:hover{color:var(--accent);padding-left:10px}
.dl-item a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl-item-icon{flex:0 0 auto;width:22px;height:22px;color:var(--accent);opacity:.85}
.dl-item-icon svg{width:100%;height:100%}
.dl-item-text{flex:1 1 auto;font-size:16px;line-height:1.45}
.dl-item-meta{
flex:0 0 auto;font:700 11.5px/1 'Roboto Condensed',sans-serif;
letter-spacing:.14em;color:rgba(255,255,255,.42);
}
@media (max-width:1000px){ .dl-video-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
.dl-video-grid{grid-template-columns:1fr}
.dl-item a{gap:12px;padding:14px 2px}
.dl-item-meta{display:none}
}
@media (prefers-reduced-motion: reduce){
.dl-video:hover .dl-video-thumb img,
.dl-video:hover .dl-video-play{transform:translate(-50%,-50%)}
.dl-item a:hover{padding-left:4px}
}
/* =========================================================
KARRIERE
========================================================= */
.kr-head{padding-bottom:0;text-align:center}
.kr-head .pa-mega-mid{margin:0 0 20px}
.kr-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:60ch;margin:0 auto}
.kr-about{padding-top:clamp(48px,6vw,90px)}
.kr-about .hs-prod{--hs-prod-inset:max(32px, calc(50vw - 558px));margin-top:0}
.kr-jobs-box{
max-width:820px;margin:0 auto;text-align:center;
padding:clamp(36px,4.5vw,64px) clamp(24px,4vw,56px);
border:1px solid rgba(118,184,42,.35);border-radius:18px;
background:linear-gradient(180deg,rgba(118,184,42,.06) 0%,rgba(11,13,16,0) 100%);
}
.kr-jobs-title{
font:800 clamp(24px,2.8vw,36px)/1.15 'Roboto Condensed',sans-serif;
letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0 0 16px;
}
.kr-jobs-text{font-size:16.5px;line-height:1.7;color:var(--muted);margin:0 auto 28px;max-width:52ch}
.kr-team{text-align:center}
.kr-team .pa-mega-mid{margin:0 0 26px}
.kr-team-body{font-size:16.5px;line-height:1.75;color:var(--muted);max-width:64ch;margin:0 auto}
.kr-team-body p{margin:0 0 18px}
.kr-team-body p:last-child{margin-bottom:0}
.kr-team-cta{margin-top:32px;display:flex;justify-content:center}
/* =========================================================
HANDELSVERTRETER
========================================================= */
.hv-head{padding-bottom:0;text-align:center}
.hv-head .pa-mega-mid{margin:0 0 20px}
.hv-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:60ch;margin:0 auto 18px}
.hv-intro{font-size:16px;line-height:1.7;color:rgba(255,255,255,.55);max-width:66ch;margin:0 auto}
.hv-list .pa-mega-mid{margin:0 0 clamp(36px,4.5vw,64px);text-align:center}
.hv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.hv-card{
padding:clamp(24px,2.6vw,34px);
border:1px solid rgba(255,255,255,.10);border-radius:14px;background:#0F1216;
transition:border-color .3s ease,transform .3s var(--ease);
}
.hv-card:hover{border-color:rgba(118,184,42,.45);transform:translateY(-3px)}
.hv-card-land{
font:700 11.5px/1 'Roboto Condensed',sans-serif;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent);margin:0 0 14px;
}
.hv-card-firma{
font:800 18px/1.25 'Roboto Condensed',sans-serif;letter-spacing:.01em;
text-transform:uppercase;color:#fff;margin:0 0 8px;
}
.hv-card-person{font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);margin:0 0 8px}
.hv-card-adr{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 16px}
.hv-card-links{display:flex;flex-wrap:wrap;gap:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.10)}
.hv-card-links a{
font:700 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.12em;
text-transform:uppercase;color:rgba(255,255,255,.7);text-decoration:none;
transition:color .25s ease;
}
.hv-card-links a:hover{color:var(--accent)}
.hv-join{text-align:center}
.hv-join .pa-mega-mid{margin:0 0 20px}
.hv-join-text{font-size:16.5px;line-height:1.7;color:var(--muted);max-width:62ch;margin:0 auto clamp(36px,4vw,56px)}
.hv-vorteile{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,34px);text-align:left}
.hv-vorteil-t{
font:800 17px/1.25 'Roboto Condensed',sans-serif;letter-spacing:.01em;
text-transform:uppercase;color:#fff;margin:0 0 10px;padding-top:16px;
border-top:2px solid var(--accent);
}
.hv-vorteil-x{font-size:15px;line-height:1.65;color:var(--muted);margin:0}
.hv-join-cta{margin-top:clamp(36px,4vw,56px);display:flex;justify-content:center}
@media (max-width:1000px){ .hv-grid,.hv-vorteile{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .hv-grid,.hv-vorteile{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .hv-card:hover{transform:none} }
/* =========================================================
SERVICELEISTUNGEN
========================================================= */
.sv-head{padding-bottom:0;text-align:center}
.sv-head .pa-mega-mid{margin:0 0 20px}
.sv-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:62ch;margin:0 auto}
.sv-partner .pa-mega-mid{margin:0 0 clamp(36px,4.5vw,64px);text-align:center}
.sv-partner-leistungen{list-style:none;margin:0 0 16px;padding:0}
.sv-partner-leistungen li{
position:relative;padding-left:18px;font-size:14.5px;line-height:1.6;color:var(--muted);
}
.sv-partner-leistungen li::before{
content:"";position:absolute;left:0;top:10px;width:6px;height:6px;
border-radius:50%;background:var(--accent);
}
@media (max-width:820px){ .sv-grid{grid-template-columns:1fr} }
/* =========================================================
KONTAKT
========================================================= */
.kt-head{padding-bottom:0;text-align:center}
.kt-head .pa-mega-mid{margin:0 0 20px}
.kt-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:58ch;margin:0 auto}
.kt-cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.kt-h2{
font:800 clamp(20px,2.2vw,28px)/1.2 'Roboto Condensed',sans-serif;
letter-spacing:-.005em;text-transform:uppercase;color:#fff;margin:0 0 16px;
}
.kt-form-text{font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 24px}
.kt-form-fallback{
padding:clamp(24px,3vw,36px);border:1px dashed rgba(255,255,255,.18);border-radius:14px;background:#0F1216;
}
.kt-form-fallback p{margin:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--muted)}
.kt-form-fallback-cta{display:flex;flex-wrap:wrap;gap:12px}
.kt-side{padding:clamp(24px,3vw,36px);border:1px solid rgba(255,255,255,.10);border-radius:14px;background:#0F1216}
.kt-adr{font-style:normal;font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 18px}
.kt-side-links{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.10)}
.kt-side-links a{font-size:15.5px;color:#fff;text-decoration:none;transition:color .25s ease}
.kt-side-links a:hover{color:var(--accent)}
.kt-map{margin-top:22px;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#06080A}
.kt-map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.9)}
.kt-people .pa-mega-mid{margin:0 0 clamp(36px,4.5vw,64px);text-align:center}
/* Formular-Felder gaengiger Plugins an die Seite angleichen. */
.kt-form input[type=text],.kt-form input[type=email],.kt-form input[type=tel],
.kt-form textarea,.kt-form select{
width:100%;padding:14px 16px;margin-bottom:14px;
background:#0B0D10;border:1px solid rgba(255,255,255,.14);border-radius:10px;
color:#fff;font-family:'Roboto',sans-serif;font-size:15.5px;
}
.kt-form textarea{min-height:150px;resize:vertical}
.kt-form input:focus,.kt-form textarea:focus,.kt-form select:focus{outline:2px solid var(--accent);outline-offset:1px}
.kt-form input[type=submit],.kt-form button[type=submit]{
padding:14px 28px;border:0;border-radius:999px;cursor:pointer;
background:var(--accent);color:#06080A;
font:700 12.5px/1 'Roboto Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.kt-form label{display:block;font-size:14px;color:var(--muted);margin-bottom:6px}
@media (max-width:900px){ .kt-cols{grid-template-columns:1fr} }
/* =========================================================
EINFACHE INHALTSSEITEN (Impressum, Datenschutz, Disclaimer)
========================================================= */
.rt-head{padding-bottom:0;text-align:center}
.rt-head .pa-mega-mid{margin:0}
.rt-body{padding-top:clamp(36px,4vw,64px)}
.rt-prose{max-width:76ch;margin:0 auto;font-size:16.5px;line-height:1.8;color:var(--muted)}
.rt-prose > *:first-child{margin-top:0}
.rt-prose h2,.rt-prose h3{
font:800 clamp(20px,2.2vw,28px)/1.25 'Roboto Condensed',sans-serif;
letter-spacing:-.005em;text-transform:uppercase;color:#fff;
margin:2.2em 0 .7em;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.12);
}
.rt-prose h4,.rt-prose h5{
font:800 clamp(16px,1.7vw,19px)/1.3 'Roboto Condensed',sans-serif;
letter-spacing:.01em;text-transform:uppercase;color:#fff;margin:2em 0 .6em;
}
.rt-prose p{margin:0 0 1.15em}
.rt-prose ul,.rt-prose ol{margin:0 0 1.3em;padding-left:1.3em}
.rt-prose li{margin-bottom:.5em}
.rt-prose li::marker{color:var(--accent)}
.rt-prose strong,.rt-prose b{color:#fff;font-weight:700}
.rt-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rt-prose a:hover{color:#fff}
.rt-prose table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:15px}
.rt-prose th,.rt-prose td{padding:10px 12px;border:1px solid rgba(255,255,255,.12);text-align:left;vertical-align:top}
.rt-prose th{color:#fff;font-weight:700}
/* ---- Kontaktformular: Markup gaengiger Plugins an die Seite angleichen ---- */
.kt-form .wpcf7-form p{margin:0}
.kt-form .kt-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.kt-form .kt-field{display:block;margin-bottom:16px}
.kt-form .kt-field > span{display:block}
.kt-form .kt-label{
display:block;margin-bottom:7px;
font:700 11.5px/1.3 'Roboto Condensed',sans-serif;letter-spacing:.14em;
text-transform:uppercase;color:rgba(255,255,255,.62);
}
.kt-form .kt-label .kt-opt{color:rgba(255,255,255,.38);letter-spacing:.06em}
.kt-form input[type=text],.kt-form input[type=email],.kt-form input[type=tel],
.kt-form input[type=url],.kt-form textarea,.kt-form select{
margin-bottom:0;
}
.kt-form select{
appearance:none;-webkit-appearance:none;
background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.5) 50%),
linear-gradient(135deg,rgba(255,255,255,.5) 50%,transparent 50%);
background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
background-size:6px 6px, 6px 6px;background-repeat:no-repeat;
padding-right:44px;
}
.kt-form select option{background:#0F1216;color:#fff}
/* Einwilligungen */
.kt-form .kt-consent{display:block;margin:6px 0 18px}
.kt-form .wpcf7-list-item{display:block;margin:0 0 10px}
.kt-form .wpcf7-list-item label{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin:0}
.kt-form input[type=checkbox]{
appearance:none;-webkit-appearance:none;flex:0 0 auto;
width:19px;height:19px;margin-top:2px;border-radius:5px;
border:1px solid rgba(255,255,255,.28);background:#0B0D10;cursor:pointer;
position:relative;transition:border-color .2s ease,background .2s ease;
}
.kt-form input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.kt-form input[type=checkbox]:checked::after{
content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
border-right:2px solid #06080A;border-bottom:2px solid #06080A;transform:rotate(45deg);
}
.kt-form input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kt-form .wpcf7-list-item-label{font-size:14.5px;line-height:1.55;color:var(--muted)}
.kt-form .wpcf7-list-item-label a{color:var(--accent)}
/* Rueckmeldungen des Plugins */
.kt-form .wpcf7-not-valid-tip{
display:block;margin-top:7px;font-size:13px;color:#ff8a7a;letter-spacing:.01em;
}
.kt-form .wpcf7-not-valid{border-color:rgba(255,138,122,.7)}
.kt-form .wpcf7-response-output{
margin:22px 0 0 !important;padding:14px 18px !important;border-radius:10px;
border:1px solid rgba(255,255,255,.18) !important;font-size:15px;line-height:1.6;
}
.kt-form .wpcf7-mail-sent-ok{border-color:rgba(118,184,42,.6) !important;background:rgba(118,184,42,.10)}
.kt-form .wpcf7-validation-errors,.kt-form .wpcf7-mail-sent-ng{
border-color:rgba(255,138,122,.55) !important;background:rgba(255,138,122,.08);
}
.kt-form .wpcf7-spinner{margin:0 0 0 12px}
.kt-form .kt-submit{display:flex;align-items:center;gap:10px;margin-top:8px}
@media (max-width:620px){ .kt-form .kt-row{grid-template-columns:1fr} }
/* Download direkt an einem Service-Punkt. */
.sv-punkt .pa-checks{margin:18px 0 0}
.sv-punkt-dl{
display:inline-flex;align-items:center;gap:11px;margin-top:20px;
padding:12px 20px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
text-decoration:none;color:#fff;
font:700 12px/1 'Roboto Condensed',sans-serif;letter-spacing:.12em;text-transform:uppercase;
transition:border-color .25s ease,color .25s ease;
}
.sv-punkt-dl:hover{border-color:var(--accent);color:var(--accent)}
.sv-punkt-dl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sv-punkt-dl .dl-item-icon{width:18px;height:18px}
.sv-punkt-dl-meta{letter-spacing:.08em;color:rgba(255,255,255,.42);font-weight:400}
/* Serviceleistungen: dieselben Karten wie auf den Produktseiten. */
.sv-karten{padding-top:clamp(40px,5vw,80px)}
.sv-karten .hs-prod{--hs-prod-inset:max(32px, calc(50vw - 558px));margin-top:0}
.sv-karten .hs-prod + .hs-prod{margin-top:clamp(56px,7vw,110px)}
.sv-karten .hs-prod-body{margin-bottom:0}
.sv-karten .hs-prod-text .pa-checks{margin:22px 0 0}
.sv-karten .hs-prod-cta{margin-top:26px}
.sv-downloads{padding-top:clamp(48px,6vw,90px)}
.sv-downloads .dl-group{max-width:820px;margin:0 auto}
/* ---------- Mission: Hochkant-Video mit Vignette ----------
Volle Hoehe, mittig, die Raender laufen weich in den Sektionsgrund aus.
Spezifitaet bewusst hoch: die Mission-Regeln weiter oben arbeiten mit !important. */
html body .pa-anwendung .pa-mission-media--portrait{background:#0B0D10 !important}
html body .pa-anwendung .pa-mission-media--portrait .pa-mission-portrait{
position:absolute;top:0;bottom:0;left:50%;height:100%;width:auto;max-width:100%;
transform:translateX(-50%);
}
html body .pa-anwendung .pa-mission-media--portrait .pa-mission-portrait video{
position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;
}
html body .pa-anwendung .pa-mission-media--portrait .pa-mission-portrait::after{
content:"";position:absolute;inset:-1px;pointer-events:none;z-index:1;
background:
linear-gradient(90deg,#0B0D10 0%,rgba(11,13,16,.75) 12%,rgba(11,13,16,0) 34%,rgba(11,13,16,0) 66%,rgba(11,13,16,.75) 88%,#0B0D10 100%),
linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,0) 18%,rgba(11,13,16,0) 82%,rgba(11,13,16,.7) 100%);
}
@media (max-width:900px){
html body .pa-anwendung .pa-mission-media--portrait{aspect-ratio:1/1 !important}
}
/* ---------- Branchen: Fachartikel aus dem Blog ---------- */
.pa-anwendung .pa-fa{background:#0B0D10}
.pa-fa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);margin-top:clamp(40px,5vw,64px);text-align:left}
@media (max-width:900px){.pa-fa-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pa-fa-grid{grid-template-columns:1fr}}
.pa-fa-card{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.pa-fa-card:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:14px}
.pa-fa-media{aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#13181D;border:1px solid rgba(255,255,255,.08);margin-bottom:22px}
.pa-fa-media picture{display:contents}
.pa-fa-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pa-fa-card:hover .pa-fa-media img{transform:scale(1.05)}
.pa-fa-meta{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.pa-fa-title{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:clamp(19px,1.6vw,23px);line-height:1.2;color:#fff;margin:0 0 12px;text-wrap:balance}
.pa-fa-exc{font-size:15px;line-height:1.6;color:rgba(255,255,255,.62);margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pa-fa-cta{margin-top:auto;font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#fff;display:inline-flex;gap:8px;align-items:center;transition:gap .3s ease,color .3s ease}
.pa-fa-card:hover .pa-fa-cta{gap:14px;color:var(--accent)}
/* ---------- Kontakt: Handelspartner ---------- */
.kt-partner .pa-mega-mid{margin-bottom:16px}
.kt-partner-lead{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:56ch;margin:0 auto clamp(36px,4.5vw,56px);text-align:center}
.kt-partner-more{text-align:center;margin:clamp(32px,4vw,48px) 0 0}
/* ---------- Handelspartner-Karten: Icons ---------- */
.hv-card{display:flex;flex-direction:column}
.hv-card-head{display:flex;align-items:center;gap:12px;margin:0 0 18px}
.hv-card-head .hv-card-land{margin:0}
.hv-card-ico{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
color:var(--accent);background:rgba(118,184,42,.08);border:1px solid rgba(118,184,42,.28);
transition:background .3s ease,border-color .3s ease}
.hv-card-ico svg{width:20px;height:20px;display:block}
.hv-card:hover .hv-card-ico{background:rgba(118,184,42,.16);border-color:rgba(118,184,42,.55)}
.hv-card-row{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.hv-card-i{display:inline-block;width:16px;height:16px;flex:0 0 16px;color:var(--accent)}
.hv-card-row .hv-card-i{margin-top:3px;opacity:.85}
.hv-card-i svg{width:100%;height:100%;display:block;stroke-width:2.2}
.hv-card-adr{flex:1 1 auto}
.hv-card-links a{display:inline-flex;align-items:center;gap:7px}
.hv-card-links .hv-card-i{width:14px;height:14px;flex-basis:14px;color:currentColor;opacity:.9}
.hv-card-links a:hover .hv-card-i{color:var(--accent)}
.hv-card-ico--flag{font-size:21px;line-height:1;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
/* ---------- Landingpage: Vorschrift & Loesung ---------- */
.sv-lp-comp{background:#0B0D10}
.sv-comp-list{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);margin-top:clamp(40px,5vw,64px)}
.sv-comp{display:grid;grid-template-columns:1fr auto 1.25fr;gap:clamp(16px,2.4vw,34px);align-items:center;
background:#0F1216;border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:clamp(22px,2.6vw,34px)}
.sv-comp-label{font:700 11px/1 'Roboto Condensed',sans-serif;letter-spacing:.2em;text-transform:uppercase;
color:rgba(255,255,255,.4);margin:0 0 12px}
.sv-comp-label--ok{color:var(--accent)}
.sv-comp-req-text{font-size:16px;line-height:1.55;color:rgba(255,255,255,.72);margin:0;
padding-left:16px;border-left:2px solid rgba(255,255,255,.18)}
.sv-comp-arrow{color:var(--accent);font-size:22px;line-height:1}
.sv-comp-sol-head{display:flex;align-items:center;gap:14px;margin:0 0 10px}
.sv-comp-ico{width:34px;height:34px;flex:0 0 34px;color:var(--accent)}
.sv-comp-ico svg{width:100%;height:100%;display:block}
.sv-comp-sol-title{font:800 clamp(17px,1.5vw,21px)/1.25 'Roboto Condensed',sans-serif;text-transform:uppercase;
letter-spacing:.01em;color:#fff;margin:0}
.sv-comp-sol-text{font-size:15px;line-height:1.6;color:rgba(255,255,255,.62);margin:0}
.sv-lp-quelle{margin:clamp(32px,4vw,48px) 0 0;text-align:center;font-size:13px;color:rgba(255,255,255,.45)}
.sv-lp-quelle a{color:rgba(255,255,255,.65)}
.sv-lp-quelle a:hover{color:var(--accent)}
@media (max-width:860px){
.sv-comp{grid-template-columns:1fr;gap:18px}
.sv-comp-arrow{transform:rotate(90deg);justify-self:start}
}
/* ---------- Produkt: Technische Daten ---------- */
.pa-specs{background:#0B0D10}
.pa-specs-list{margin:clamp(40px,5vw,64px) 0 0;display:flex;flex-direction:column;
border-top:1px solid rgba(255,255,255,.10)}
.pa-spec-row{display:grid;grid-template-columns:minmax(180px,.8fr) 1.2fr;gap:clamp(16px,2.4vw,40px);
padding:20px 4px;border-bottom:1px solid rgba(255,255,255,.10);align-items:baseline;
transition:background .3s var(--ease)}
.pa-spec-row:hover{background:rgba(255,255,255,.025)}
.pa-spec-row dt{font-family:'Roboto Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.18em;
text-transform:uppercase;color:rgba(255,255,255,.45);margin:0}
.pa-spec-row dd{margin:0;font-size:17px;line-height:1.5;color:#fff}
@media (max-width:640px){
.pa-spec-row{grid-template-columns:1fr;gap:6px;padding:16px 2px}
}