/* ============================================================
   REFLEXION GMBH — shared site styles
   Tokens & schemes from Relume export (DESIGN.md / globals.css)
   ============================================================ */
@import url("fonts.css");

:root{
  --white:#fff;--neutral-lightest:#f2f2f2;--neutral-lighter:#d9d9d9;--neutral-light:#b4b3b4;
  --neutral:#828082;--neutral-dark:#504d50;--neutral-darker:#1e1b1e;--neutral-darkest:#050205;
  --tawny-lightest:#f1f1f1;--tawny-lighter:#e0d2e0;--tawny-light:#926192;--tawny:#641e64;
  --tawny-dark:#501850;--tawny-darker:#280c28;--tawny-darkest:#1e091e;
  /* === Reflexion-CI (verbindlich, einziges Farbspektrum) === */
  --color-bg:#ffffff;--color-ink:#000000;--color-muted:#848484;--color-accent:#641e64;
  --radius-button:.375rem;--radius-card:.5rem;--radius-image:.5rem;
  --container:80rem;--max-lg:48rem;
  /* Display = Montserrat Black (freie Gotham-Alternative, OUTFRONT-Behandlung), Body = DM Sans */
  --font-display:"Montserrat","Bricolage Grotesque",system-ui,sans-serif;--font-body:"DM Sans","Calibri",system-ui,sans-serif;
  --t-h1:3rem;--t-h2:2.75rem;--t-h3:2rem;--t-h4:1.5rem;--t-h5:1.25rem;--t-h6:1.125rem;
  --t-large:1.125rem;--t-medium:1rem;--t-regular:.875rem;--t-small:.75rem;--t-tiny:.625rem;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:992px){:root{
  --t-h1:5.25rem;--t-h2:3.75rem;--t-h3:3rem;--t-h4:2.5rem;--t-h5:2rem;--t-h6:1.625rem;
  --t-large:1.625rem;--t-medium:1.25rem;--t-regular:1.125rem;--t-small:1rem;--t-tiny:.75rem;
}}

/* Hell/Dunkel-Rhythmus: Weiß bzw. Schwarz, Akzent sparsam (kein Lila-Flächen mehr) */
.scheme-1{--bg:var(--color-bg);          --text:var(--color-ink); --accent:var(--color-accent); --border:rgba(0,0,0,.14);}
.scheme-2{--bg:#fafafa;                  --text:var(--color-ink); --accent:var(--color-accent); --border:rgba(0,0,0,.12);}
.scheme-3{--bg:var(--color-ink);         --text:#fff;             --accent:#fff;                --border:rgba(255,255,255,.2);}
.scheme-4{--bg:var(--color-ink);         --text:#fff;             --accent:#fff;                --border:rgba(255,255,255,.2);}
[class*=scheme-]{background-color:var(--bg);color:var(--text);}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:400;color:var(--color-ink);background:var(--color-bg);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{text-wrap:pretty}
button{font:inherit;cursor:pointer}

.container{max-width:var(--container);margin-inline:auto;width:100%}
.section{padding:64px 5%}
@media(min-width:768px){.section{padding:96px 5%}}
@media(min-width:992px){.section{padding:112px 5%}}

.h1{font-size:var(--t-h1);line-height:1.05}
.h2{font-size:var(--t-h2);line-height:1.15}
.h3{font-size:var(--t-h3);line-height:1.2}
.h4{font-size:var(--t-h4);line-height:1.25}
.h5{font-size:var(--t-h5);line-height:1.3}
.h6{font-size:var(--t-h6);line-height:1.4}
.t-large{font-size:var(--t-large);line-height:1.5}
.t-medium{font-size:var(--t-medium);line-height:1.5}
.t-small{font-size:var(--t-small);line-height:1.5}
.t-tiny{font-size:var(--t-tiny);line-height:1.5}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:var(--t-small);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;color:var(--color-muted)}
.muted{color:var(--neutral)}
[class*=scheme-3] .muted,[class*=scheme-4] .muted{color:rgba(255,255,255,.7)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--radius-button);font-weight:600;font-size:var(--t-regular);border:1px solid transparent;white-space:nowrap;transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}
.btn-primary:hover{background:var(--tawny-dark);border-color:var(--tawny-dark)}
.btn-primary:active{background:var(--tawny-darker)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:rgba(100,30,100,.06)}
[class*=scheme-3] .btn-primary,[class*=scheme-4] .btn-primary{background:#fff;color:var(--tawny);border-color:#fff}
[class*=scheme-3] .btn-primary:hover,[class*=scheme-4] .btn-primary:hover{background:var(--tawny-lightest)}
[class*=scheme-3] .btn-secondary,[class*=scheme-4] .btn-secondary{color:#fff;border-color:rgba(255,255,255,.5)}
[class*=scheme-3] .btn-secondary:hover,[class*=scheme-4] .btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text);background:none;border:none;padding:0}
.btn-link:hover{color:var(--accent)}
.btn-link svg{width:18px;height:18px}

/* ---------- navbar ---------- */
.nav{position:sticky;top:0;z-index:999;width:100%;background:#fff;border-bottom:1px solid rgba(5,2,5,.08);transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.nav.scrolled{border-bottom-color:transparent;box-shadow:0 6px 28px rgba(13,27,42,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:0 5%;max-width:var(--container);margin-inline:auto;gap:24px;flex-wrap:nowrap}
.nav-logo img{height:30px;width:auto}
.nav-logo{flex:none}
.nav-logo .brand-mark{height:34px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-word{transform:translateY(1px)}
.brand-mark{height:34px;width:auto;display:block}
.brand-word{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:700;font-size:25px;letter-spacing:-.025em;color:var(--color-ink);line-height:1}
.footer-logo .brand,.nav-logo .brand{vertical-align:middle}
.nav-links{display:none;align-items:center;gap:2px;min-width:0}
.nav-links a{padding:8px 10px;font-size:.94rem;border-radius:6px;transition:color .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--tawny)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{white-space:nowrap}
.nav-burger{display:flex;flex-direction:column;gap:5px;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none}
.nav-burger span{width:24px;height:2px;background:var(--neutral-darkest);border-radius:2px;transition:.2s}
.mobile-menu{display:none;flex-direction:column;padding:8px 5% 20px;border-top:1px solid rgba(5,2,5,.08)}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:12px 0;font-size:var(--t-medium);border-bottom:1px solid rgba(5,2,5,.06)}
@media(min-width:1340px){.nav-links{display:flex}.nav-burger{display:none}.mobile-menu{display:none!important}}
@media(max-width:1499px){.nav-cta .btn-secondary{display:none}}
@media(max-width:560px){.nav-cta .btn{display:none}.nav-cta .nav-burger{display:flex}}

/* ---------- hero: startseite parallax ---------- */
.hero{position:relative;height:200vh}
@media(max-width:767px){.hero{height:175vh}}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-col{position:absolute;top:0;display:flex;flex-direction:column;gap:6vh;will-change:transform}
.hero-col image-slot{width:30vw;max-width:340px;aspect-ratio:3/4;border-radius:var(--radius-image)}
.hero-col-1{left:3vw}.hero-col-2{right:3vw}
.hero-col-2 image-slot{opacity:.8}
.hero-content{position:relative;z-index:10;text-align:center;max-width:760px;padding:0 5%}
.hero-content::before{content:"";position:absolute;inset:-40px -40px;background:radial-gradient(ellipse at center,rgba(255,255,255,.92) 55%,rgba(255,255,255,0) 100%);z-index:-1}
.hero-kicker{font-weight:600;font-size:var(--t-medium);color:var(--tawny);margin-bottom:20px}
.hero h1{margin-bottom:24px}
.hero-sub{font-size:var(--t-medium);max-width:540px;margin:0 auto 32px}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
@media(max-width:767px){.hero-col image-slot{width:38vw}.hero-col-1{left:-6vw}.hero-col-2{right:-6vw}}

/* ---------- hero: split (text + media) ---------- */
.hero-split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center;padding:64px 5%}
@media(min-width:992px){.hero-split{grid-template-columns:1fr 1fr;gap:64px;padding:0 5%;min-height:78vh}}
.hero-split .copy{max-width:40rem}
.hero-split h1{margin-bottom:20px}
.hero-split .sub{font-size:var(--t-medium);margin-bottom:28px}
.hero-actions-left{display:flex;gap:16px;flex-wrap:wrap}
.collage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.collage image-slot{width:100%;aspect-ratio:1;border-radius:var(--radius-image);margin:0}
.collage.bento{grid-template-columns:1.15fr 1fr;align-items:stretch}
.collage.bento>image-slot{aspect-ratio:3/4;height:100%;width:100%;margin:0}
.collage.bento .cstack{display:flex;flex-direction:column;gap:14px;min-height:0}
.collage.bento .cstack image-slot{flex:1;width:100%;min-height:0;aspect-ratio:auto;border-radius:var(--radius-image);margin:0}
@media(min-width:992px){.collage{align-content:center}}

/* ---------- hero: image background centered ---------- */
.hero-bg{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 5%;overflow:hidden}
.hero-bg .grid-bg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:0}
.hero-bg .grid-bg image-slot{width:100%;height:100%;border-radius:0}
.hero-bg .scrim{position:absolute;inset:0;background:rgba(5,2,5,.55);z-index:1}
.hero-bg .copy{position:relative;z-index:2;max-width:46rem;color:#fff}
.hero-bg h1{color:#fff;margin-bottom:20px}
.hero-bg .sub{font-size:var(--t-medium);color:rgba(255,255,255,.9);margin-bottom:28px}
.hero-bg .hero-actions{justify-content:center}

/* ---------- generic section heads ---------- */
.head-center{max-width:var(--max-lg);margin:0 auto 56px;text-align:center}
.head-center h2{margin-bottom:20px}
@media(min-width:768px){.head-center{margin-bottom:72px}}

/* ---------- split feature (text + image) ---------- */
.split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:768px){.split{grid-template-columns:1fr 1fr;gap:48px}}
@media(min-width:992px){.split{gap:80px}}
.split .copy h2,.split .copy h3{margin-bottom:20px}
.split .copy .body{font-size:var(--t-medium)}
.split .actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:28px}
.split image-slot{width:100%;aspect-ratio:4/3;border-radius:var(--radius-image)}
.split.rev .media{order:-1}
@media(min-width:768px){.split.rev .media{order:0}.split.rev .copy{order:2}}
.split-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:14px;margin-bottom:24px}
.split-icon svg{width:32px;height:32px;stroke:var(--tawny)}

