/* GM Projekte — Slider + Vorher/Nachher + Detailseite. Optik wie Mockup. */
:root{
  --gmp-navy:#0a2540; --gmp-paper:#fbf9f5; --gmp-sand:#f4efe7; --gmp-line:rgba(10,37,64,.12); --gmp-grey:#8d877d;
}
.gmp-proj,.gmp-ba,.gmp-single{font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;box-sizing:border-box}
.gmp-proj *,.gmp-ba *,.gmp-single *{box-sizing:border-box}
.gmp-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:rgba(10,37,64,.8)}
.gmp-eyebrow::before{content:"";width:30px;height:2px;flex:none;background:linear-gradient(90deg,var(--gmp-grey),rgba(141,135,125,0))}
.gmp-eyebrow.gmp-c{justify-content:center}

/* ===== Projekte-Slider ===== */
.gmp-proj{padding:clamp(60px,7vw,110px) 0;overflow:hidden}
.gmp-proj .gmp-p-head{margin:0 0 clamp(30px,4vw,48px);padding:0;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.gmp-proj h2{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(28px,3.4vw,44px);color:var(--gmp-navy);margin:14px 0 0;letter-spacing:-.5px;line-height:1.12}
.gmp-proj .gmp-p-head p{font-size:16px;color:#46505c;margin:10px 0 0;max-width:440px}
.gmp-p-nav{display:flex;gap:10px}
.gmp-p-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--gmp-line);background:#fff;color:var(--gmp-navy);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s}
.gmp-p-nav button:hover{background:var(--gmp-navy);color:#fff;border-color:var(--gmp-navy)}
/* kein Active/Focus-Einfärben (kein rosa) — nur Hover */
.gmp-p-nav button:focus,.gmp-p-nav button:focus-visible,.gmp-p-nav button:active{background:#fff;color:var(--gmp-navy);border-color:var(--gmp-line);outline:none;box-shadow:none}
.gmp-p-nav button:hover:focus,.gmp-p-nav button:hover:active{background:var(--gmp-navy);color:#fff;border-color:var(--gmp-navy)}
.gmp-p-nav button svg{width:20px;height:20px}
.gmp-p-nav button i{font-size:15px}
.gmp-p-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:6px 0 30px;scroll-padding-left:0}
.gmp-p-track::-webkit-scrollbar{display:none}
/* Projekte-Grid (Übersichtsseite) */
.gmp-proj-grid{max-width:1300px;margin-left:auto;margin-right:auto;padding-left:clamp(22px,5vw,56px);padding-right:clamp(22px,5vw,56px)}
.gmp-proj-grid .gmp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,30px)}
.gmp-grid .gmp-card{flex:none;width:auto}
@media(max-width:860px){.gmp-proj-grid .gmp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.gmp-proj-grid .gmp-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.gmp-grid{grid-template-columns:1fr}}
.gmp-card{flex:0 0 clamp(280px,30vw,400px);scroll-snap-align:start;text-decoration:none;display:block}
.gmp-ph{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--gmp-sand)}
.gmp-zoom{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.gmp-ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,37,64,.5),rgba(10,37,64,0) 45%)}
.gmp-card:hover .gmp-zoom{transform:scale(1.06)}
.gmp-cat{position:absolute;top:14px;left:14px;right:14px;z-index:2;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--gmp-navy);padding:6px 13px;border-radius:50px;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmp-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px 2px 0}
.gmp-meta-txt{min-width:0}
.gmp-card-logo{flex:none;display:flex;align-items:center}
.gmp-card-logo img{height:54px;width:auto;max-width:130px;object-fit:contain;display:block}
.gmp-meta h3{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:21px;color:var(--gmp-navy);margin:0 0 4px;letter-spacing:-.3px}
.gmp-loc{font-size:14px;color:#6b7480}
.gmp-go{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:14px;font-weight:600;color:var(--gmp-navy)}
.gmp-go svg,.gmp-go i{font-size:13px;width:auto;height:auto;transition:transform .25s}
.gmp-card:hover .gmp-go svg,.gmp-card:hover .gmp-go i{transform:translateX(4px)}
@media(max-width:860px){.gmp-card{flex-basis:80vw}}

/* ===== Vorher/Nachher ===== */
.gmp-ba{padding:clamp(60px,7vw,110px) 0}
.gmp-ba-in{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.gmp-ba-head{text-align:center;max-width:600px;margin:0 auto clamp(30px,4vw,46px)}
.gmp-ba h2{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(28px,3.4vw,44px);color:var(--gmp-navy);margin:14px 0 0;letter-spacing:-.5px}
.gmp-stage{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 44px 84px -46px rgba(10,37,64,.55);user-select:none;touch-action:none;cursor:ew-resize}
.gmp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gmp-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.gmp-lbl{position:absolute;bottom:16px;z-index:5;font-size:11.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#fff;background:rgba(10,37,64,.6);backdrop-filter:blur(6px);padding:7px 14px;border-radius:50px}
.gmp-lbl.gmp-b{left:16px}.gmp-lbl.gmp-a{right:16px}
.gmp-handle{position:absolute;top:0;bottom:0;z-index:4;width:3px;background:#fff;left:var(--pos,50%);transform:translateX(-50%);box-shadow:0 0 0 1px rgba(10,37,64,.08);pointer-events:none}
.gmp-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:0 10px 24px -8px rgba(10,37,64,.6);display:flex;align-items:center;justify-content:center;color:var(--gmp-navy)}
.gmp-knob svg{width:22px;height:22px}
.gmp-knob i{font-size:15px}
.gmp-ba-cta{display:flex;justify-content:center;margin-top:40px}
.gmp-ba-link{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;letter-spacing:.2px;color:var(--gmp-navy);text-decoration:none;border:1px solid var(--gmp-line);border-radius:50px;padding:14px 28px;transition:.25s}
.gmp-ba-link i{font-size:14px;transition:transform .25s}
.gmp-ba-link:hover,.gmp-ba-link:focus:hover,.gmp-ba-link:active:hover{background:var(--gmp-navy)!important;color:#fff!important;border-color:var(--gmp-navy)!important}
.gmp-ba-link:hover i{transform:translateX(4px)}
.gmp-ba-link:focus,.gmp-ba-link:active,.gmp-ba-link:visited{color:var(--gmp-navy)}
.gmp-thumbs{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.gmp-thumbs button{width:84px;height:58px;border-radius:11px;overflow:hidden;border:2px solid transparent!important;cursor:pointer;padding:0!important;background:none!important;transition:border-color .2s,opacity .2s;opacity:.6;outline:none!important;box-shadow:none!important}
.gmp-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.gmp-thumbs button:hover,.gmp-thumbs button:focus{border-color:var(--gmp-navy)!important;opacity:1}
.gmp-thumbs button.active{border-color:var(--gmp-navy)!important;opacity:1}
@media(max-width:600px){.gmp-stage{aspect-ratio:4/3}}


/* ===== Detailseite (conversion-optimiert) ===== */
.gmp-single-page{display:grid;grid-template-columns:300px 1fr;background:var(--gmp-paper);font-family:'Hanken Grotesk',system-ui,sans-serif;color:#1d2939}
.gmp-single-page *{box-sizing:border-box}
/* Sidebar */
.gmp-side{border-right:1px solid var(--gmp-line);background:#fff}
.gmp-side-in{position:sticky;top:110px;max-height:calc(100vh - 110px);overflow-y:auto;padding:28px 20px}
.gmp-side-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--gmp-navy);text-decoration:none;margin-bottom:22px}
.gmp-side-title{font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--gmp-grey);margin-bottom:14px}
.gmp-side-list{display:flex;flex-direction:column;gap:6px}
.gmp-side-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;text-decoration:none;background:#fff;border:0;transition:background .2s}
.gmp-side-item:hover{background:var(--gmp-sand)}
.gmp-side-item.active{background:var(--gmp-navy);border-color:var(--gmp-navy)}
.gmp-side-item.active .gmp-side-name{color:#fff}.gmp-side-item.active .gmp-side-loc{color:rgba(255,255,255,.6)}
.gmp-side-thumb{flex:0 0 52px;width:52px;height:52px;border-radius:9px;background:var(--gmp-sand) center/cover no-repeat}
.gmp-side-txt{display:flex;flex-direction:column;min-width:0}
.gmp-side-name{display:flex;align-items:center;gap:7px;min-width:0}
.gmp-side-ttl{font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:600;font-size:14.5px;color:var(--gmp-navy);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gmp-side-item.active .gmp-side-ttl{color:#fff}
.gmp-side-loc{font-size:12px;color:#6b7480;margin-top:2px}
/* Main + Hero */
.gmp-main{min-width:0}
.gmp-hero{position:relative;min-height:clamp(320px,52vh,560px);display:flex;align-items:flex-end;background:var(--gmp-navy) center/cover no-repeat;overflow:hidden}
.gmp-hero-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,16,29,.9) 0%,rgba(5,16,29,.35) 45%,rgba(5,16,29,.1) 100%)}
.gmp-hero-in{position:relative;z-index:1;padding:clamp(28px,5vw,60px);max-width:820px;color:#fff}
.gmp-hero-chip{display:inline-block;background:rgba(255,255,255,.92);color:var(--gmp-navy);font-size:12px;font-weight:600;letter-spacing:.4px;padding:6px 14px;border-radius:50px;margin-bottom:16px}
.gmp-hero h1{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(30px,4.4vw,58px);line-height:1.05;letter-spacing:-.6px;margin:0;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.gmp-hero-sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:15px;color:rgba(255,255,255,.9)}
.gmp-hero-logo{margin-top:22px;display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:12px;padding:10px 16px}
.gmp-hero-logo-lbl{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#6b7480}
.gmp-hero-logo img{height:30px;width:auto;display:block}
/* Specs */
.gmp-specs{display:flex;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--gmp-line)}
.gmp-spec{flex:1;min-width:140px;padding:20px clamp(20px,3vw,32px);border-right:1px solid var(--gmp-line)}
.gmp-spec:last-child{border-right:0}
.gmp-spec-l{display:block;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gmp-grey);margin-bottom:6px}
.gmp-spec-v{display:block;font-family:'Fraunces',Georgia,serif;font-size:20px;color:var(--gmp-navy)}
/* Body */
.gmp-body{padding:clamp(36px,5vw,72px) clamp(20px,5vw,72px);max-width:none}
.gmp-desc{max-width:760px}
.gmp-h2{margin-bottom:18px}
/* Vorher/Nachher auf Detailseite: weniger schwebend + kein extra Block-Padding */
.gmp-main .gmp-ba{padding:0}
.gmp-main .gmp-stage{box-shadow:0 16px 40px -26px rgba(10,37,64,.4);border:1px solid var(--gmp-line);aspect-ratio:16/9}
.gmp-block{margin-bottom:clamp(44px,6vw,72px)}
.gmp-h2{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(24px,3vw,36px);color:var(--gmp-navy);margin:0 0 24px;letter-spacing:-.4px}
.gmp-desc-block{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,60px)}
.gmp-desc{font-size:17px;line-height:1.75;color:#2c3744}
.gmp-desc p{margin:0 0 16px}
.gmp-leist h3{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:19px;color:var(--gmp-navy);margin:0 0 14px}
.gmp-leist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.gmp-leist li{position:relative;padding-left:28px;font-size:15.5px;color:#2c3744;line-height:1.4}
.gmp-leist li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--gmp-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center}
/* Galerie */
.gmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gmp-gi{position:relative;aspect-ratio:4/3;border:0;padding:0;border-radius:14px;overflow:hidden;cursor:zoom-in;background:var(--gmp-sand) center/cover no-repeat;transition:transform .4s}
.gmp-gi:hover{transform:translateY(-3px)}
.gmp-gi-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;background:rgba(10,37,64,0);transition:.3s}
.gmp-gi:hover .gmp-gi-zoom{background:rgba(10,37,64,.35);opacity:1}
.gmp-gi-zoom svg{width:30px;height:30px}
.gmp-gi-zoom i{font-size:22px}
/* Case-Study Zitat */
.gmp-quote{position:relative;color:#fff;border-radius:22px;overflow:hidden;padding:clamp(34px,5vw,60px);
  background:linear-gradient(135deg,#0e3055 0%,#0a2540 52%,#0c2a49 100%);
  box-shadow:0 30px 70px -42px rgba(10,37,64,.6)}
.gmp-quote::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 100% 0%, rgba(86,130,180,.28), rgba(10,37,64,0) 60%)}
.gmp-quote-in{position:relative;z-index:1;max-width:780px}
.gmp-quote-mark{font-size:30px;line-height:1;color:rgba(255,255,255,.28);margin-bottom:14px;display:block}
.gmp-quote blockquote{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(22px,3vw,34px);line-height:1.32;margin:0;color:#fff}
.gmp-quote-foot{display:flex;align-items:center;gap:14px;margin-top:28px}
.gmp-quote-av{width:54px;height:54px;border-radius:50%;object-fit:cover;border:0;flex:none}
.gmp-quote-id{display:flex;flex-direction:column;line-height:1.3}
.gmp-quote-name{font-size:15.5px;font-weight:600;color:#fff}
.gmp-quote-role{font-size:13.5px;color:rgba(255,255,255,.62);margin-top:1px}
/* CTA */
.gmp-cta{background:var(--gmp-sand);border-radius:22px;padding:clamp(34px,5vw,60px);text-align:center}
.gmp-cta h2{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(26px,3.2vw,40px);color:var(--gmp-navy);margin:0 0 12px;letter-spacing:-.4px}
.gmp-cta p{font-size:17px;line-height:1.6;color:#46505c;max-width:480px;margin:0 auto 26px}
.gmp-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.gmp-b1{display:inline-flex;align-items:center;gap:9px;background:var(--gmp-navy);color:#fff;border-radius:11px;padding:15px 28px;font-size:15px;font-weight:600;text-decoration:none;transition:.25s}
.gmp-b1,.gmp-b1:hover,.gmp-b1:focus,.gmp-b1:active,.gmp-b1:visited{color:#fff}
.gmp-b1:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(10,37,64,.6);background:var(--gmp-navy)}
.gmp-b2{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--gmp-navy);border:1px solid var(--gmp-line);border-radius:11px;padding:15px 26px;font-size:15px;font-weight:600;text-decoration:none;transition:.25s}
.gmp-b2:hover{border-color:var(--gmp-navy)}
/* Lightbox */
.gmp-lb{position:fixed;inset:0;z-index:99999;background:rgba(5,16,29,.94);display:none;align-items:center;justify-content:center}
.gmp-lb.open{display:flex}
.gmp-lb-img{max-width:90vw;max-height:88vh;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gmp-lb-x,.gmp-lb-prev,.gmp-lb-next{box-sizing:border-box;padding:0!important;border:0!important;color:#fff!important;background:rgba(255,255,255,.14)!important;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%!important;transition:background .2s;outline:none!important;box-shadow:none!important}
.gmp-lb-x:hover,.gmp-lb-prev:hover,.gmp-lb-next:hover{background:rgba(255,255,255,.28)!important}
.gmp-lb-x{position:absolute;top:20px;right:24px;width:46px;height:46px}
.gmp-lb-x i{font-size:22px}
.gmp-lb-prev,.gmp-lb-next{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px}
.gmp-lb-prev i,.gmp-lb-next i{font-size:20px}
.gmp-lb-prev{left:20px}.gmp-lb-next{right:20px}
/* Responsive */
@media(max-width:980px){
  .gmp-single-page{grid-template-columns:1fr}
  .gmp-side{border-right:0;border-bottom:1px solid var(--gmp-line);position:static;z-index:auto}
  .gmp-side-in{position:static;max-height:none;padding:12px 16px;display:flex;align-items:center;gap:14px;overflow-x:auto}
  .gmp-side-back{margin:0;white-space:nowrap}
  .gmp-side-title{display:none}
  .gmp-side-list{flex-direction:row;gap:8px}
  .gmp-side-item{flex:0 0 auto;padding:0;background:transparent !important;border:0 !important;border-radius:0}
  .gmp-side-txt{display:none}
  .gmp-side-thumb{flex:0 0 58px;width:58px;height:58px;border-radius:10px;border:2px solid transparent;outline:none}
  .gmp-side-item.active .gmp-side-thumb{border-color:var(--gmp-navy)}
}
@media(max-width:720px){
  .gmp-desc-block{grid-template-columns:1fr}
  .gmp-grid{grid-template-columns:1fr 1fr}
  .gmp-spec{min-width:50%;border-bottom:1px solid var(--gmp-line)}
}
@media(max-width:460px){.gmp-grid{grid-template-columns:1fr}}

/* ===== FAQ ===== */
.gmp-faq{padding:clamp(60px,7vw,110px) 0}
.gmp-faq-in{max-width:820px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.gmp-faq-head{text-align:center;margin-bottom:clamp(30px,4vw,50px)}
.gmp-faq h2{font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:clamp(28px,3.4vw,44px);color:var(--gmp-navy);margin:14px 0 0;letter-spacing:-.5px}
.gmp-faq-item{border-bottom:1px solid var(--gmp-line)}
.gmp-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-family:'Fraunces',Georgia,serif;font-weight:450;font-size:19px;color:var(--gmp-navy)}
.gmp-faq-item summary::-webkit-details-marker{display:none}
.gmp-faq-ic{flex:none;font-size:14px;color:var(--gmp-navy);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.gmp-faq-item[open] .gmp-faq-ic{transform:rotate(45deg)}
.gmp-faq-a{padding:0 0 24px;font-size:15.5px;line-height:1.65;color:#46505c;max-width:700px}
.gmp-faq-item[open] .gmp-faq-a{animation:gmpFade .35s ease}

/* ===== Mikro-Animationen (Reveal beim Scrollen + feine Hovers) ===== */
@keyframes gmpFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .gmp-card,.gmp-block,.gmp-spec,.gmp-side-item,.gmp-faq-item{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .gmp-card.gmp-in,.gmp-block.gmp-in,.gmp-spec.gmp-in,.gmp-side-item.gmp-in,.gmp-faq-item.gmp-in{opacity:1;transform:none}
}
/* feine Hovers */
.gmp-spec{transition:background .3s}
.gmp-spec:hover{background:var(--gmp-paper)}
.gmp-b1,.gmp-b2{transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.gmp-cta-btns a:active{transform:translateY(0)}
.gmp-hero-chip,.gmp-cat{transition:transform .3s}
.gmp-gi:active{transform:scale(.99)}

/* Vorher/Nachher — Art-Label oben links (Premium-Chip) */
.gmp-ba-art{position:absolute;top:16px;left:16px;z-index:5;font-size:13px;font-weight:700;letter-spacing:.3px;color:var(--gmp-navy);background:#fff;padding:9px 16px;border-radius:8px;box-shadow:0 10px 24px -12px rgba(10,37,64,.5);max-width:74%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sidebar — „Neu"-Badge (verschwindet nach 3 Monaten, serverseitig) */
.gmp-side-new{flex:none;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:#2f8f5b;border-radius:5px;padding:2px 6px;line-height:1.5}
.gmp-side-item.is-new .gmp-side-thumb{position:relative}
.gmp-side-item.is-new .gmp-side-thumb::after{content:"";position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;background:#2f8f5b;border:2px solid #fff}

/* ===== Marken-Logo-Slider [gm_logos] ===== */
.gml{max-width:1300px;margin:0 auto;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.gml-track{display:flex;width:max-content;align-items:center;gap:clamp(46px,5vw,84px);animation:gmlScroll 40s linear infinite}
.gml-track:hover{animation-play-state:paused}
@keyframes gmlScroll{to{transform:translateX(-50%)}}
/* Querformat-Handys und sehr flache Fenster: der volle Ausklang passt nicht
   in die Bildhoehe. Zitat weg, Zahl kleiner — Button und Leistungen bleiben. */
@media(max-height:520px) and (max-width:1024px){
  .gmps-quote,.gmps-who{display:none}
  .gmps-num b{font-size:34px;letter-spacing:-1.4px}
  .gmps-num span{font-size:12.5px;margin-top:6px}
  .gmps-list{gap:6px;margin-bottom:12px}
  .gmps-list li{font-size:13px}
  .gmps-head h2{font-size:clamp(24px,4.4vw,32px);letter-spacing:-1px}
  .gmps-out{margin-top:10px}
}

@media(prefers-reduced-motion:reduce){.gml-track{animation:none}}
.gml-logo{flex:none;display:flex;align-items:center;justify-content:center;height:60px;width:auto;max-width:240px;transition:opacity .3s,filter .3s}
.gml-logo img{max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.gml.is-gray .gml-logo{opacity:.5;filter:grayscale(1)}
.gml.is-gray .gml-logo:hover{opacity:1;filter:grayscale(0)}
@media(max-width:600px){.gml-logo{height:44px;max-width:160px}}

/* ===== Bewertungs-/Zitat-Slider [gm_testimonials] — 2-up Peek =====
   Section ohne eigenen Hintergrund/Padding/Breite: Farbe, Innenabstand
   und Contentbreite werden über die Elementor-Section gesteuert. */
.gmt{font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;box-sizing:border-box;color:#fff;position:relative}
.gmt *{box-sizing:border-box}
.gmt-in{position:relative;z-index:1}
.gmt .gmp-eyebrow{color:rgba(255,255,255,.7)}
.gmt .gmp-eyebrow::before{background:linear-gradient(90deg,var(--gmp-grey),rgba(141,135,125,0))}
.gmt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,42px)}
.gmt-head h2{font-family:'Fraunces',serif;font-weight:450;font-size:clamp(28px,3.4vw,44px);color:#fff;margin:12px 0 0;letter-spacing:-.5px;line-height:1.12}
.gmt-nav{display:flex;gap:10px}
.gmt-nav button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.25s;font-size:17px}
.gmt-nav button:focus,.gmt-nav button:focus-visible,.gmt-nav button:active{background:transparent;color:#fff;border-color:rgba(255,255,255,.25);outline:none;box-shadow:none}
.gmt-nav button:hover,.gmt-nav button:hover:focus,.gmt-nav button:hover:active{background:#fff;color:var(--gmp-navy);border-color:#fff}
.gmt-track{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 8px}
.gmt-track::-webkit-scrollbar{display:none}
.gmt-card{flex:0 0 clamp(300px,calc(50% - 50px),520px);scroll-snap-align:start;display:flex;flex-direction:column;min-height:540px;background:#fff;color:var(--gmp-navy);border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -50px rgba(0,0,0,.6)}
.gmt-img{aspect-ratio:16/10;background-size:cover;background-position:center;flex:none;position:relative}
.gmt-cat{position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--gmp-navy);padding:6px 13px;border-radius:8px;box-shadow:0 4px 14px -6px rgba(10,37,64,.4)}
.gmt-body{padding:clamp(26px,2.6vw,40px);display:flex;flex-direction:column;flex:1}
.gmt-logo{margin-bottom:20px}
.gmt-logo img{height:44px;width:auto;object-fit:contain;display:block}
.gmt-quote{font-family:'Fraunces',serif;font-weight:450;line-height:1.3;letter-spacing:-.3px;color:var(--gmp-navy);margin:0;font-size:clamp(19px,1.6vw,25px);flex:1}
.gmt-who{display:flex;align-items:center;gap:13px;margin-top:22px}
.gmt-who img{width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none}
.gmt-who b{display:block;font-size:15px;color:var(--gmp-navy)}
.gmt-who span{font-size:13px;color:#6b7480}
.gmt-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:600;color:var(--gmp-navy);text-decoration:none;transition:gap .25s}
.gmt-link:hover{gap:13px;color:var(--gmp-navy)}
.gmt-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.gmt-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:.25s}
.gmt-dots button.on{background:#fff;width:26px;border-radius:5px}
@media(max-width:820px){.gmt-card{flex:0 0 86%;min-height:0}}

/* ===== Vorher/Nachher — dunkle Variante [gm_vorher_nachher dark="1"] =====
   Gleiche Struktur wie hell, nur alles Navy auf Weiß gedreht.
   Hintergrund und Innenabstand kommen von der Elementor-Section, wie bei .gmt.
   Die :hover-Regeln der hellen Version tragen !important — die Overrides
   hier brauchen es deshalb ebenfalls, sonst gewinnt die Basisregel. */
.gmp-ba--dark{color:#fff}
.gmp-ba--dark .gmp-eyebrow{color:rgba(255,255,255,.72)}
.gmp-ba--dark .gmp-eyebrow::before{background:linear-gradient(90deg,rgba(255,255,255,.6),rgba(255,255,255,0))}
.gmp-ba--dark h2{color:#fff}

/* Schatten neutral statt navy-getönt — auf dunklem Grund war der Blaustich sichtbar */
.gmp-ba--dark .gmp-stage{box-shadow:0 44px 84px -46px rgba(0,0,0,.85)}

/* Ghost-Button: heller Rand, füllt sich weiß und dreht die Schrift auf Navy */
.gmp-ba--dark .gmp-ba-link,
.gmp-ba--dark .gmp-ba-link:focus,
.gmp-ba--dark .gmp-ba-link:active,
.gmp-ba--dark .gmp-ba-link:visited{color:#fff;border-color:rgba(255,255,255,.4)}
.gmp-ba--dark .gmp-ba-link:hover,
.gmp-ba--dark .gmp-ba-link:focus:hover,
.gmp-ba--dark .gmp-ba-link:active:hover{background:#fff!important;color:var(--gmp-navy)!important;border-color:#fff!important}

/* Thumbnail-Rahmen weiß statt navy */
.gmp-ba--dark .gmp-thumbs button:hover,
.gmp-ba--dark .gmp-thumbs button:focus,
.gmp-ba--dark .gmp-thumbs button.active{border-color:#fff!important}


/* ===== Vorher/Nachher-Story [gm_vorher_nachher_story] =====
   Die Bühne ist ein ECHTER Container in Endgröße: zentriert, maximal Contentbreite,
   ringsum Rand, oben zusätzlich Abstand zum Header. Das Bild füllt ihn per object-fit.
   Für Zug 1 wird der Container nur verkleinert und verschoben — man sieht also immer
   das ganze Foto, nicht einen Ausschnitt davon.

   BEWEGUNG NUR ÜBER transform: left/top/width/height ändern sich ausschließlich beim
   Resize, nie pro Frame. Damit läuft die Sequenz auf dem Compositor und ruckelt nicht.
   Der Eckenradius wird durch die Skalierung geteilt, sonst würde er mitwachsen. */
.gmps{background:#fff;--s:.44;--r:14px}
.gmps-track{height:340svh;position:relative}
.gmps-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#fff}

/* Header faehrt beim Betreten der Sequenz nach oben aus und danach wieder ein.
   WICHTIG: die transition sitzt auf der DAUERHAFTEN Klasse. Stuende sie in der
   Hide-Klasse, waere sie beim Entfernen sofort weg und der Header wuerde
   zurueckschnappen statt herunterzufahren.
   !important, weil der Theme-Header eigene transform-Regeln mitbringen kann. */
.gmps-headerctl{transition:transform .45s cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform}
.gmps-headerctl.gmps-headerhide{transform:translateY(-102%)!important;
  pointer-events:none!important}

.gmps-stage{position:absolute;overflow:hidden;
  left:var(--bx,0px);top:var(--by,0px);width:var(--bw,100%);height:var(--bh,100%);
  transform:translate3d(0,var(--ty,0px),0) scale(var(--s,.44));transform-origin:50% 50%;
  border-radius:calc(var(--r,14px) / var(--s,.44));
  will-change:transform;backface-visibility:hidden}
.gmps-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gmps-before{filter:grayscale(1) brightness(.52) contrast(1.1)}
.gmps-after{clip-path:inset(var(--rise,100%) 0 0 0)}
.gmps-edge{position:absolute;left:0;right:0;height:2px;z-index:3;top:var(--rise,100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  opacity:var(--edgeOpa,0);box-shadow:0 0 22px rgba(255,255,255,.5)}
/* Abdunklung fuer die Lesbarkeit, in ZWEI Ebenen getrennt:
   links begleitet die Leistungen waehrend des Aufstiegs, unten kommt erst, wenn
   Zahl und Zitat erscheinen. Zusammen als eine Flaeche wuerde der untere Verlauf
   waehrend des Aufstiegs wie ein Schmutzschleier ueber dem neuen Boden liegen. */
.gmps-shade,.gmps-shadeb{position:absolute;inset:0;z-index:4;pointer-events:none;
  transition:opacity .5s ease}
.gmps-shade{opacity:var(--shadeL,0);
  background:linear-gradient(90deg,rgba(4,12,20,.8) 0%,rgba(4,12,20,.4) 30%,transparent 56%)}
.gmps-shadeb{opacity:var(--shadeB,0);
  background:linear-gradient(0deg,rgba(4,12,20,.72) 0%,rgba(4,12,20,.26) 20%,transparent 42%)}

.gmps-head{position:absolute;left:50%;top:var(--headTop,33%);z-index:6;
  transform:translate(-50%,-50%) scale(var(--headScale,1));transform-origin:50% 50%;
  width:min(1100px,86vw);text-align:center}
.gmps-head h2{font-family:'Familjen Grotesk',sans-serif;font-weight:700;
  font-size:clamp(38px,4.6vw,64px);line-height:1.03;letter-spacing:-2px;color:#14191f;
  transition:color .35s ease,text-shadow .35s ease}
/* Sobald das Foto die Fläche übernimmt, steht die Headline auf dem Bild statt auf Weiß */
.gmps.over .gmps-head h2{color:#fff;text-shadow:0 2px 30px rgba(4,12,20,.55)}
.gmps.over .gmps-meta{color:rgba(255,255,255,.75)}
.gmps-meta{font-size:14px;color:#46505c;margin-top:16px;letter-spacing:.3px;
  opacity:var(--metaOpa,1);transition:opacity .3s ease}

/* Texte sitzen an der ENDGRÖSSE der Box und skalieren nicht mit — sie erscheinen
   ohnehin erst, wenn die Box ausgewachsen ist. */
.gmps-chip{position:absolute;z-index:7;background:rgba(255,255,255,.94);color:var(--gmp-navy);
  top:calc(var(--by,0px) + clamp(16px,2vw,28px));
  left:calc(var(--bx,0px) + clamp(18px,2.2vw,32px));
  font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;
  opacity:var(--chipOpa,0);transition:opacity .4s ease}
.gmps-overlay{position:absolute;z-index:7;display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(24px,4vw,60px);
  left:calc(var(--bx,0px) + clamp(18px,2.2vw,32px));
  right:calc(var(--bx,0px) + clamp(18px,2.2vw,32px));
  bottom:calc(var(--bb,0px) + clamp(18px,2.2vw,32px))}
.gmps-panel{color:#fff;max-width:min(420px,54vw)}
.gmps-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 20px;padding:0}
.gmps-list li{display:flex;align-items:center;gap:11px;font-size:15px;color:rgba(255,255,255,.55);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1),color .4s ease}
.gmps-list li.on{opacity:1;transform:none;color:#fff}
.gmps-tick{width:19px;height:19px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.35);
  display:flex;align-items:center;justify-content:center;transition:.4s ease}
.gmps-tick i{font-size:9px;color:#06121f;opacity:0;transition:opacity .25s ease .1s}
.gmps-list li.on .gmps-tick{background:#fff;border-color:#fff}
.gmps-list li.on .gmps-tick i{opacity:1}

.gmps-num{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.gmps-num.on{opacity:1;transform:none}
.gmps-num b{display:block;font-family:'Familjen Grotesk',sans-serif;font-weight:700;
  font-size:clamp(46px,6vw,86px);line-height:.95;letter-spacing:-3px;color:#fff}
.gmps-num span{display:block;font-size:14.5px;color:rgba(255,255,255,.62);margin-top:10px}

.gmps-out{text-align:right;max-width:min(360px,40vw);flex:none;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
.gmps-out.on{opacity:1;transform:none}
.gmps-quote{font-size:15px;line-height:1.5;color:rgba(255,255,255,.8);margin:0 0 6px}
.gmps-who{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:16px}
.gmps-cta{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;
  letter-spacing:.4px;color:#06121f;background:#fff;padding:13px 24px;border-radius:9px;text-decoration:none}
.gmps-cta:hover,.gmps-cta:focus,.gmps-cta:visited{color:#06121f}
.gmps-cta i{font-size:13px;transition:transform .25s}
.gmps-cta:hover i{transform:translateX(3px)}

@media(max-width:820px){
  .gmps-track{height:300svh}
  .gmps-head{width:88vw}
  .gmps-head h2{font-size:clamp(30px,8vw,42px);letter-spacing:-1.3px}
  .gmps-overlay{flex-direction:column;align-items:stretch;gap:0;
    left:calc(var(--bx,0px) + 16px);right:calc(var(--bx,0px) + 16px);
    bottom:calc(var(--bb,0px) + 16px)}
  .gmps-panel{max-width:none}
  .gmps-out{max-width:none;flex:initial;text-align:left;margin-top:16px}
  .gmps-list li{font-size:14px}
  .gmps-num b{font-size:48px;letter-spacing:-2px}
  .gmps-num span{font-size:13.5px}
  .gmps-quote{font-size:14.5px}
  .gmps-who{margin-bottom:13px}
  /* Am Ende weichen die Leistungen, damit Zahl, Zitat und Button ins Bild passen.
     grid-template-rows 1fr → 0fr statt max-height: kein Layout-Thrash. */
  .gmps-listwrap{display:grid;grid-template-rows:1fr;
    transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1),opacity .35s ease}
  .gmps-listwrap>*{overflow:hidden;min-height:0}
  .gmps-panel.done .gmps-listwrap{grid-template-rows:0fr;opacity:0}
}

/* Querformat-Handys und sehr flache Fenster: der volle Ausklang passt nicht
   in die Bildhoehe. Zitat weg, Zahl kleiner — Button und Leistungen bleiben. */
@media(max-height:520px) and (max-width:1024px){
  .gmps-quote,.gmps-who{display:none}
  .gmps-num b{font-size:34px;letter-spacing:-1.4px}
  .gmps-num span{font-size:12.5px;margin-top:6px}
  .gmps-list{gap:6px;margin-bottom:12px}
  .gmps-list li{font-size:13px}
  .gmps-head h2{font-size:clamp(24px,4.4vw,32px);letter-spacing:-1px}
  .gmps-out{margin-top:10px}
}

@media(prefers-reduced-motion:reduce){
  .gmps-track{height:auto}
  .gmps-sticky{position:static;height:auto;min-height:100svh}
  .gmps-stage{transform:none;border-radius:var(--r,14px)}
}