/* ---------- stats ---------- */
.stats-head{max-width:var(--max-lg);margin-bottom:56px}
.stats-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(3,1fr);gap:48px}}
.stat{border-left:1px solid var(--border);padding-left:32px}
.stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(3.25rem,6vw,5rem);line-height:1.1;margin-bottom:8px;letter-spacing:-.02em}
.stat h3{font-size:var(--t-h6)}
.stat-cards{display:grid;gap:24px}
.stat-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:40px;text-align:center}
.stat-card .num{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,5vw,5rem);line-height:1.1;margin-bottom:8px}

/* ---------- partner logos ---------- */
.logos-head{text-align:center;max-width:var(--max-lg);margin:0 auto 40px}
.logos-head .h6{color:var(--neutral)}
.logos-row{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:980px;margin:0 auto}
@media(min-width:640px){.logos-row{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.logos-row{grid-template-columns:repeat(5,1fr)}}
.logos-row image-slot{width:100%;height:88px;border:1px solid rgba(5,2,5,.08);border-radius:14px;background:var(--neutral-lightest);filter:grayscale(1);opacity:1;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.logos-row image-slot:hover{border-color:rgba(100,30,100,.25);box-shadow:0 8px 22px rgba(17,17,20,.06)}

/* ---------- centered + image ---------- */
.center-narrow{max-width:var(--max-lg);margin:0 auto 56px;text-align:center}
.center-narrow h2{margin-bottom:20px}
.feat-img{width:100%;aspect-ratio:16/9;border-radius:var(--radius-image)}

/* ---------- solution / purple cards ---------- */
.sol-cards{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:560px){.sol-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.sol-cards{grid-template-columns:repeat(4,1fr);gap:28px}}
.sol-card{background:#fff;color:var(--neutral-darkest);border:1px solid var(--border);border-radius:var(--radius-card);padding:28px;display:flex;flex-direction:column;min-height:280px;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.sol-card:hover{box-shadow:0 6px 18px rgba(17,17,20,.10);transform:translateY(-4px)}
.sol-card .ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:10px;margin-bottom:20px}
.sol-card .ico svg{width:24px;height:24px;stroke:var(--tawny)}
.sol-card h3{font-size:var(--t-h5);margin-bottom:10px}
.sol-card p{font-size:var(--t-regular);color:var(--neutral-dark);flex:1}
.sol-card .btn-link{color:var(--tawny);margin-top:20px}
.sol-card .btn-link:hover{color:var(--tawny-dark)}

/* ---------- info / image cards (process w/ image) ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:560px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.cards.c4{grid-template-columns:repeat(4,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;background:var(--white)}
.card image-slot{width:100%;aspect-ratio:4/3;border-radius:0;display:block}
.card .body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .step-no{font-size:var(--t-small);font-weight:600;color:var(--tawny)}
.card h3{font-size:var(--t-h5)}
.card .btn-link{margin-top:auto;padding-top:12px}

/* ---------- two-up centered ---------- */
.twoup{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:768px){.twoup{grid-template-columns:repeat(2,1fr);gap:48px}}
@media(min-width:992px){.twoup.t3{grid-template-columns:repeat(3,1fr)}}
.twoup .col{text-align:center;display:flex;flex-direction:column;align-items:center}
.twoup h3{margin-bottom:16px}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.step{text-align:center;display:flex;flex-direction:column;align-items:center}
.step .ico{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:14px;margin-bottom:24px}
.step .ico svg{width:28px;height:28px;stroke:var(--tawny)}
.step h3{font-size:var(--t-h4);margin-bottom:16px}
.step p{font-size:var(--t-regular);color:var(--neutral-dark)}
.process-cta{display:flex;justify-content:center;margin-top:56px}

/* ---------- icon feature (heading left / detail right) ---------- */
.icon-feat{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.icon-feat{grid-template-columns:1fr 1fr;gap:48px}}
@media(min-width:992px){.icon-feat{gap:80px}}
.icon-feat .pair{display:grid;grid-template-columns:1fr;gap:24px;margin-top:32px}
@media(min-width:560px){.icon-feat .pair{grid-template-columns:1fr 1fr}}
.icon-feat .pair .ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--tawny);margin-bottom:14px}
.icon-feat .pair .ico svg{width:36px;height:36px;stroke:var(--tawny)}
.icon-feat .pair h6{font-size:var(--t-h6);margin-bottom:10px}

/* ---------- tabs ---------- */
.tabs-list{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-bottom:56px}
.tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:8px 0;font-size:var(--t-medium);font-weight:500;color:var(--neutral);transition:.15s}
.tab-btn.active{color:var(--text);border-color:var(--text)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- gallery ---------- */
.gallery-wrap{position:relative}
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery image-slot,.gallery video-slot{flex:0 0 70%;aspect-ratio:1;border-radius:var(--radius-image);scroll-snap-align:start;display:block;background:var(--neutral-lightest)}
@media(min-width:768px){.gallery image-slot,.gallery video-slot{flex-basis:32%}}
.gallery-nav{display:flex;gap:12px;justify-content:center;margin-top:32px}
.gallery-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center}
.gallery-nav button:hover{background:var(--tawny-lightest)}
.gallery-nav svg{width:20px;height:20px;stroke:var(--text)}

/* ---------- CTA band ---------- */
.cta{text-align:center}
.cta .inner{max-width:46rem;margin:0 auto}
.cta h2{margin-bottom:20px}
.cta p{font-size:var(--t-medium);margin-bottom:32px}
.cta .hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.cta-card{position:relative;border-radius:var(--radius-card);overflow:hidden;min-height:32rem;display:flex;align-items:center;justify-content:center;text-align:center;padding:48px 24px}
.cta-card image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;z-index:0}
.cta-card .scrim{position:absolute;inset:0;background:rgba(5,2,5,.55);z-index:1}
.cta-card .inner{position:relative;z-index:2;color:#fff}
.cta-card h1,.cta-card h2{color:#fff}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media(min-width:768px){.contact-grid{grid-template-columns:1fr 1fr;gap:64px}}
.contact-info h2{margin-bottom:20px}
.contact-info .lead{font-size:var(--t-medium);margin-bottom:28px}
.contact-list{display:flex;flex-direction:column;gap:16px}
.contact-list .row{display:flex;align-items:center;gap:16px}
.contact-list svg{width:24px;height:24px;flex:none;stroke:var(--tawny)}
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:500;font-size:var(--t-regular)}
.field input,.field textarea{font:inherit;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-button);background:#fff;color:inherit;transition:border-color .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--tawny);box-shadow:0 0 0 3px rgba(100,30,100,.18)}
.field textarea{min-height:160px;resize:vertical}
.check{display:flex;align-items:center;gap:10px;font-size:var(--t-small)}
.check input{width:18px;height:18px;accent-color:var(--tawny)}

/* ---------- footer ---------- */
.footer{padding:56px 5% 32px}
.footer-top{display:grid;grid-template-columns:1fr;gap:48px;padding-bottom:48px}
@media(min-width:992px){.footer-top{grid-template-columns:1fr .5fr}}
.footer-logo .brand{margin-bottom:28px}
.footer-logo .brand-mark{height:34px;margin-bottom:0}
.footer-logo .brand-word{font-size:26px}
.footer-nav{display:flex;flex-wrap:wrap;gap:24px;list-style:none}
.footer-nav a{font-weight:600;font-size:var(--t-regular)}
.footer-nav a:hover{color:var(--tawny)}
.footer-news .eyebrow{margin-bottom:16px;color:var(--text)}
.news-form{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.news-form input{flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-button);font:inherit}
.news-form input:focus{outline:none;border-color:var(--tawny)}
.footer-divider{height:1px;background:var(--border);width:100%}
.footer-bottom{display:flex;flex-direction:column;gap:16px;padding-top:24px;font-size:var(--t-small)}
.footer-bottom ul{display:flex;flex-wrap:wrap;gap:24px;list-style:none}
.footer-bottom a{text-decoration:underline}
@media(min-width:768px){.footer-bottom{flex-direction:row;align-items:center;justify-content:space-between}}

/* ---------- map (Leaflet / OSM) ---------- */
.map-head{max-width:var(--max-lg);margin:0 auto 40px;text-align:center}
.map-head h2{margin-bottom:16px}
.map{height:540px;width:100%;border-radius:var(--radius-card);border:1px solid var(--border);overflow:hidden;z-index:0}
@media(max-width:560px){.map{height:420px}}
.leaflet-container{font-family:var(--font-body);background:var(--neutral-lightest)}
.leaflet-popup-content{font-family:var(--font-body);font-size:.95rem}
.leaflet-popup-content strong{font-family:var(--font-display)}
.rx-pin{background:var(--tawny);border:2px solid #fff;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 6px rgba(5,2,5,.35)}
.rx-pin span{display:block;width:6px;height:6px;border-radius:50%;background:#fff;margin:4px auto}
.map-shell{border:1px solid var(--border);border-radius:var(--radius-image);overflow:hidden}
.rx-map{width:100%;height:520px;background:var(--neutral-lightest);z-index:0}
@media(max-width:767px){.rx-map{height:420px}}
.leaflet-container{font-family:var(--font-body)}
.leaflet-popup-content-wrapper{border-radius:10px}
.leaflet-popup-content{font-size:var(--t-small);line-height:1.45;margin:12px 14px}
.rx-pop-meta{color:var(--neutral);font-size:.8em}
.rx-pop-count{color:var(--tawny);font-weight:600}
.leaflet-popup-content-wrapper{border-radius:var(--radius-button)}
.leaflet-popup-content{font-family:var(--font-body);font-size:.95rem;line-height:1.4}
.leaflet-container{font-family:var(--font-body)}
.map-note{margin-top:16px;font-size:var(--t-small);color:var(--neutral);display:flex;align-items:center;gap:8px}
.map-note svg{width:16px;height:16px;stroke:var(--neutral)}
.map-meta{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;text-align:center;max-width:var(--max-lg);margin:0 auto 24px}
.map-count{font-family:var(--font-display);font-weight:800;font-size:clamp(2.25rem,4vw,3rem);line-height:1;letter-spacing:-.02em;color:var(--tawny)}
.map-meta .t-medium{color:var(--neutral-dark)}

/* ---------- qualify checklist ---------- */
.qualify{display:grid;grid-template-columns:1fr;gap:16px;max-width:52rem;margin:0 auto}
@media(min-width:768px){.qualify{grid-template-columns:1fr 1fr}}
.qualify .q{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--white)}
.qualify .q .ico{flex:none;width:40px;height:40px;border-radius:10px;background:var(--tawny-lightest);display:flex;align-items:center;justify-content:center}
.qualify .q .ico svg{width:22px;height:22px;stroke:var(--tawny)}
.qualify .q p{font-size:var(--t-regular)}

/* ---------- impressum / legal ---------- */
.legal h2{margin:32px 0 8px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--neutral-dark);font-size:var(--t-regular);margin-bottom:8px}
.legal a{color:var(--tawny);text-decoration:underline}

/* ---------- hero v2 (kompakt: copy + lila stat-panel) ---------- */
.hero2{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;padding:56px 5% 72px}
@media(min-width:820px){.hero2{grid-template-columns:1.05fr .95fr;gap:56px;padding:56px 5% 72px;min-height:0}}
@media(min-width:992px){.hero2{gap:72px;padding:64px 5% 88px;min-height:0}}
.hero2 .hero-device{justify-content:center}
@media(min-width:820px){.hero2 .hero-device{justify-content:center}.hero2 .terminal.lg{width:min(258px,92%)}}
.hero2 .copy{max-width:36rem}
.hero2 .eyebrow{color:var(--tawny)}
.hero2 h1{margin-bottom:22px}
.hero2 .sub{font-size:var(--t-medium);color:var(--neutral-dark);margin-bottom:32px}
.hero2 .hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.hero-panel{background:var(--tawny);color:#fff;border-radius:var(--radius-card);padding:40px;display:flex;flex-direction:column;gap:28px}
@media(min-width:992px){.hero-panel{padding:48px}}
.hero-panel .lead{font-size:var(--t-h6);font-family:var(--font-display);font-weight:600;line-height:1.25;letter-spacing:-.02em}
.hero-panel .grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:520px){.hero-panel .grid{grid-template-columns:1fr 1fr}}
.hero-panel .st{display:flex;flex-direction:column;gap:4px}
.hero-panel .st .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;letter-spacing:-.02em}
.hero-panel .st .l{font-size:var(--t-small);color:rgba(255,255,255,.82)}
.hero-panel .foot{border-top:1px solid rgba(255,255,255,.22);padding-top:20px;font-size:var(--t-small);color:rgba(255,255,255,.82)}

/* ---------- team / gründer ---------- */
.team{display:grid;grid-template-columns:1fr;gap:28px;max-width:42rem;margin:0 auto}
@media(min-width:640px){.team{grid-template-columns:1fr 1fr}}
.team .member{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);border-top:4px solid var(--color-ink);background:#fff;padding:0 0 24px;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.team .member:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(0,0,0,.12);border-top-color:var(--color-accent)}
.team .member image-slot{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/4;border-radius:0}
.team .member image-slot::part(frame){background:#f4f4f6}
.team .member>div{padding:22px 24px 0}
.team .member .name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.3rem;letter-spacing:-.01em}
.team .member .role{color:var(--color-muted);font-size:var(--t-regular);margin-top:4px}

/* ---------- channel cards (linked) ---------- */
.chan{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.chan{grid-template-columns:repeat(3,1fr)}}
.chan.chan-2{max-width:760px;margin:0 auto}
@media(min-width:768px){.chan.chan-2{grid-template-columns:repeat(2,1fr)}}
.chan a{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--border);border-radius:var(--radius-card);background:#fff;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.chan a:hover{box-shadow:0 6px 18px rgba(17,17,20,.10);transform:translateY(-4px)}
.chan .ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:10px}
.chan .ico svg{width:24px;height:24px;stroke:var(--tawny)}
.chan h3{font-size:var(--t-h5)}
.chan p{font-size:var(--t-regular);color:var(--neutral-dark);flex:1}
.chan .more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--tawny);font-size:var(--t-regular)}
.chan .more svg{width:18px;height:18px}

/* ---------- terminal stele mockup (echtes Gerät) ---------- */
.hero-device{display:flex;justify-content:center}
.terminal{position:relative;display:flex;flex-direction:column;align-items:center;width:min(236px,76%)}
.terminal.lg{width:min(280px,88%)}
/* weicher Kontaktschatten am Boden */
.terminal::after{content:"";position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);width:128%;height:44px;background:radial-gradient(ellipse at center,rgba(6,6,9,.5),rgba(6,6,9,0) 68%);filter:blur(8px);z-index:-1}
/* mattschwarzer Korpus: vertikaler Verlauf, Rim-Light an den Kanten, oben Glanz */
.terminal-unit{position:relative;width:100%;padding:14px 14px 0;border-radius:20px 20px 5px 5px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 5%),
    linear-gradient(100deg,#000 0%,#202024 9%,#34343b 21%,#1a1a1f 48%,#0c0c10 76%,#000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px rgba(0,0,0,.75),
    inset 11px 0 16px rgba(255,255,255,.06),
    inset -13px 0 28px rgba(0,0,0,.72),
    0 1px 2px rgba(0,0,0,.6),
    0 24px 32px rgba(6,6,9,.34),
    0 54px 84px rgba(6,6,9,.4)}
.terminal-unit::before{content:"";position:absolute;inset:0;border-radius:20px 20px 5px 5px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 12%,transparent 88%,rgba(255,255,255,.045) 100%)}
/* Bildschirm: schwarzes Glas, Innen-Vignette, diagonaler Glanz */
.terminal-screen{position:relative;width:100%;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:radial-gradient(120% 78% at 50% 0%,#16161c,#070709 72%);box-shadow:0 0 0 2px #000,0 0 0 3px rgba(255,255,255,.06),inset 0 0 34px rgba(0,0,0,.6)}
.terminal-screen::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 0 30px rgba(0,0,0,.55)}
.terminal-screen::after{content:"";position:absolute;top:0;left:0;width:72%;height:100%;background:linear-gradient(118deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 28%,rgba(255,255,255,0) 58%);pointer-events:none;z-index:6;mix-blend-mode:screen}
/* unterer Korpus mit eingelassenem Logo */
.terminal-body{position:relative;height:152px;display:flex;align-items:center;justify-content:center;margin-top:14px}
.terminal-body::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.terminal-body::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 26%)}
.terminal-body img{height:19px;opacity:.36;filter:brightness(0) invert(1) drop-shadow(0 1px 0 rgba(0,0,0,.55))}
/* Bodenplatte mit Tiefe + schmaler Hals */
.terminal-base{position:relative;width:172%;height:22px;margin-top:0;border-radius:5px 5px 7px 7px;
  background:linear-gradient(180deg,#42424a 0%,#1d1d22 34%,#0b0b0e 70%,#040406 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 5px rgba(0,0,0,.65),0 18px 26px rgba(6,6,9,.42)}
.terminal-base::before{content:"";position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:26%;height:11px;
  background:linear-gradient(180deg,#2c2c33,#101014);border-radius:3px 3px 0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset -3px 0 7px rgba(0,0,0,.6)}
.terminal-base::after{content:"";position:absolute;left:7%;right:7%;top:1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
.terminal-screen .live{position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(13,27,42,.5);color:#fff;font-size:11px;font-weight:600;padding:6px 11px;border-radius:999px;white-space:nowrap}
.terminal-screen .live .dot{width:7px;height:7px;border-radius:50%;background:#43e08a}
@media(prefers-reduced-motion:no-preference){.terminal-screen .live .dot{animation:rxpulse 2s infinite}}
@keyframes rxpulse{0%{box-shadow:0 0 0 0 rgba(67,224,138,.6)}70%{box-shadow:0 0 0 8px rgba(67,224,138,0)}100%{box-shadow:0 0 0 0 rgba(67,224,138,0)}}
.terminal-screen image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:transparent}
/* leerer Screen = dunkles Display statt hellgrauer Kasten (image-slot exposes parts) */
.terminal-screen image-slot::part(frame){background:linear-gradient(162deg,#17171f 0%,#0a0a0e 60%,#060608 100%)}
.terminal-screen image-slot::part(ring){border-color:rgba(255,255,255,.14)}
.terminal-screen image-slot::part(empty){color:rgba(255,255,255,.5)}
/* sample ad rendered inside the screen */
.ad{position:absolute;inset:0;display:flex;flex-direction:column;color:#fff;padding:48px 20px 22px;z-index:2}
.ad .ad-top{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.ad .ad-mid{margin-top:auto}
.ad .ad-eyebrow{font-size:12px;font-weight:600;opacity:.85;margin-bottom:8px}
.ad .ad-role{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,5.5vw,28px);line-height:1.02;letter-spacing:-.025em}
.ad .ad-firma{font-size:12px;opacity:.9;margin-top:8px}
.ad .ad-free{align-self:flex-start;margin-top:14px;background:#fff;color:var(--tawny);font-weight:700;font-size:12px;padding:7px 11px;border-radius:6px}
.ad .ad-qr{margin-top:16px;display:flex;align-items:center;gap:12px}
.ad .ad-qr .qr{width:48px;height:48px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.ad .ad-qr .qr svg{width:30px;height:30px;stroke:var(--tawny)}
.ad .ad-qr span{font-size:12px;font-weight:600;line-height:1.3}

/* ---------- display showcase (device + floating spec rails) ---------- */
.display-show{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
@media(min-width:900px){.display-show{grid-template-columns:1fr minmax(250px,340px) 1fr;gap:48px}}
.display-show .terminal{width:100%;max-width:240px;margin:0 auto}
.display-show .terminal-body{height:84px;margin-top:9px}
.display-show .terminal-body img{height:15px}
.display-show .device-mid{display:flex;justify-content:center}
.chip-rail{display:none}
@media(min-width:900px){
  .chip-rail{display:block;position:relative;height:470px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
  .chip-track{display:flex;flex-direction:column}
}
.chip-track .spec-chip{margin-bottom:16px}
@media(min-width:900px) and (prefers-reduced-motion:no-preference){
  .chip-rail .chip-track{animation:railUp 26s linear infinite}
  .chip-rail.down .chip-track{animation-name:railDown}
  .chip-rail:hover .chip-track{animation-play-state:paused}
}
@keyframes railUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes railDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.spec-chip{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid rgba(5,2,5,.07);border-radius:16px;padding:17px 20px;box-shadow:0 1px 2px rgba(17,17,20,.04),0 10px 26px rgba(17,17,20,.06);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.spec-chip:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(17,17,20,.05),0 16px 36px rgba(17,17,20,.10)}
.spec-chip .ic{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:13px}
.spec-chip .ic svg{width:22px;height:22px;stroke:var(--tawny)}
.spec-chip .n{font-family:var(--font-display);font-weight:800;font-size:var(--t-h6);letter-spacing:-.015em;line-height:1.05}
.spec-chip .l{font-size:var(--t-small);color:var(--neutral);margin-top:4px;line-height:1.3}
/* mobile static spec grid */
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.spec-grid{margin-top:36px}
@media(min-width:900px){.spec-grid{display:none}}
@media(max-width:480px){.spec-grid{grid-template-columns:1fr}}

/* ---------- checklist (leistungsumfang) ---------- */
.checklist{display:flex;flex-direction:column;gap:14px;background:var(--tawny-lightest);border-radius:var(--radius-card);padding:28px}
.checklist .ci{display:flex;gap:12px;align-items:flex-start}
.checklist .ci svg{width:22px;height:22px;flex:none;stroke:var(--tawny);margin-top:1px}
.checklist .ci b{font-family:var(--font-display);font-weight:700;font-size:var(--t-regular);letter-spacing:-.01em}
.checklist .ci p{font-size:var(--t-small);color:var(--neutral-dark);margin-top:2px}

/* ---------- video player frame ---------- */
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-card);overflow:hidden;background:var(--tawny);box-shadow:0 24px 54px rgba(13,27,42,.22)}
.video-frame image-slot{width:100%;height:100%;aspect-ratio:16/9;border-radius:0;display:block}
.video-frame video-slot{position:absolute;inset:0;width:100%;height:100%}
.video-frame .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.video-frame .play span{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(13,27,42,.3)}
.video-frame .play svg{width:28px;height:28px;fill:var(--tawny);stroke:none;margin-left:3px}
.video-frame .vbadge{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(13,27,42,.6);color:#fff;font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px}
.video-frame .vbadge svg{width:15px;height:15px;stroke:#fff}

/* ---------- hero media grid (hochformat-felder, video oder bild) ---------- */
.hero-lead{max-width:52rem}
.hero-lead h1{margin-bottom:22px}
.hero-lead .sub{font-size:var(--t-medium);max-width:44rem;line-height:1.55;color:var(--neutral-dark);margin-bottom:0}
.hero-stats{display:flex;flex-wrap:wrap;gap:32px 56px;margin:36px 0 34px;padding-top:30px;border-top:1px solid var(--border);list-style:none}
.hero-stat .n{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,3.2vw,2.75rem);letter-spacing:-.02em;line-height:1;color:var(--neutral-darkest);display:block;white-space:nowrap}
.hero-stat .l{display:block;margin-top:8px;font-size:var(--t-small);color:var(--neutral);line-height:1.4;max-width:18ch}
.hero-gallery{max-width:940px;margin:0 auto}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px){.media-grid{grid-template-columns:repeat(2,1fr)}}
.media-cell{position:relative;aspect-ratio:9/16;border-radius:var(--radius-card);overflow:hidden;background:var(--neutral-lightest);box-shadow:0 14px 34px rgba(13,27,42,.12)}
.media-cell video-slot{position:absolute;inset:0}
.media-cell.tall{grid-row:span 1}
@media(min-width:820px){
  .media-grid.stagger{align-items:start}
  .media-grid.stagger .media-cell:nth-child(2){transform:translateY(28px)}
}

/* ---------- hero single photo ---------- */
.hero-photo{position:relative;width:100%;border-radius:var(--radius-card);overflow:hidden;background:var(--neutral-lightest);box-shadow:0 24px 54px rgba(13,27,42,.16)}
.hero-photo image-slot{width:100%;aspect-ratio:4/5;border-radius:0;display:block}
@media(min-width:992px){.hero-photo image-slot{aspect-ratio:5/6}}

/* ---------- video page ---------- */
.hero-video{max-width:960px;margin:8px auto 0}
.proc-grid{display:grid;grid-template-columns:1fr;gap:18px;counter-reset:proc}
@media(min-width:680px){.proc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.proc-grid{grid-template-columns:repeat(4,1fr);gap:24px}}
.proc-card{position:relative;border:1px solid var(--border);border-radius:var(--radius-card);padding:28px 24px;background:#fff;transition:box-shadow .2s var(--ease),transform .2s var(--ease)}
.proc-card:hover{box-shadow:0 10px 28px rgba(17,17,20,.07);transform:translateY(-3px)}
.proc-card .num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--tawny);line-height:1;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.proc-card .num .ic{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:11px}
.proc-card .num .ic svg{width:20px;height:20px;stroke:var(--tawny)}
.proc-card h3{font-size:var(--t-h5);margin:18px 0 8px}
.proc-card p{font-size:var(--t-regular);color:var(--neutral-dark);line-height:1.5}
.why-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
@media(min-width:768px){.why-grid{grid-template-columns:1fr 1fr;gap:24px}}
.why-card{border:1px solid var(--border);border-radius:var(--radius-card);padding:36px;background:#fff}
.why-card .ic{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:13px;margin-bottom:20px}
.why-card .ic svg{width:26px;height:26px;stroke:var(--tawny)}
.why-card .tag{font-size:var(--t-small);font-weight:600;color:var(--tawny);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}
.why-card h3{font-size:var(--t-h5);margin-bottom:10px}
.why-card p{font-size:var(--t-regular);color:var(--neutral-dark);line-height:1.55}

/* ---------- reveal ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}

/* ============================================================
   ZIP-STYLE (Relume-Layout) — scoped to pages with <body class="zip">
   Übernimmt Aufbau & Darstellung des Relume-Exports: Collage-Hero,
   Logo-Marquee, große zentrierte Feature-Sektion mit Landscape-Bild,
   Bild-Karten mit Overlay. Schrift bleibt Bricolage, Akzent bleibt #641e64.
   ============================================================ */
.zip .h1{font-size:clamp(2.85rem,7vw,5.5rem);line-height:1.02;letter-spacing:-.03em}
.zip .h2{font-size:clamp(2.4rem,5vw,4.25rem);line-height:1.08;letter-spacing:-.025em}
.zip .section{padding:72px 5%}
@media(min-width:768px){.zip .section{padding:104px 5%}}
@media(min-width:992px){.zip .section{padding:128px 5%}}

/* collage hero: seitliche Bild-Spalten + zentrierter Text (ZIP-Hero) */
.hero-collage{position:relative;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;min-height:78vh;padding:84px 5% 104px;overflow:hidden;text-align:center}
.hero-collage .hc-content{position:relative;z-index:3;max-width:48rem}
.hero-collage .hc-content .eyebrow{justify-content:center}
.hero-collage .hc-content h1{margin-bottom:22px}
.hero-collage .hc-content .sub{font-size:var(--t-medium);color:var(--neutral-dark);max-width:42rem;margin:0 auto}
.hero-collage .hc-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-collage .hc-side{display:none}
@media(min-width:992px){
  .hero-collage{grid-template-columns:minmax(160px,1fr) minmax(auto,46rem) minmax(160px,1fr);gap:30px}
  .hero-collage .hc-side{display:flex;flex-direction:column;gap:22px;width:100%}
  .hero-collage .hc-side image-slot,.hero-collage .hc-side video-slot{width:100%;border-radius:var(--radius-image);box-shadow:0 18px 44px rgba(13,27,42,.16);background:var(--neutral-lightest);display:block}
  .hero-collage .hc-side.left{padding-top:34px}
  .hero-collage .hc-side.left image-slot:nth-child(1){aspect-ratio:3/4}
  .hero-collage .hc-side.left image-slot:nth-child(2){aspect-ratio:1;margin-top:14px}
  .hero-collage .hc-side.right{padding-bottom:34px}
  .hero-collage .hc-side.right image-slot:nth-child(1){aspect-ratio:1}
  .hero-collage .hc-side.right image-slot:nth-child(2){aspect-ratio:3/4;margin-top:14px}
}

/* Logo-Marquee (ZIP animate-loop-horizontally) */
.logos-marquee{overflow:hidden}
.logos-marquee .mq-head{text-align:center;max-width:var(--max-lg);margin:0 auto 36px}
.logos-marquee .mq-head .h6{color:var(--neutral)}
.mq-viewport{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-track{display:flex;flex:0 0 auto;align-items:center;width:max-content;animation:mqX 36s linear infinite}
.logos-marquee:hover .mq-track{animation-play-state:paused}
@keyframes mqX{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq-track image-slot{flex:0 0 auto;width:172px;height:84px;margin:0 14px;border:1px solid rgba(5,2,5,.08);border-radius:14px;background:var(--neutral-lightest);display:block}
@media(prefers-reduced-motion:reduce){.mq-track{animation:none}}

/* Feature 145: zentriert, großes Icon + Headline + Landscape-Bild (ZIP) */
.feature145{text-align:center}
.feature145 .f-head{max-width:var(--max-lg);margin:0 auto 48px}
.feature145 .f-ico{width:80px;height:80px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;background:var(--tawny-lightest);border-radius:18px}
.feature145 .f-ico svg{width:38px;height:38px;stroke:var(--tawny)}
.feature145 .f-head .h2{margin:6px 0 20px}
.feature145 .f-head p{font-size:var(--t-medium);color:var(--neutral-dark)}
.feature145 .f-img{width:100%;aspect-ratio:16/9;border-radius:var(--radius-image);box-shadow:0 24px 54px rgba(13,27,42,.14)}

/* Bild-Karten mit Overlay (ZIP layout521) */
.imgcards{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:560px){.imgcards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:992px){.imgcards{grid-template-columns:repeat(4,1fr);gap:28px}}
/* Lösung/Pakete: saubere editoriale Karten (weiß, schwarze Oberkante) wie der Prozess-Block */
.imgcard{position:relative;display:flex;flex-direction:column;min-height:17rem;padding:34px 32px 34px;border:1px solid var(--border);border-top:3px solid var(--color-ink);border-radius:var(--radius-card);background:var(--color-bg);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.imgcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.12);border-top-color:var(--color-accent)}
.imgcard image-slot,.imgcard .scrim{display:none}
.imgcard .ico{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--neutral-lightest);border-radius:14px;margin-bottom:24px;transition:background-color .22s var(--ease)}
.imgcard:hover .ico{background:var(--tawny-lightest)}
.imgcard .ico svg{width:26px;height:26px;stroke:var(--color-accent)}
.imgcard h3{color:var(--color-ink);font-size:clamp(1.3rem,1.5vw,1.65rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:12px}
.imgcard p{color:var(--neutral-dark);font-size:var(--t-regular);line-height:1.55;flex:1}
.imgcard .btn-link{color:var(--color-ink);margin-top:26px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}
.imgcard .btn-link:hover{color:var(--color-accent)}
.imgcard .btn-link i{transition:transform .2s var(--ease)}
.imgcard:hover .btn-link i{transform:translateX(4px)}
.of-tile image-slot::part(empty){opacity:.2;color:#fff}
.of-tile image-slot::part(ring){border-color:transparent}

/* volle-Breite Kachel (z. B. Platzgeber werden unter den Standort-Kacheln) */
@media(min-width:768px){.of-tile.wide{grid-column:1 / -1;min-height:14rem}}

/* Stele-Mockup nach Referenzfoto: Screen oben, hoher schwarzer Korpus, Bodenplatte.
   Im Screen sitzt ein Anzeige-Slot (Drag&Drop) → Mockup-Wirkung. */
.terminal--photo .terminal-screen{aspect-ratio:9/13}
.terminal--photo .terminal-body{height:230px}
.terminal--photo .terminal-screen image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
/* Stele im Split-Hero rechts (Produkt-Mockup statt Vollflächen-Medium) */
.of-media--stele{display:flex;align-items:center;justify-content:center;clip-path:none!important;background:transparent!important;min-height:0!important;padding:48px 5%}
.of-media--stele .terminal{width:min(290px,82%)}

/* Stele als echtes Foto/Render (Drag&Drop-Feld, Hochformat inkl. Standfuß) */
.stele-slot{position:relative;inset:auto;display:block;width:min(430px,100%);height:auto;margin:0 auto;aspect-ratio:4/5;border-radius:0;overflow:hidden;background:#fff;box-shadow:none}
.stele-slot::part(empty){color:#8a8a93}
.stele-slot::part(frame){background:#fff}
.stele-slot::part(ring){border-color:transparent}

/* 3 Beispiel-Videos im Hochformat (9:16, Reels-Format) */
.reel3{display:grid;grid-template-columns:1fr;gap:18px;max-width:62rem;margin:0 auto}
@media(min-width:700px){.reel3{grid-template-columns:repeat(3,1fr);gap:22px}}
.reel3 video-slot{position:relative;inset:auto;display:block;width:100%;aspect-ratio:9/16;border-radius:var(--radius-card);overflow:hidden;background:#0d0d0d;box-shadow:0 18px 40px rgba(0,0,0,.14)}
.reel3 video-slot::part(frame){background:linear-gradient(165deg,#1a1a1f,#080809 70%)}
.reel3 video-slot::part(empty){color:rgba(255,255,255,.55)}
.reel3 video-slot::part(ring){border-color:rgba(255,255,255,.16)}

/* Standort-Kacheln: dezente Karten-Grafik im Hintergrund */
.of-tile--map{background-color:#101012;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.10%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M-20%20140%20C120%20100%2C200%20180%2C340%20150%20S560%2090%2C640%20130%22/%3E%3Cpath%20d%3D%22M-20%20300%20C100%20260%2C260%20330%2C400%20300%20S580%20260%2C640%20290%22/%3E%3Cpath%20d%3D%22M-20%20460%20C140%20430%2C240%20500%2C400%20460%20S560%20420%2C640%20450%22/%3E%3Cpath%20d%3D%22M140%20-20%20C120%20120%2C180%20240%2C150%20380%20S120%20540%2C140%20640%22/%3E%3Cpath%20d%3D%22M320%20-20%20C300%20140%2C360%20260%2C330%20420%20S300%20560%2C320%20640%22/%3E%3Cpath%20d%3D%22M480%20-20%20C460%20120%2C520%20260%2C490%20400%20S460%20540%2C480%20640%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%223%207%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2256%22/%3E%3Ccircle%20cx%3D%22330%22%20cy%3D%22300%22%20r%3D%2274%22/%3E%3Ccircle%20cx%3D%22480%22%20cy%3D%22460%22%20r%3D%2248%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.38%22%3E%3Cpath%20d%3D%22M150%20118c-13%200-23%2010-23%2023%200%2017%2023%2039%2023%2039s23-22%2023-39c0-13-10-23-23-23zm0%2031a8%208%200%201%201%200-16%208%208%200%200%201%200%2016z%22/%3E%3Cpath%20d%3D%22M330%20268c-13%200-23%2010-23%2023%200%2017%2023%2039%2023%2039s23-22%2023-39c0-13-10-23-23-23zm0%2031a8%208%200%201%201%200-16%208%208%200%200%201%200%2016z%22/%3E%3Cpath%20d%3D%22M480%20428c-13%200-23%2010-23%2023%200%2017%2023%2039%2023%2039s23-22%2023-39c0-13-10-23-23-23zm0%2031a8%208%200%201%201%200-16%208%208%200%200%201%200%2016z%22/%3E%3Cpath%20d%3D%22M230%20398c-13%200-23%2010-23%2023%200%2017%2023%2039%2023%2039s23-22%2023-39c0-13-10-23-23-23zm0%2031a8%208%200%201%201%200-16%208%208%200%200%201%200%2016z%22/%3E%3C/g%3E%3C/svg%3E");background-size:580px;background-position:center;background-repeat:no-repeat}

/* Breite Platzgeber-Kachel: deutlichere Karte (rechts sichtbar, Text links frei) */
.of-tile--map.wide{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20900%20360%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.16%22%20stroke-width%3D%222%22%3E%3Cpath%20d%3D%22M-20%2080%20C160%2050%2C300%20120%2C480%2090%20S780%2040%2C920%2080%22/%3E%3Cpath%20d%3D%22M-20%20200%20C140%20170%2C320%20240%2C520%20200%20S800%20160%2C920%20200%22/%3E%3Cpath%20d%3D%22M-20%20320%20C180%20290%2C340%20350%2C540%20310%20S800%20280%2C920%20310%22/%3E%3Cpath%20d%3D%22M200%20-20%20C180%20100%2C230%20220%2C200%20380%22/%3E%3Cpath%20d%3D%22M430%20-20%20C410%20110%2C470%20230%2C440%20380%22/%3E%3Cpath%20d%3D%22M660%20-20%20C640%20100%2C700%20240%2C670%20380%22/%3E%3Cpath%20d%3D%22M810%20-20%20C790%20120%2C840%20240%2C820%20380%22/%3E%3C/g%3E%3Cg%20stroke%3D%22%23ffffff%22%20stroke-opacity%3D%22.22%22%20stroke-width%3D%222%22%20stroke-dasharray%3D%223%207%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%22430%22%20cy%3D%22180%22%20r%3D%2286%22/%3E%3Ccircle%20cx%3D%22700%22%20cy%3D%22120%22%20r%3D%2252%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%22260%22%20r%3D%2256%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%22.55%22%3E%3Cpath%20d%3D%22M430%20132c-15%200-26%2011-26%2026%200%2019%2026%2044%2026%2044s26-25%2026-44c0-15-11-26-26-26zm0%2035a9%209%200%201%201%200-18%209%209%200%200%201%200%2018z%22/%3E%3Cpath%20d%3D%22M700%2080c-12%200-21%209-21%2021%200%2015%2021%2036%2021%2036s21-21%2021-36c0-12-9-21-21-21zm0%2028a7%207%200%201%201%200-14%207%207%200%200%201%200%2014z%22/%3E%3Cpath%20d%3D%22M210%20222c-12%200-21%209-21%2021%200%2015%2021%2036%2021%2036s21-21%2021-36c0-12-9-21-21-21zm0%2028a7%207%200%201%201%200-14%207%207%200%200%201%200%2014z%22/%3E%3Cpath%20d%3D%22M560%20280c-10%200-18%208-18%2018%200%2013%2018%2031%2018%2031s18-18%2018-31c0-10-8-18-18-18zm0%2024a6%206%200%201%201%200-12%206%206%200%200%201%200%2012z%22/%3E%3Cpath%20d%3D%22M310%2080c-10%200-18%208-18%2018%200%2013%2018%2031%2018%2031s18-18%2018-31c0-10-8-18-18-18zm0%2024a6%206%200%201%201%200-12%206%206%200%200%201%200%2012z%22/%3E%3C/g%3E%3C/svg%3E");background-size:cover;background-position:right center}

/* Bento-Grid (Linear/Apple-Stil): 1 große schwarze Kachel + 3 kleine */
.imgcards.bento{gap:18px}
@media(min-width:900px){
  .imgcards.bento{grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:minmax(15rem,auto)}
  .imgcards.bento .imgcard:nth-child(1){grid-row:1/3}
  .imgcards.bento .imgcard:nth-child(4){grid-column:2/4}
}
/* Bento = echte Bildkacheln: dunkles CI-Motiv + Scrim + weißer Text */
.imgcards.bento .imgcard{position:relative;overflow:hidden;background:var(--color-ink);border-color:var(--color-ink);border-top-color:var(--color-ink);justify-content:flex-end;padding:30px 30px 30px}
.imgcards.bento .imgcard:hover{border-top-color:var(--color-accent)}
.imgcards.bento .imgcard image-slot{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;margin:0;border-radius:0}
.imgcards.bento .imgcard image-slot::part(frame){border:none;border-radius:0;background:var(--color-ink)}
.imgcards.bento .imgcard image-slot::part(empty),.imgcards.bento .imgcard image-slot::part(ring){display:none}
.imgcards.bento .imgcard .scrim{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,12,.12) 0%,rgba(10,10,12,.46) 48%,rgba(10,10,12,.93) 100%);transition:background .22s var(--ease)}
.imgcards.bento .imgcard:hover .scrim{background:linear-gradient(180deg,rgba(10,10,12,.05) 0%,rgba(10,10,12,.28) 42%,rgba(10,10,12,.9) 100%)}
.imgcards.bento .imgcard .ico,.imgcards.bento .imgcard h3,.imgcards.bento .imgcard p,.imgcards.bento .imgcard .btn-link{position:relative;z-index:2}
.imgcards.bento .imgcard .ico{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);margin-bottom:auto}
.imgcards.bento .imgcard:hover .ico{background:rgba(255,255,255,.18)}
.imgcards.bento .imgcard .ico svg{stroke:#fff}
.imgcards.bento .imgcard h3{color:#fff;margin-top:22px}
.imgcards.bento .imgcard p{color:rgba(255,255,255,.82);flex:0}
.imgcards.bento .imgcard .btn-link{color:#fff}
.imgcards.bento .imgcard .btn-link:hover{color:rgba(255,255,255,.72)}
/* erste Kachel ist groß → Motiv darf größer wirken */
.imgcards.bento .imgcard:nth-child(1) h3{font-size:clamp(1.6rem,2.2vw,2.3rem);margin-top:26px}
.imgcards.bento .imgcard:nth-child(1) p{font-size:var(--t-medium)}

/* ============================================================
   OUTFRONT-STYLE v2 — <body class="of">
   Orientiert am Stil von outfront.com, in UNSERER Palette (#641e64),
   mit unserem Logo: weiß-dominant, ultrafette Grotesk (Archivo Black)
   in GROSSBUCHSTABEN mit Lila-Akzentwort, Split-Hero (Text links /
   Bild rechts mit diagonaler Kante), riesige Lila-Zahlen auf Weiß,
   diagonale Lila-Panels, Pill-Buttons. Eigener Akzent statt „/".
   ============================================================ */
.of h1,.of h2,.of h3,.of .h1,.of .h2,.of .h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.015em}
.of .h1{font-size:clamp(2.5rem,5.6vw,5.2rem);line-height:.96;letter-spacing:-.03em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:initial}
.of .h2{font-size:clamp(2.2rem,4.8vw,4.1rem);line-height:.97;letter-spacing:-.03em}
.of .h3{font-size:clamp(1.45rem,2.3vw,2.15rem);line-height:1.02}
.of .hl{color:var(--color-accent);font-style:italic}
.of .eyebrow{letter-spacing:.2em;text-transform:uppercase;font-size:.78rem;font-weight:700;color:var(--color-muted)}
.of .section{padding:84px 5%}
@media(min-width:992px){.of .section{padding:118px 5%}}
.of .btn{border-radius:999px;padding:13px 26px;font-weight:700}
.of .nav .btn{border-radius:999px}

/* SPLIT-HERO: Text links (weiß), Bild rechts mit diagonaler Kante + Play-Kreis */
.of-hero2{position:relative;display:grid;grid-template-columns:1fr;align-items:center;overflow:hidden}
@media(min-width:900px){.of-hero2{grid-template-columns:1.34fr .66fr;min-height:76vh}}
.of-hero2 .of-copy{position:relative;z-index:2;padding:56px 5% 56px;width:100%;max-width:48rem;justify-self:center}
@media(min-width:900px){.of-hero2 .of-copy{padding:72px 6% 72px 8%}}
.of-hero2 .of-copy h1{margin:14px 0 22px}
.of-hero2 .of-copy .sub{font-size:var(--t-large);color:var(--neutral-dark);max-width:34rem;margin-bottom:30px;line-height:1.4}
.of-hero2 .of-copy .sub strong{font-weight:700;color:var(--color-ink)}
.of-hero2 .of-actions{display:flex;gap:14px;flex-wrap:wrap}
.of-hero2 .of-media{position:relative;min-height:52vh;background:var(--neutral-lightest)}
@media(min-width:900px){.of-hero2 .of-media{min-height:80vh;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%)}}
.of-hero2 .of-media image-slot,.of-hero2 .of-media video-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;display:block;background:#161616}

/* Unterseiten-Hero: Medium volle Breite DARUNTER statt daneben (Homepage bleibt split) */
.of-hero2.stacked{display:block;min-height:0}
.of-hero2.stacked .of-copy{max-width:64rem;width:auto;justify-self:auto;padding:56px 5% 24px}
@media(min-width:900px){.of-hero2.stacked .of-copy{padding:80px 8% 28px}}
.of-hero2.stacked .of-copy .sub{max-width:46rem}
.of-hero2.stacked .of-copy h1{font-size:clamp(2.3rem,4.3vw,3.9rem)}
.of-hero2.stacked .of-media{clip-path:none;width:auto;min-height:42vh;margin:0 5% 60px;border-radius:var(--radius-card);overflow:hidden;background:var(--neutral-lightest)}
@media(min-width:900px){.of-hero2.stacked .of-media{min-height:52vh;margin:0 8% 84px}}
.of-hero2.stacked .of-play{right:5%;bottom:8%}
.of-play{position:absolute;right:7%;bottom:9%;z-index:3;width:122px;height:122px;border-radius:50%;background:var(--color-accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:.82rem;text-align:center;line-height:1.15;box-shadow:0 18px 40px rgba(40,12,40,.4);transition:background-color .15s var(--ease)}
.of-play svg{width:22px;height:22px;fill:#fff;stroke:none}
.of-play:hover{background:var(--tawny-dark)}

/* STATS: riesige Lila-Zahlen auf Weiß + Akzent-Links */
.of-stats2{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:768px){.of-stats2{grid-template-columns:repeat(3,1fr);gap:36px}}
.of-stats2{align-items:start}
.of-bignum{border-top:2px solid var(--color-ink);padding-top:22px}
.of-bignum .n{font-family:var(--font-display);font-weight:900;color:var(--color-ink);font-size:clamp(2.8rem,5.6vw,5.4rem);line-height:.9;letter-spacing:-.02em;display:block;white-space:nowrap}
.of-bignum .k{display:block;margin-top:14px;font-family:var(--font-body);font-weight:700;font-size:var(--t-h6);color:var(--neutral-darkest);letter-spacing:0;text-transform:none;line-height:1.25}
.of-bignum .lk{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:700;color:var(--neutral-darkest)}
.of-bignum .lk:hover{color:var(--tawny)}
.of-bignum .lk svg{width:18px;height:18px;stroke:var(--tawny)}

/* Editorial-Prozess: große Lila-Nummern, oben Linie (OUTFRONT) */
.of-steps{display:grid;grid-template-columns:1fr;gap:36px}
@media(min-width:768px){.of-steps{grid-template-columns:repeat(3,1fr);gap:40px}}
.of-step{border-top:2px solid var(--color-ink);padding-top:24px}
.of-step .no{font-family:var(--font-display);font-weight:900;color:var(--color-ink);font-size:clamp(2.4rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.02em}
.of-step h3{margin:16px 0 12px;font-size:var(--t-h5)}
.of-step p{color:var(--neutral-dark);font-size:var(--t-regular);line-height:1.55;text-transform:none}

/* Kontakt-Feinschliff: Formular als Karte */
.of #kontakt .form{background:var(--neutral-lightest);padding:34px;border-radius:var(--radius-card)}
@media(min-width:768px){.of #kontakt .form{padding:40px}}
.of #kontakt .contact-grid{align-items:center}

/* linksbündiger Editorial-Header, GROSS */
.of-head{max-width:52rem;margin-bottom:48px}
.of-head .h2{margin-top:14px}
.of-head .lead{font-family:var(--font-body);font-size:var(--t-large);color:var(--neutral-dark);margin-top:20px;line-height:1.45;text-transform:none;letter-spacing:0}

/* DIAGONALE PANEL-SEKTION: Bild + schräges Lila-Panel mit Text */
/* Statement-Sektion: volle schwarze Fläche, große Headline, dezenter Diagonal-Akzent (kein leerer Bild-Kasten) */
.of-panel{position:relative;background:var(--color-ink);color:#fff;border-radius:var(--radius-card);overflow:hidden;padding:52px 7% 56px}
@media(min-width:900px){.of-panel{padding:88px 9%}}
.of-panel::after{content:"";position:absolute;top:0;right:0;width:46%;height:100%;z-index:0;pointer-events:none;opacity:.6;background:repeating-linear-gradient(118deg,rgba(255,255,255,.05) 0 24px,transparent 24px 54px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 72%);mask-image:linear-gradient(90deg,transparent,#000 72%)}
.of-panel .of-panel-img{display:none}
.of-panel.has-media .of-panel-img{display:block;position:absolute;top:0;right:0;bottom:0;width:54%;z-index:0;pointer-events:none}
.of-panel.has-media .of-panel-img image-slot{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.of-panel.has-media .of-panel-img image-slot::part(frame){border:none;border-radius:0;background:transparent}
.of-panel.has-media .of-panel-img image-slot::part(empty),.of-panel.has-media .of-panel-img image-slot::part(ring){display:none}
.of-panel.has-media::after{display:none}
.of-panel .of-panel-body{position:relative;z-index:1;background:transparent;color:#fff;padding:0;clip-path:none;margin:0;max-width:50rem;display:block}
.of-panel .of-panel-body .eyebrow{color:var(--color-muted)}
.of-panel .of-panel-body h2{color:#fff;margin:16px 0 26px;font-size:clamp(2.4rem,5.4vw,4.8rem);line-height:.96}
.of-panel .of-panel-body p{font-family:var(--font-body);color:rgba(255,255,255,.82);font-size:var(--t-medium);line-height:1.6;text-transform:none;max-width:44rem}
.of-panel .of-panel-body .lk{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}
.of-panel .of-panel-body .lk svg{width:20px;height:20px}

/* diagonaler Streifen-Akzent (eigener Akzent statt „/") */
.of-accent{position:relative}
.of-accent::after{content:"";position:absolute;top:0;right:0;width:42%;height:100%;z-index:0;pointer-events:none;background:repeating-linear-gradient(118deg,rgba(100,30,100,.07) 0 22px,transparent 22px 48px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.of-accent>*{position:relative;z-index:1}

/* Format-/Standort-Kacheln mit Overlay */
.of-tiles{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){.of-tiles{grid-template-columns:repeat(2,1fr)}}
.of-tile{position:relative;min-height:20rem;display:flex;flex-direction:column;justify-content:flex-end;padding:38px;border-radius:var(--radius-card);overflow:hidden;color:#fff;isolation:isolate;transition:transform .25s var(--ease)}
.of-tile:hover{transform:translateY(-5px)}
.of-tile image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;z-index:-2;background:#161616;transition:transform .45s var(--ease)}
.of-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.86) 100%)}
@media(prefers-reduced-motion:no-preference){.of-tile:hover image-slot{transform:scale(1.03)}}
.of-tile .k{font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.9;margin-bottom:12px}
.of-tile h3{color:#fff;margin-bottom:10px}
.of-tile p{color:rgba(255,255,255,.88);font-size:var(--t-regular);max-width:34rem;text-transform:none}
.of-tile .more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.85rem}
.of-tile .more svg{width:18px;height:18px}

/* imgcard-Überschriften & spec-chips im of-Stil nicht zu groß */
/* Syne ist breiter → Karten-/Schritt-Headlines kleiner skalieren, damit nichts abschneidet */
.of .imgcard h3{font-size:clamp(1.2rem,1.4vw,1.5rem);line-height:1.14;letter-spacing:-.015em}
.of .of-tile h3{font-size:clamp(1.5rem,2.1vw,2.1rem);line-height:1.02;letter-spacing:-.01em}
.of .of-step h3{font-size:clamp(1.25rem,1.6vw,1.65rem);line-height:1.08}
.of .why-card h3,.of .proc-card h3{font-size:clamp(1.3rem,1.7vw,1.75rem);line-height:1.08}
.of .spec-chip .n,.of .stat .num,.of .live{text-transform:none}

/* ============ OUTFRONT v3 — mehr Variation (Bänder, Galerie, Zitat, Rhythmus) ============ */
/* helle/dunkle Sektionen: Eyebrow + lead auf farbigem Grund weiß */
.of .scheme-2 .eyebrow{color:var(--color-muted)}
.of .scheme-3 .eyebrow,.of .scheme-4 .eyebrow{color:rgba(255,255,255,.85)}
.of .scheme-3 .of-head .lead,.of .scheme-4 .of-head .lead{color:rgba(255,255,255,.86)}
.of .scheme-3 .h1,.of .scheme-3 .h2,.of .scheme-3 .h3,.of .scheme-4 .h1,.of .scheme-4 .h2,.of .scheme-4 .h3{color:#fff}
/* Akzentwort auf schwarzen Flächen: Lila wäre zu dunkel → weiß + kursiv als Betonung */
.of .scheme-4 .hl,.of .scheme-3 .hl,.of-panel .of-panel-body .hl{color:#fff;font-style:italic;opacity:1}
/* Stats auf farbigem Grund */
.of .scheme-3 .of-bignum,.of .scheme-4 .of-bignum{border-top-color:rgba(255,255,255,.45)}
.of .scheme-3 .of-bignum .n,.of .scheme-4 .of-bignum .n{color:#fff}
.of .scheme-3 .of-bignum .k,.of .scheme-4 .of-bignum .k{color:#fff}
.of .scheme-3 .of-bignum .lk,.of .scheme-4 .of-bignum .lk{color:#fff}
.of .scheme-3 .of-bignum .lk svg,.of .scheme-4 .of-bignum .lk svg{stroke:#fff}

/* Lila-Header-Band: Riesen-Headline + großes Bild darunter, diagonale Unterkante */
.of-band{position:relative;background:var(--color-ink);color:#fff;padding:56px 5% 5vw;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 3.5vw))}
.of-band .of-band-inner{max-width:var(--container);margin:0 auto}
.of-band .eyebrow{color:rgba(255,255,255,.82)}
.of-band h1,.of-band h2{color:#fff;font-size:clamp(2.6rem,7.4vw,6.2rem);line-height:.9;margin-top:10px}
.of-band .hl{color:#fff;opacity:.62}
.of-band .sub{color:rgba(255,255,255,.9);font-size:var(--t-large);max-width:46rem;margin-top:18px;line-height:1.4}
.of-band .of-band-media{position:relative;margin-top:36px;width:100%;aspect-ratio:16/8;overflow:hidden;background:var(--tawny-darker)}
.of-band .of-band-media image-slot,.of-band .of-band-media video-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;display:block;background:var(--tawny-darker)}
.of-band .of-band-media .of-play{right:5%;bottom:8%}

/* (Format-Galerie „Sieh, wie dein Spot wirkt" entfernt – kein toter Code mehr) */

/* Großes Typo-Testimonial */
.of-quote .of-quote-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:900px){.of-quote .of-quote-grid{grid-template-columns:170px 1fr;gap:44px}}
.of-quote .label{font-weight:700;font-size:var(--t-medium);text-transform:none}
.of-quote .arrow{margin-top:26px;width:58px;height:58px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer}
.of-quote .arrow svg{width:22px;height:22px;stroke:var(--text)}
.of-quote blockquote{margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,3.9vw,3.5rem);line-height:1.04;letter-spacing:-.01em;color:var(--color-ink)}
.of-quote blockquote .hl{color:var(--color-accent);font-style:italic}
.of-quote cite{display:block;margin-top:28px;font-style:normal;font-weight:700;text-transform:none;font-size:var(--t-medium);color:var(--color-muted);letter-spacing:0}

/* ============ Motion-Feinschliff (OUTFRONT, dezent) ============ */
.of .nav-links a:hover,.of .footer-nav a:hover{color:var(--color-accent)}
@media(prefers-reduced-motion:no-preference){
  .of .btn-link i,.of-tile .more i{transition:transform .2s var(--ease)}
  .of .btn-link:hover i,.of-tile:hover .more i{transform:translateX(4px)}
  /* animierter Akzent-Unterstrich in der Navigation */
  .of .nav-links a{background-image:linear-gradient(var(--color-accent),var(--color-accent));background-size:0% 2px;background-position:0 calc(100% - 2px);background-repeat:no-repeat;transition:background-size .25s var(--ease),color .15s}
  .of .nav-links a:hover,.of .nav-links a.active{background-size:100% 2px}
}

/* Karten-Seiten: kompakter Kopfbereich über der Map */
#standorte .of-head{margin-bottom:20px}
#standorte .map-meta{margin-bottom:18px}

/* ============================================================
   AWARD MOTION & CSS-3D  (motion.js steuert die Logik)
   Alles unter prefers-reduced-motion:no-preference + html.js gegated,
   damit ohne JS / mit Reduced-Motion nichts versteckt oder bewegt wird.
   ============================================================ */

/* sanftes Ankerscrollen */
@media(prefers-reduced-motion:no-preference){html.js{scroll-behavior:smooth}}

/* Scroll-Fortschritt */
.rx-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1200;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--color-accent),#b06fb0);pointer-events:none}

/* Seiten-Übergang: Vorhang */
.rx-curtain{position:fixed;inset:0;z-index:1300;background:var(--color-accent);display:flex;align-items:center;justify-content:center;transform:translateY(100%);pointer-events:none;will-change:transform}
.rx-curtain-mark{opacity:0;transform:scale(.82);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.rx-curtain-mark img{height:54px;filter:brightness(0) invert(1)}
.rx-curtain.is-cover{transform:translateY(0)}
.rx-curtain.is-cover .rx-curtain-mark{opacity:.92;transform:none}
.rx-curtain.is-reveal{transform:translateY(-100%);transition:transform .72s var(--ease)}
.rx-curtain.is-out{transform:translateY(0);transition:transform .5s var(--ease)}
.rx-curtain.is-out .rx-curtain-mark{opacity:.92;transform:none;transition:opacity .4s var(--ease) .08s,transform .5s var(--ease) .08s}
@media(prefers-reduced-motion:reduce){.rx-curtain{display:none}}

/* Reveals: stärker + nur mit JS versteckt */
@media(prefers-reduced-motion:no-preference){
  html:not(.js) .reveal{opacity:1 !important;transform:none !important;filter:none !important}
  html.js .reveal{opacity:0;transform:translateY(34px) scale(.985);filter:blur(5px);transition:opacity .7s var(--ease),transform .8s var(--ease),filter .7s var(--ease);transition-delay:var(--rd,0ms);will-change:opacity,transform}
  html.js .reveal.in{opacity:1;transform:none;filter:none}
}

/* Hero-Text: gestaffelter Einzug beim Laden */
@media(prefers-reduced-motion:no-preference){
  html.js .of-hero2 .of-copy>*{opacity:0;animation:rxHeroIn .95s var(--ease) both}
  html.js .of-hero2 .of-copy .eyebrow{animation-delay:.10s}
  html.js .of-hero2 .of-copy h1{animation-delay:.22s}
  html.js .of-hero2 .of-copy .sub{animation-delay:.40s}
  html.js .of-hero2 .of-copy .of-actions{animation-delay:.56s}
}
@keyframes rxHeroIn{from{opacity:0;transform:translateY(30px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}

/* 3D-Tilt + Glare auf Karten */
.rx-tilt{transform-style:preserve-3d;will-change:transform}
.rx-glare{position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;z-index:6;mix-blend-mode:soft-light;transition:opacity .3s var(--ease)}

/* magnetische Buttons brauchen sanften transform-Reset */
.of .btn,.of-play{transition:background-color .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease),transform .4s var(--ease)}

/* Maus-Spotlight auf dunklen Panels */
.of-panel.rx-spotlight::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:var(--mo,0);transition:opacity .4s var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(155,74,155,.30),transparent 60%)}

/* ---------- 3D-HERO-TERMINAL ---------- */
.of-hero2 .of-media--3d{clip-path:none !important;background:transparent;overflow:visible;perspective:1500px;display:flex;align-items:center;justify-content:center}
.rx-ambient{position:absolute;inset:-8% -4%;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 42% at 62% 38%,rgba(100,30,100,.16),transparent 70%),
    radial-gradient(36% 40% at 30% 78%,rgba(100,30,100,.08),transparent 72%)}
.rx-ambient::after{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(5,2,5,.05) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(60% 60% at 60% 45%,#000,transparent 75%);mask-image:radial-gradient(60% 60% at 60% 45%,#000,transparent 75%)}
.rx-stage{position:relative;z-index:1;width:100%;height:100%;min-height:46vh;display:flex;align-items:center;justify-content:center;transform-style:preserve-3d}
@media(min-width:900px){.rx-stage{min-height:72vh}}
.rx-device-float{transform-style:preserve-3d}
@media(prefers-reduced-motion:no-preference){html.js .rx-device-float{animation:rxFloat 7s ease-in-out infinite}}
@keyframes rxFloat{0%,100%{transform:translateY(-6px)}50%{transform:translateY(14px)}}
.rx-device{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease);will-change:transform}

/* Korpus + Screen */
.rx-bezel{position:relative;width:clamp(220px,23vw,300px);padding:11px;border-radius:24px 24px 8px 8px;transform:translateZ(40px);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 6%),linear-gradient(104deg,#000,#26262c 10%,#3a3a42 22%,#191920 50%,#0b0b0f 78%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(0,0,0,.7),inset -14px 0 30px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.5),0 34px 60px rgba(6,6,9,.4),0 70px 100px rgba(6,6,9,.32)}
.rx-screen{position:relative;aspect-ratio:9/16;border-radius:13px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,#16161c,#060608 72%);box-shadow:0 0 0 2px #000,inset 0 0 36px rgba(0,0,0,.6)}
.of-hero2 .of-media--3d .rx-screen video-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;background:#0a0a0e;display:block}
.rx-screen .rx-live{position:absolute;top:13px;left:13px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(8,4,8,.5);backdrop-filter:blur(4px);color:#fff;font-family:var(--font-body);font-size:11px;font-weight:600;padding:6px 11px;border-radius:999px}
.rx-screen .rx-live .dot{width:7px;height:7px;border-radius:50%;background:#43e08a}
@media(prefers-reduced-motion:no-preference){.rx-screen .rx-live .dot{animation:rxpulse 2s infinite}}
.rx-screenglare{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:13px;
  background:linear-gradient(118deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 56%);mix-blend-mode:screen}
@media(prefers-reduced-motion:no-preference){html.js .rx-screenglare{animation:rxSheen 8s ease-in-out infinite}}
@keyframes rxSheen{0%,72%,100%{opacity:.85;transform:translateX(0)}80%{opacity:1;transform:translateX(6%)}}

/* Standfuß (liest sich als Stele) */
.rx-neck{width:15%;height:30px;margin:0 auto;transform:translateZ(20px);background:linear-gradient(180deg,#2c2c33,#0e0e12);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset -3px 0 8px rgba(0,0,0,.6)}
.rx-foot{width:64%;height:15px;margin:0 auto;border-radius:5px 5px 8px 8px;transform:translateZ(8px);
  background:linear-gradient(180deg,#42424a,#1d1d22 36%,#0a0a0d);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 18px 26px rgba(6,6,9,.4)}
.rx-shadow{position:absolute;left:50%;bottom:-26px;width:128%;height:46px;transform:translateX(-50%) translateZ(-20px);
  background:radial-gradient(ellipse at center,rgba(6,6,9,.5),rgba(6,6,9,0) 68%);filter:blur(9px);z-index:-1}

/* schwebende Glas-Chips + Ring */
.rx-float{position:absolute;z-index:2;will-change:transform}
.rx-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;border-radius:14px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 30px rgba(17,17,20,.14);font-family:var(--font-body)}
.rx-chip i,.rx-chip svg{width:20px;height:20px;stroke:var(--color-accent)}
.rx-chip b{font-family:var(--font-display);font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1;color:var(--color-ink)}
.rx-chip span{font-size:.74rem;font-weight:600;color:var(--neutral-dark)}
.rx-chip--a{top:13%;right:3%}
.rx-chip--b{bottom:16%;left:2%}
.rx-ring{top:8%;left:6%;width:88px;height:88px;border-radius:50%;border:2px solid rgba(100,30,100,.28)}
.rx-ring::after{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(100,30,100,.4)}
@media(max-width:899px){.rx-chip,.rx-ring{display:none}}


/* Hero-Video-Panel: dezenter Einzug (Layout wie zuvor, nur sanft animiert) */
@media(prefers-reduced-motion:no-preference){
  html.js .of-hero2 .of-media[data-hero-media]{overflow:hidden}
  html.js .of-hero2 .of-media[data-hero-media] video-slot{animation:rxMediaIn 1.1s var(--ease) .15s both}
}
@keyframes rxMediaIn{from{opacity:0;transform:scale(1.07)}to{opacity:1;transform:scale(1)}}

/* ============================================================
   PREMIUM v2 — edler, tiefer, ruhiger
   ============================================================ */
html{--ease-lux:cubic-bezier(.16,1,.3,1)}

/* langsamere, geschmeidigere Reveals */
@media(prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(42px);filter:blur(6px);transition:opacity 1.1s var(--ease-lux),transform 1.25s var(--ease-lux),filter 1.1s var(--ease-lux);transition-delay:var(--rd,0ms)}
  html.js .reveal.in{opacity:1;transform:none;filter:none}
}

/* edle Heading-Wische: Text steigt hinter Maske hervor */
@media(prefers-reduced-motion:no-preference){
  html.js .reveal h2.h2{clip-path:inset(-6% -8% 105% -8%);transform:translateY(20px);transition:clip-path 1.15s var(--ease-lux) calc(var(--rd,0ms) + 80ms),transform 1.15s var(--ease-lux) calc(var(--rd,0ms) + 80ms)}
  html.js .reveal.in h2.h2{clip-path:inset(-6% -8% -12% -8%);transform:none}
}

/* edle Bild-Reveals: langsames Heranzoomen */
@media(prefers-reduced-motion:no-preference){
  html.js .imgcards.bento .imgcard.reveal image-slot,html.js .of-tile.reveal image-slot{transform:scale(1.16);transition:transform 1.5s var(--ease-lux)}
  html.js .imgcards.bento .imgcard.reveal.in image-slot,html.js .of-tile.reveal.in image-slot{transform:scale(1)}
}

/* Curtain ruhiger */
.rx-curtain.is-reveal{transition:transform .85s var(--ease-lux)}
.rx-curtain.is-out{transition:transform .55s var(--ease-lux)}

/* ---------- HERO-DEKO um das große Video ---------- */
.rx-hero-fx{position:absolute;inset:0;z-index:4;pointer-events:none}
@media(max-width:899px){.rx-hero-fx{display:none}}
.rx-hero-glow{position:absolute;top:50%;right:21%;width:48%;height:80%;transform:translateY(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(100,30,100,.22),transparent 72%);filter:blur(12px)}
.rx-hero-fx .rx-live{position:absolute;top:13%;right:27%;display:inline-flex;align-items:center;gap:7px;
  background:rgba(8,4,8,.62);backdrop-filter:blur(6px);color:#fff;font-family:var(--font-body);font-size:12px;font-weight:600;
  padding:7px 13px;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.rx-hero-fx .rx-live .dot{width:7px;height:7px;border-radius:50%;background:#43e08a}
@media(prefers-reduced-motion:no-preference){html.js .rx-hero-fx .rx-live .dot{animation:rxpulse 2s infinite}}
.rx-hero-fx .rx-chip--a{top:auto;left:auto;bottom:18%;right:26%}
.rx-hero-fx .rx-chip--b{top:34%;bottom:auto;left:auto;right:0}
@media(prefers-reduced-motion:no-preference){
  html.js .rx-hero-fx .rx-live,html.js .rx-hero-fx .rx-chip{opacity:0;animation:rxHeroIn 1.05s var(--ease-lux) both}
  html.js .rx-hero-fx .rx-live{animation-delay:.75s}
  html.js .rx-hero-fx .rx-chip--a{animation-delay:1s}
  html.js .rx-hero-fx .rx-chip--b{animation-delay:1.2s}
}

/* ---------- Button-Glanz beim Hovern ---------- */
.of .btn-primary{position:relative;overflow:hidden}
.of .btn-primary>*{position:relative;z-index:1}
.of .btn-primary::after{content:"";position:absolute;top:-10%;left:-130%;width:65%;height:120%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg)}
@media(prefers-reduced-motion:no-preference){.of .btn-primary:hover::after{animation:rxShine .85s var(--ease-lux)}}
@keyframes rxShine{from{left:-130%}to{left:150%}}

/* ---------- tiefere, weichere Schatten + Glanzkante ---------- */
.spec-chip{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(17,17,20,.05),0 16px 38px rgba(17,17,20,.09);transition:transform .45s var(--ease-lux),box-shadow .45s var(--ease-lux)}
.spec-chip:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 3px 6px rgba(17,17,20,.06),0 26px 54px rgba(17,17,20,.14)}
.of-tile{transition:transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux),border-color .3s var(--ease)}
.imgcards.bento .imgcard{box-shadow:0 2px 4px rgba(0,0,0,.06),0 26px 60px rgba(8,8,12,.28)}
.team .member{transition:transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux)}

/* ---------- weiches Licht folgt dem Cursor ---------- */
.rx-cursorlight{position:fixed;top:0;left:0;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:3;opacity:0;
  background:radial-gradient(closest-side,rgba(150,80,150,.20),transparent 70%);mix-blend-mode:screen;transition:opacity .5s var(--ease);will-change:transform}
@media(prefers-reduced-motion:reduce){.rx-cursorlight{display:none}}

/* ============================================================
   CONSENT-BANNER + KARTEN-PLATZHALTER (DSGVO)
   ============================================================ */
.rx-consent{position:fixed;left:0;right:0;bottom:0;z-index:1100;padding:0 16px 16px;transform:translateY(130%);transition:transform .55s var(--ease-lux,cubic-bezier(.16,1,.3,1))}
.rx-consent.show{transform:none}
.rx-consent-in{max-width:var(--container);margin:0 auto;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:16px;box-shadow:0 22px 60px rgba(8,8,12,.24);padding:20px 24px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.rx-consent-txt{flex:1 1 280px;min-width:0}
.rx-consent-txt strong{display:block;font-family:var(--font-display);font-weight:800;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:6px;color:var(--color-ink)}
.rx-consent-txt p{font-family:var(--font-body);font-size:.86rem;color:var(--neutral-dark);line-height:1.55;margin:0}
.rx-consent-txt a{color:var(--color-accent);text-decoration:underline;font-weight:600}
.rx-consent-btns{display:flex;gap:10px;flex:none}
.rx-consent .btn{cursor:pointer;white-space:nowrap}
.rx-c-reject{background:#f1f1f1;color:var(--color-ink);border-color:#e4e4e4}
.rx-c-reject:hover{background:#e7e7e7;border-color:#dcdcdc}
@media(max-width:640px){
  .rx-consent-in{flex-direction:column;align-items:stretch;gap:16px;padding:18px}
  .rx-consent-btns{flex-direction:column-reverse}
  .rx-consent .btn{width:100%}
}

/* Karten-Platzhalter (vor Einwilligung) */
.rx-map{position:relative}
.rx-map-ph{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
  background:linear-gradient(180deg,#fafafa,#f1f1f1);
  background-image:linear-gradient(180deg,rgba(250,250,250,.92),rgba(241,241,241,.96)),url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Cpath%20d%3D%22M0%2039.5H40M39.5%200V40%22%20stroke%3D%22%23dcdcdc%22%20stroke-width%3D%221%22%20fill%3D%22none%22/%3E%3C/svg%3E')}
.rx-map-ph-in{max-width:380px}
.rx-map-ph-in i,.rx-map-ph-in svg{width:34px;height:34px;stroke:var(--color-accent);margin-bottom:12px}
.rx-map-ph-t{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--color-ink);margin-bottom:8px}
.rx-map-ph-s{font-family:var(--font-body);font-size:.84rem;color:var(--neutral-dark);line-height:1.5;margin-bottom:18px}

/* Mobile: Hero-Video im vollen Hochformat zeigen (nichts abschneiden) */
@media(max-width:899px){
  .of-hero2 .of-media[data-hero-media]{min-height:0;aspect-ratio:9/16}
  .of-hero2 .of-media[data-hero-media] video-slot{position:absolute;inset:0}
}

/* Medien-Slots sind reine Anzeige – kein Klick/Doppelklick-Upload */
image-slot,video-slot{pointer-events:none}

/* Lange Wörter (z.B. Fachkräftemangel) auf schmalen Screens sauber umbrechen */
.of h1,.of h2,.of h3,.of .h1,.of .h2,.of .hl{overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto}

/* ---------- Lead-Magnet: Standortliste ---------- */
.leadmagnet{display:grid;grid-template-columns:1fr;gap:30px;align-items:center;background:var(--color-ink);color:#fff;border-radius:var(--radius-card);padding:40px 7%;position:relative;overflow:hidden}
@media(min-width:860px){.leadmagnet{grid-template-columns:1.05fr .95fr;padding:56px 6%}}
.leadmagnet .lm-text .eyebrow{color:var(--color-muted)}
.leadmagnet .lm-text h2{color:#fff;margin:12px 0 16px}
.leadmagnet .lm-text .hl{color:#fff;font-style:italic;opacity:1}
.leadmagnet .lm-text .lead{color:rgba(255,255,255,.82);max-width:34rem}
.lm-form{background:#fff;border-radius:16px;padding:26px 24px;color:var(--color-ink);box-shadow:0 24px 60px rgba(0,0,0,.28)}
.lm-form .field{margin-bottom:14px}
.lm-form label{display:block;font-family:var(--font-body);font-weight:600;font-size:.86rem;margin-bottom:6px;color:var(--color-ink)}
.lm-form input[type=email]{width:100%;padding:13px 14px;border:1px solid var(--border);border-radius:10px;font-size:1rem;font-family:var(--font-body);background:#fff}
.lm-form input[type=email]:focus{outline:none;border-color:var(--color-accent)}
.lm-form .check{display:flex;gap:9px;align-items:flex-start;font-size:.8rem;color:var(--neutral-dark);margin:2px 0 16px;cursor:pointer;line-height:1.4}
.lm-form .check a{color:var(--color-accent);text-decoration:underline}
.lm-form .btn{width:100%}