/* Lokal eingebettete Schriften (Bricolage Grotesque, Hanken Grotesk) — keine externen Aufrufe (DSGVO/privacy-by-default). OFL 1.1. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/bricolage-400.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/bricolage-500.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/bricolage-600.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/bricolage-700.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/hanken-400.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/hanken-500.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/hanken-600.woff2) format('woff2')}


:root{
  --ink:#16191F; --ink-2:#3a414b; --muted:#666D78;
  --paper:#FCFCFB; --paper-2:#F2F4F2; --paper-3:#EBEEEC;
  --dark:#0E1014;
  --accent:#2C6FB8; --accent-d:#235C9C;
  --grad:linear-gradient(125deg,#3FA3DD 0%,#4C61B4 52%,#6A46A1 100%);
  /* wie --grad, aber heller Blauanfang durch --accent ersetzt: traegt weisse Schrift (>=4.5:1) */
  --grad-cta:linear-gradient(125deg,#2C6FB8 0%,#4C61B4 52%,#6A46A1 100%);
  --grad-soft:linear-gradient(125deg,rgba(63,163,221,.14),rgba(106,70,161,.14));
  --line:#E2E4E1; --line-d:rgba(255,255,255,.12);
  --maxw:1280px;
  --head:98px;
  --ease:cubic-bezier(.22,.61,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light dark;background:#FCFCFB}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;-webkit-text-size-adjust:100%;}
body.lock{overflow:hidden}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;line-height:1.04;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,3.4vw,56px)}

.kick{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--accent);
  display:inline-flex;align-items:center;gap:10px}
.kick::before{content:"";width:22px;height:1px;background:var(--grad);flex:none}

.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Hanken Grotesk';font-weight:600;
  font-size:16px;padding:14px 24px;border-radius:2px;cursor:pointer;border:1px solid transparent;
  transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--grad)}
.btn-out{border-color:var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--ink)}
.btn svg{width:16px;height:16px}

/* header */
.site{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(252,252,251,.78);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.site.scrolled{border-color:var(--line)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head);gap:18px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{height:62px;width:auto}
.brand .bt b{font-family:'Bricolage Grotesque';font-weight:700;font-size:20px;letter-spacing:.01em;line-height:1;display:block}
.brand .bt span{font-size:11.5px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase;margin-top:4px;display:block;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(18px,1.9vw,32px)}
.nav a.lk{font-size:15.5px;font-weight:500;color:var(--ink-2);transition:color .25s;white-space:nowrap}
.nav a.lk:hover{color:var(--ink)}
.hdr-right{display:flex;align-items:center;gap:14px}
.cta{display:inline-flex;align-items:center;gap:10px;font-family:'Hanken Grotesk';font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:2px;cursor:pointer;border:none;background:var(--ink);color:var(--paper);white-space:nowrap;
  transition:background .35s var(--ease),transform .3s var(--ease)}
.cta:hover{background:var(--grad);transform:translateY(-1px)}
.cta .dot{width:8px;height:8px;border-radius:50%;background:#5fe39a;flex:none;
  box-shadow:0 0 0 0 rgba(95,227,154,.6);animation:pulse 2.6s infinite}
.cta .lbl-s{display:none}
.ig-link{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;color:var(--ink-2);transition:color .25s,background .25s,transform .25s;flex:none}
.ig-link:hover{color:var(--accent);background:var(--paper-2);transform:translateY(-1px)}
.ig-link svg{width:23px;height:23px;display:block}
.ig-menu{display:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,227,154,.5)}70%{box-shadow:0 0 0 8px rgba(95,227,154,0)}100%{box-shadow:0 0 0 0 rgba(95,227,154,0)}}
.seal{display:inline-flex;align-items:center;gap:7px;font-family:'Hanken Grotesk';font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:6px 13px;border:1px solid var(--line);border-radius:30px;color:var(--ink);background:var(--paper);white-space:nowrap}
.seal svg{width:14px;height:14px;color:var(--accent);flex:none}
.hdr-seal{margin-right:2px}
@media (max-width:1100px){.hdr-seal{display:none}}
.hero-tags{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.apply-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn-wa{background:#25D366;color:#fff;border:none}
.btn-wa:hover{filter:brightness(1.06);transform:translateY(-1px)}
.burger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{content:"";display:block;width:22px;height:1.6px;background:var(--ink);position:relative;transition:.3s}
.burger span::before{position:absolute;top:-7px}.burger span::after{position:absolute;top:7px}

/* hero */
.hero{padding:calc(var(--head) + clamp(30px,4.4vw,56px)) 0 clamp(34px,5vw,64px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(920px 720px at 96% 0%,rgba(106,70,161,.26),transparent 56%),radial-gradient(880px 720px at 102% 46%,rgba(63,163,221,.21),transparent 60%),radial-gradient(720px 600px at 80% 100%,rgba(106,70,161,.13),transparent 60%),linear-gradient(180deg,rgba(63,163,221,.06),transparent 40%)}
.hero .wrap{max-width:var(--maxw);position:relative;z-index:1}
.hero-head{max-width:1000px}
.h1{font-size:clamp(34px,6.4vw,104px);font-weight:600;letter-spacing:-.03em;margin-top:26px}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.h1 .ln>span{display:block}
.h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-top:38px;padding-bottom:46px;border-bottom:1px solid var(--line)}
.hero-sub p{font-size:clamp(17px,2vw,21px);color:var(--ink-2);max-width:36em;line-height:1.5}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-meta{display:flex;gap:48px;margin:26px 0 0;flex-wrap:wrap}
.hero-meta div small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block}
.hero-meta div b{font-family:'Bricolage Grotesque';font-weight:600;font-size:18px;margin-top:5px;display:block}
.hero-figure{margin:46px 0 0;aspect-ratio:16/8;overflow:hidden;background:var(--paper-2)}
.hero-figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}

/* section base */
.sec{padding:clamp(78px,10vw,130px) 0}
.sec.alt{background:var(--paper-2)}
.lead-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:end;margin-bottom:clamp(48px,6vw,76px)}
.lead-grid h2{font-size:clamp(30px,4.6vw,52px);font-weight:600}
.lead-grid .col-r{padding-bottom:6px}
.lead-grid .col-r p{color:var(--ink-2);font-size:19px}

/* leistungen icon grid */
.lst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lcard{display:flex;gap:18px;align-items:flex-start;padding:26px 24px;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);position:relative;overflow:hidden;
  transition:border-color .35s,transform .45s var(--ease),box-shadow .45s}
.lcard::after{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--grad);transition:width .55s var(--ease)}
.lcard:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 26px 44px -32px rgba(20,25,35,.5)}
.lcard:hover::after{width:100%}
.lcard .ic{width:40px;height:40px;flex:none;color:var(--accent);transition:transform .45s var(--ease)}
.lcard:hover .ic{transform:scale(1.1)}
.lcard .ic svg{width:100%;height:100%;display:block}
.lcard h3{font-size:18px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}
.lcard p{color:var(--muted);font-size:14.5px;line-height:1.5}

/* neu-highlight klimaanlagen */
.klm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:30px;align-items:center;
  padding:30px 32px;border:1px solid var(--line);border-radius:6px;margin-bottom:18px;
  background:var(--grad-soft),var(--paper);position:relative;overflow:hidden}
.klm::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--grad)}
.klm>*{position:relative;z-index:1;min-width:0}
.klm-ic{width:58px;height:58px;color:var(--accent);align-self:start;margin-top:3px}
.klm-ic>svg{width:100%;height:100%;display:block}
.klm-cta .btn-grad{background:var(--grad-cta);color:#fff;border:none}
.klm-cta .btn-grad:hover{filter:brightness(1.08);transform:translateY(-1px)}
.klm-badge{display:inline-block;font-family:'Hanken Grotesk';font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:5px 12px;border-radius:30px}
.klm-tx h2{font-size:clamp(21px,2.5vw,27px);font-weight:600;margin-top:12px;letter-spacing:-.01em}
.klm-tx p{color:var(--ink-2);font-size:15.5px;line-height:1.55;margin-top:9px;max-width:52em}
.klm-pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.klm-pts span{font-family:'Hanken Grotesk';font-size:13px;font-weight:600;color:var(--accent);
  border:1px solid rgba(44,111,184,.30);background:var(--paper);padding:5px 12px;border-radius:30px}

/* einsatzbereiche */
.eb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.eb{text-align:center;border:1px solid var(--line);border-radius:6px;padding:34px 24px 30px;background:var(--paper);
  position:relative;overflow:hidden;transition:border-color .35s,transform .45s var(--ease),box-shadow .45s}
.eb::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--grad);transition:width .55s var(--ease)}
.eb:hover{transform:translateY(-5px);border-color:transparent;box-shadow:0 28px 46px -32px rgba(20,25,35,.5)}
.eb:hover::after{width:100%}
.eb .ic{width:50px;height:50px;color:var(--accent);margin:0 auto 20px;transition:transform .5s var(--ease)}
.eb:hover .ic{transform:translateY(-2px) scale(1.06)}
.eb .ic svg{width:100%;height:100%;display:block}
.eb h3{font-size:18.5px;font-weight:600;margin-bottom:9px}
.eb p{color:var(--muted);font-size:14px;line-height:1.5}

/* anwendungsbereiche (fotos) */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.area .ph{aspect-ratio:5/4;overflow:hidden;background:var(--paper-3)}
.area .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.area:hover .ph img{transform:scale(1.05)}
.area .ak{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:20px 0 8px;display:inline-block}
.area h3{font-size:clamp(20px,2.3vw,25px);font-weight:600;margin-bottom:10px}
.area p{color:var(--muted);font-size:16px;line-height:1.5;max-width:30em}

/* projects editorial */
.proj-hero{aspect-ratio:16/7;overflow:hidden;background:var(--paper-3);margin-bottom:clamp(40px,6vw,72px)}
.proj-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 1.5s var(--ease)}
.proj-hero.in img{transform:scale(1)}
.features .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center;
  padding:clamp(46px,7vw,86px) 0;border-bottom:1px solid var(--line)}
.features .feature:first-child{border-top:1px solid var(--line)}
.features .feature:nth-child(even) .feat-media{order:2}
.features .feature:nth-child(even) .feat-body{order:1}
.feat-media{overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.feat-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.feature:hover .feat-media img{transform:scale(1.04)}
.feat-body .fkick{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.02em}
.feat-body h3{font-size:clamp(25px,3.2vw,38px);font-weight:600;margin:14px 0 16px;letter-spacing:-.02em}
.feat-body p{color:var(--ink-2);font-size:17px;line-height:1.58;max-width:34em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.tags span{font-size:13px;color:var(--ink-2);border:1px solid var(--line);padding:6px 13px;border-radius:30px}
.tags a.tag-brand{font-size:13px;color:var(--accent);border:1px solid rgba(44,111,184,.38);padding:6px 14px 6px 27px;border-radius:30px;text-decoration:none;cursor:pointer;position:relative;display:inline-flex;align-items:center;transition:background .25s var(--ease),border-color .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.tags a.tag-brand::before{content:"";position:absolute;left:12px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);transform:translateY(-50%);transition:background .25s,box-shadow .25s}
.tags a.tag-brand:hover,.tags a.tag-brand:focus-visible{background:var(--accent);color:#fff;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 16px rgba(44,111,184,.28)}
.tags a.tag-brand:hover::before,.tags a.tag-brand:focus-visible::before{background:#fff}
.tags a.tag-brand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.tags a.tag-brand{transition:background .2s,color .2s}.tags a.tag-brand:hover,.tags a.tag-brand:focus-visible{transform:none}}


/* weitere montagen */
.more-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:clamp(60px,8vw,96px) 0 36px;flex-wrap:wrap}
.more-head h3{font-size:clamp(22px,2.8vw,30px);font-weight:600}
.more-head p{color:var(--muted);font-size:16px}
.proj-teaser{display:none;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--paper);margin-top:6px;position:relative;overflow:hidden}
.proj-teaser .pt-ic{width:40px;height:40px;color:var(--accent);margin-bottom:6px}
.proj-teaser .pt-ic svg{width:100%;height:100%}
.proj-teaser h3{font-size:19px;font-weight:600;margin:0;letter-spacing:-.01em}
.proj-teaser p{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0 0 6px}
.proj-teaser .btn{width:100%;justify-content:center;margin-top:6px}
#secpop .proj-teaser{display:none}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:34px 30px}
.gal figure{margin:0}
.gal .ph{overflow:hidden;background:var(--paper-3);aspect-ratio:16/11}
.gal .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.gal figure:hover .ph img{transform:scale(1.04)}
.gal figcaption{margin-top:16px;font-size:16px;color:var(--muted);line-height:1.5;max-width:36em}
.gal figcaption b{font-family:'Bricolage Grotesque';font-weight:600;color:var(--ink);display:block;font-size:17px;margin-bottom:3px}

/* Projekte: kompaktes Mosaik */
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:14px;aspect-ratio:2/1;margin-top:10px}
.proj-grid .pg-tile{position:relative;overflow:hidden;border:none;padding:0;margin:0;cursor:pointer;border-radius:12px;background:var(--paper-3);min-width:0;min-height:0;display:block}
.proj-grid .pg-tile.big{grid-area:1/1/3/3}
.proj-grid .pg-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.proj-grid .pg-tile:hover img,.proj-grid .pg-tile:focus-visible img{transform:scale(1.06)}
.proj-grid .pg-tile::after{content:attr(data-label);position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;font:600 13.5px/1.25 'Hanken Grotesk';color:#fff;text-align:left;background:linear-gradient(to top,rgba(10,12,16,.8),transparent);opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;pointer-events:none}
.proj-grid .pg-tile:hover::after,.proj-grid .pg-tile:focus-visible::after{opacity:1;transform:none}
.proj-grid .pg-tile.more::after{display:none}
.proj-grid .pg-tile.more::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(31,84,145,.94),rgba(22,62,110,.94));z-index:1;transition:opacity .3s}
.proj-grid .pg-tile.more:hover::before{opacity:.92}
.proj-grid .pg-tile.more .more-lbl{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font:600 15px 'Hanken Grotesk';padding:10px;text-align:center}
.proj-grid .pg-tile.more .more-lbl svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.proj-grid .pg-tile.more:hover .more-lbl svg{transform:translateX(4px)}
.proj-grid .pg-tile:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.proj-cta{margin-top:20px}
.proj-cta .btn{justify-content:center}
@media (max-width:760px){
  .proj-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:none;aspect-ratio:auto;gap:11px}
  .proj-grid .pg-tile{aspect-ratio:1}
  .proj-grid .pg-tile.big{grid-area:auto;grid-column:1 / -1;aspect-ratio:16/10}
  .proj-grid .pg-tile::after{opacity:1;transform:none;padding:24px 14px 11px;font-size:12.5px}
  .proj-cta .btn{width:100%}
}
/* Projektgalerie-Overlay */
.pg-list{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin:6px 0 44px}
.pg-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.pg-card .pg-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-3)}
.pg-card .pg-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.pg-card:hover .pg-img img{transform:scale(1.05)}
.pg-card .pg-tx{padding:20px 22px 24px}
.pg-card .pg-tx .fkick{font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:.02em}
.pg-card .pg-tx h3{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:9px 0 10px;color:var(--ink)}
.pg-card .pg-tx p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0;max-width:none}
.pg-card .tags{margin-top:16px}
.pg-more-title{margin-top:4px}
@media (max-width:720px){.pg-list{grid-template-columns:1fr;gap:18px}}
@keyframes pgUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.legal.open .pg-card{animation:pgUp .5s var(--ease-out) both}
.legal.open .pg-card:nth-child(2){animation-delay:.07s}
.legal.open .pg-card:nth-child(3){animation-delay:.14s}
@media (prefers-reduced-motion:reduce){
  .proj-grid .pg-tile img,.pg-card .pg-img img{transition:none}
  .proj-grid .pg-tile:hover img,.proj-grid .pg-tile:focus-visible img,.pg-card:hover .pg-img img{transform:none}
  .legal.open .pg-card{animation:none}
}


/* ablauf */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.flow .fstep{padding:34px 26px 30px 0;border-bottom:1px solid var(--line);position:relative}
.flow .fstep::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--grad)}
.flow .fstep .fi{font-family:'Bricolage Grotesque';font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.05em}
.flow .fstep h3{font-family:'Bricolage Grotesque';font-weight:600;font-size:20px;margin:16px 0 9px;letter-spacing:-.01em}
.flow .fstep p{color:var(--muted);font-size:15.5px;line-height:1.5}

/* technik leiste */
.techbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.techbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;padding-top:36px;padding-bottom:36px}
.techbar .lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);max-width:240px}
.techbar .lbl small{display:block;margin-top:7px;font-size:11px;letter-spacing:.03em;text-transform:none;opacity:.75}
.brands{display:flex;gap:14px 40px;flex-wrap:wrap;align-items:center}
.brands span,.brands a{font-family:'Bricolage Grotesque';font-weight:600;font-size:21px;color:var(--ink);opacity:.55;transition:opacity .25s,color .25s;letter-spacing:-.01em;text-decoration:none}
.brands a{cursor:pointer}
.brands span:hover,.brands a:hover,.brands a:focus-visible{opacity:1;color:var(--accent)}
.brands a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* about */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,84px);align-items:center}
.about-grid h2{font-size:clamp(28px,4vw,46px);font-weight:600;margin-bottom:24px}
.about-grid p{color:var(--ink-2);font-size:18.5px;margin-bottom:18px;max-width:32em}
.facts{margin-top:38px;border-top:1px solid var(--line)}
.facts .fr{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.facts .fr b{font-family:'Bricolage Grotesque';font-weight:600;font-size:clamp(19px,2.3vw,24px)}
.facts .fr span{color:var(--muted);font-size:15px;text-align:right}
.about-img{aspect-ratio:4/5;overflow:hidden;background:var(--paper-3)}
.about-img img{width:100%;height:100%;object-fit:cover}

/* contact */
.contact{background:var(--dark);color:#EDEFF2;position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 460px at 86% 6%,rgba(106,70,161,.26),transparent 60%),radial-gradient(620px 440px at 6% 102%,rgba(63,163,221,.16),transparent 62%)}
.contact .wrap{position:relative;z-index:1;padding-top:clamp(86px,12vw,148px);padding-bottom:clamp(86px,12vw,148px)}
.contact .kick{color:#7FB0E0}.contact .kick::before{background:#7FB0E0}
.contact h2{font-size:clamp(34px,5.2vw,64px);font-weight:600;margin-top:24px;letter-spacing:-.03em;max-width:14em}
.contact .lead2{color:#A9B0BC;font-size:19px;margin-top:24px;max-width:32em}
.contact-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.contact-cta .btn-grad{background:var(--grad);color:#fff;border:none}
.contact-cta .btn-grad:hover{filter:brightness(1.08);transform:translateY(-1px)}
.contact-cta .btn-ghost{border:1px solid rgba(255,255,255,.2);color:#EDEFF2}
.contact-cta .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:clamp(50px,6vw,80px);border-top:1px solid var(--line-d);padding-top:46px}
.cgrid .ci small{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#9aa4b2;display:block;margin-bottom:10px}
.cgrid .ci a,.cgrid .ci span{font-size:18px;color:#EDEFF2;font-weight:500;line-height:1.4}
.cgrid .ci a{transition:color .25s}.cgrid .ci a:hover{color:#7FB0E0}

/* contact modal */
.cmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.cmodal.open{opacity:1;visibility:visible}
.cmodal-bg{position:absolute;inset:0;background:rgba(8,10,14,.72);backdrop-filter:blur(8px)}
.cmodal-card{position:relative;z-index:1;width:min(620px,100%);background:var(--dark);color:#EDEFF2;
  border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:clamp(28px,4vw,42px);
  transform:translateY(26px) scale(.98);opacity:0;transition:transform .55s var(--ease-out),opacity .55s;overflow:hidden auto;max-height:90vh;max-height:90dvh}
.cmodal.open .cmodal-card{transform:none;opacity:1}
.cmodal-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 320px at 92% -12%,rgba(106,70,161,.32),transparent 60%),radial-gradient(440px 300px at -5% 112%,rgba(63,163,221,.22),transparent 62%)}
.cmodal-card>*{position:relative;z-index:1}
.cmodal .x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:1px solid rgba(255,255,255,.16);
  background:none;border-radius:50%;color:#EDEFF2;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;z-index:2}
.cmodal .x:hover{background:rgba(255,255,255,.08);transform:rotate(90deg)}
.cmodal .x svg{width:18px;height:18px}
.cmodal .mk{font-size:13px;font-weight:600;letter-spacing:.04em;color:#7FB0E0;display:inline-flex;align-items:center;gap:10px}
.cmodal .mk::before{content:"";width:22px;height:1px;background:#7FB0E0}
.cmodal h3{font-size:clamp(24px,3.4vw,32px);font-weight:600;letter-spacing:-.02em;margin-top:14px}
.cmodal .sub{color:#A9B0BC;font-size:15.5px;margin-top:10px;max-width:36em}
.copts{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.copt{display:flex;align-items:center;gap:17px;padding:16px 18px;border:1px solid rgba(255,255,255,.12);
  border-radius:6px;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.copt:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04);transform:translateX(4px)}
.copt .ic{width:46px;height:46px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06)}
.copt .ic svg{width:21px;height:21px}
.copt.wa .ic{background:rgba(37,211,102,.14);color:#25D366}
.copt.call .ic{background:rgba(127,176,224,.16);color:#7FB0E0}
.copt.mail .ic{background:rgba(184,156,240,.16);color:#b89cf0}
.copt .tx{min-width:0}
.copt .tx small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#828c99;margin-bottom:3px}
.copt .tx b{font-family:'Bricolage Grotesque';font-weight:600;font-size:17.5px;color:#fff;display:block;line-height:1.2}
.copt .tx p{font-size:13px;color:#9aa2ad;margin-top:3px}
.copt .arr{margin-left:auto;flex:none;color:#6b7480;transition:transform .3s,color .3s}
.copt .arr svg{width:20px;height:20px}
.copt:hover .arr{transform:translateX(4px);color:#EDEFF2}
.cmodal .legal-note{font-size:12.5px;color:#6b7480;margin-top:22px;text-align:center}

.hwhy{margin-top:24px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.03)}
.hwhy small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#828c99;margin-bottom:9px}
.hwhy p{font-size:14.5px;line-height:1.62;color:#cfd4dc}
.hmodal .btn-grad{background:var(--grad);color:#fff;border:none;text-decoration:none;margin-top:22px;width:100%;justify-content:center}
.hmodal .btn-grad:hover{filter:brightness(1.08);transform:translateY(-1px)}
.hmodal .hcta svg{width:16px;height:16px}
.hmodal .legal-note{text-align:left;margin-top:18px;line-height:1.55}
/* footer */
.footer{background:var(--dark);color:#8b94a1;border-top:1px solid var(--line-d);padding:50px 0 34px}
.footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer .brand .bt b{color:#EDEFF2}.footer .brand .bt span{color:#6b7480}
.footer nav{display:flex;gap:26px;flex-wrap:wrap}
.footer nav a{font-size:14.5px;color:#8b94a1;transition:color .25s;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.footer nav a:hover{color:#EDEFF2}
.footer .cp{width:100%;border-top:1px solid var(--line-d);margin-top:34px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#98A1AE}

/* legal overlays */
.legal{position:fixed;inset:0;z-index:190;background:var(--paper);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(2%);transition:opacity .4s var(--ease),visibility .4s,transform .5s var(--ease-out)}
.legal.open{opacity:1;visibility:visible;transform:none}
.legal:target{opacity:1;visibility:visible;transform:none}
.legal-top{position:sticky;top:0;background:rgba(252,252,251,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:16px clamp(22px,3.4vw,56px);z-index:2}
.legal-top b{font-family:'Bricolage Grotesque';font-weight:600;font-size:17px}
.legal .x2{width:42px;height:42px;border:1px solid var(--line);background:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s;color:var(--ink)}
.legal .x2:hover{background:var(--paper-2);transform:rotate(90deg)}
.legal .x2 svg{width:18px;height:18px}
.legal-body{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,72px) clamp(22px,3.4vw,56px) 110px}
.legal-wide{background:
  radial-gradient(1000px 760px at 100% -4%,rgba(106,70,161,.16),transparent 56%),
  radial-gradient(880px 720px at -6% 6%,rgba(63,163,221,.12),transparent 58%),
  radial-gradient(820px 700px at 96% 102%,rgba(63,163,221,.10),transparent 60%),
  var(--paper)}
.legal-wide .legal-body{max-width:1140px}
@media (min-width:1500px){.legal-wide .legal-body{max-width:1280px}}
@media (min-width:1900px){.legal-wide .legal-body{max-width:1440px}}
@media (min-width:2400px){.legal-wide .legal-body{max-width:1620px}}
.legal-body h1{font-size:clamp(30px,5vw,46px);margin-bottom:14px;letter-spacing:-.02em}
.legal-body .intro{color:var(--muted);font-size:15px;margin-bottom:34px}
.legal-body h2{font-size:20px;margin:34px 0 12px}
.legal-body p,.legal-body li{color:var(--ink-2);font-size:15.5px;line-height:1.64;margin-bottom:10px}
.legal-body ul{margin:0 0 14px;padding-left:20px}
.legal-body a:not(.btn){color:var(--accent);text-decoration:underline}
.legal-body .btn{text-decoration:none}
.legal-body .ph{background:rgba(106,70,161,.1);border:1px dashed rgba(106,70,161,.45);border-radius:3px;padding:1px 7px;color:#6A46A1;font-weight:500;font-size:13.5px;white-space:nowrap}
.legal-body .hint{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px;padding:16px 18px;margin:8px 0 30px;font-size:14px;color:var(--ink-2)}
.legal-body .ueber-img{width:100%;border-radius:8px;margin:6px 0 30px;aspect-ratio:16/10;object-fit:cover;background:var(--paper-3)}

/* animations */
.js .u{opacity:0;transform:translateY(32px);transition:opacity .66s var(--ease-out),transform .78s var(--ease-out);transition-delay:var(--d,0s)}
html.ready .u{opacity:1;transform:none}
.js .h1 .ln>span{transform:translateY(110%);transition:transform 1s var(--ease-out);transition-delay:var(--d,0s)}
html.ready .h1 .ln>span{transform:none}
.js .hero-figure img{transition:transform 1.6s var(--ease)}
.js .hero-figure{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease);transition-delay:.5s}
html.ready .hero-figure{clip-path:inset(0 0 0 0)}
html.ready .hero-figure img{transform:scale(1)}
.js .rv{opacity:0;transform:translateY(42px);transition:opacity .62s var(--ease-out),transform .72s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.js .rvimg{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease)}
.js .rvimg.in{clip-path:inset(0 0 0 0)}
.js .rvimg img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.js .rvimg.in img{transform:scale(1)}

@media (max-width:1200px){
  .nav{position:fixed;inset:var(--head) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
    border-bottom:1px solid var(--line);padding:6px 0;transform:translateY(-130%);transition:transform .4s var(--ease);box-shadow:0 24px 40px -28px rgba(0,0,0,.3);
    max-height:calc(100vh - var(--head));max-height:calc(100dvh - var(--head));overflow-y:auto}
  .nav.open{transform:none}
  .nav a.lk{padding:16px 28px;border-bottom:1px solid var(--line);white-space:normal}
  .burger{display:flex}
  .ig-link{display:none}
  .ig-menu{display:block}
}
@media (max-width:960px){
  :root{--head:80px}
  .brand img{height:52px}
  .brand .bt b{font-size:18px}
  .hero-sub{grid-template-columns:1fr;gap:26px}
  .lead-grid{grid-template-columns:1fr;gap:20px}
  .lst-grid{grid-template-columns:1fr 1fr}
  .klm{grid-template-columns:auto minmax(0,1fr);gap:20px 22px;padding:26px 24px}
  .klm-cta{grid-column:1/-1}
  .eb-grid{grid-template-columns:1fr 1fr}
  .areas{grid-template-columns:1fr;gap:30px}
  .area .ph{aspect-ratio:2/1}
  .features .feature,.features .feature:nth-child(even) .feat-media,.features .feature:nth-child(even) .feat-body{grid-template-columns:1fr;order:0!important}
  .flow{grid-template-columns:1fr 1fr}
  .flow .fstep{padding-right:20px}
  .gal{grid-template-columns:1fr;gap:34px}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-img{aspect-ratio:4/3;max-height:460px}
  .cgrid{grid-template-columns:1fr 1fr;gap:30px 24px}
}
@media (max-width:600px){
  :root{--head:70px}
  body{font-size:17px}
  .hero-figure{aspect-ratio:4/3}
  .hero-sub{gap:22px}
  .hero-actions{width:100%;flex-direction:column;gap:11px}
  .hero-actions .btn{width:100%;justify-content:center;padding:15px 24px}
  .hero-meta{flex-direction:column;gap:16px;margin-top:30px}
  .hero-meta div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:13px}
  .hero-meta div small{margin:0}
  .hero-meta div b{margin-top:0;text-align:right}
  /* Neu-Highlight: alles untereinander, Knopf volle Breite */
  .klm{grid-template-columns:1fr;gap:15px;padding:20px 18px;border-radius:14px}
  .klm-ic{width:44px;height:44px}
  .klm-tx h2{font-size:19px;margin-top:11px}
  .klm-tx p{font-size:14px;margin-top:8px}
  .klm-pts{gap:7px;margin-top:13px}
  .klm-pts span{font-size:12px;padding:4px 10px}
  .klm-cta .btn{width:100%;justify-content:center;padding:15px 24px}
  /* Leistungen: 2 nebeneinander, kompakt; 9 Karten -> 2-2-2-2-1 */
  .lst-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lcard{display:block;gap:0;padding:16px 14px;border-radius:14px}
  .lcard .ic{width:34px;height:34px;margin-bottom:11px}
  .lcard h3{font-size:14.5px;margin-bottom:5px;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
  .lcard p{font-size:12.5px;line-height:1.45;overflow-wrap:break-word;hyphens:auto}
  /* einzelne letzte Karte (ungerade) volle Breite, Icon links / Text rechts */
  .lst-grid .lcard:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:16px 16px}
  .lst-grid .lcard:last-child:nth-child(odd) .ic{width:44px;height:44px;margin:0}
  /* Einsatzbereiche: 4 Karten -> 2-2 */
  .eb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .eb{padding:22px 14px 20px;border-radius:14px}
  .eb .ic{width:40px;height:40px;margin-bottom:13px}
  .eb h3{font-size:15px;margin-bottom:7px;overflow-wrap:break-word;hyphens:auto}
  .eb p{font-size:12.5px;line-height:1.45;overflow-wrap:break-word;hyphens:auto}
  .flow{grid-template-columns:1fr}
  .flow .fstep{padding:26px 0 24px}
  .cgrid{grid-template-columns:1fr}
  .contact-cta{flex-direction:column}
  .contact-cta .btn{width:100%;justify-content:center}
  .brand .bt span{font-size:10.5px;letter-spacing:.1em}
  .proj-hero{aspect-ratio:5/4}
  .cta .lbl-l{display:none}.cta .lbl-s{display:inline}
  .hdr-right{gap:8px}
  .ig-link{width:38px;height:38px}
  .ig-link svg{width:21px;height:21px}
}
@media (max-width:380px){
  .brand .bt{display:none}
  .brand img{height:42px}
  .hero-meta{gap:20px}
  .hero-meta div b{font-size:16px}
}
@media (min-width:1500px){:root{--maxw:1400px}}
@media (min-width:1900px){:root{--maxw:1560px}body{font-size:19px}}
@media (min-width:2400px){:root{--maxw:1760px}body{font-size:20px}}
@media (min-width:3000px){:root{--maxw:1980px}}
@media (prefers-color-scheme:dark){
  :root{--ink:#16191F;--ink-2:#3a414b;--muted:#666D78;--paper:#FCFCFB;--paper-2:#F2F4F2;--paper-3:#EBEEEC;--dark:#0E1014;--accent:#2C6FB8;--line:#E2E4E1;}
  html,body{background:#FCFCFB!important;color:#16191F}
  .site{background:rgba(252,252,251,.78)}
}
/* karriere */
.kr-kick{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  background:var(--grad-soft);color:var(--accent);padding:6px 14px;border-radius:30px;margin-bottom:18px}
.kr-kick svg{width:14px;height:14px}
.legal-body .kr-lead{color:var(--ink-2);font-size:17px;line-height:1.6;max-width:46em;margin-bottom:36px}
.kr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:0 0 26px}
.kr-grid>.kr-rise{display:flex}
.kr-grid .kr-card{flex:1}
.kr-hero{position:relative;border:1px solid var(--line);border-radius:16px;padding:clamp(28px,4vw,44px);margin-bottom:34px;overflow:hidden;
  background:linear-gradient(135deg,rgba(63,163,221,.10),rgba(106,70,161,.10))}
.kr-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 320px at 100% -10%,rgba(106,70,161,.22),transparent 60%),radial-gradient(440px 280px at -6% 120%,rgba(63,163,221,.18),transparent 62%)}
.kr-hero>*{position:relative;z-index:1}
.kr-hero h1{margin-bottom:12px}
.kr-hero .kr-lead{margin-bottom:0}
.ub-text p{color:var(--ink-2);font-size:16.5px;line-height:1.64;margin:0 0 16px;max-width:62em}
.ub-h{font-family:'Bricolage Grotesque';font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin:36px 0 18px}
.ub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 8px}
.kr-card{container-type:inline-size;border:1px solid var(--line);border-radius:12px;padding:30px 28px;background:var(--paper);position:relative;overflow:hidden;
  transition:border-color .35s,box-shadow .45s,transform .45s var(--ease)}
.kr-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--grad);transition:width .55s var(--ease)}
.kr-card:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 30px 52px -34px rgba(20,25,35,.5)}
.kr-card:hover::before{width:100%}
.kr-card .ic{width:42px;height:42px;color:var(--accent);margin-bottom:16px}
.kr-card .ic svg{width:100%;height:100%}
.kr-tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.kr-card h2{font-size:clamp(21px,2.5vw,27px);font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.kr-card>p{color:var(--ink-2);font-size:15px;line-height:1.58;margin:0 0 24px}
.kr-cols{display:grid;grid-template-columns:1fr;gap:18px 24px}
@container (min-width:420px){.kr-cols{grid-template-columns:1fr 1fr;gap:24px}}
.kr-cols h4{font-family:'Bricolage Grotesque';font-size:13.5px;font-weight:600;color:var(--ink);margin:0 0 12px}
.kr-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.kr-cols li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.45;margin:0;min-width:0;overflow-wrap:break-word;hyphens:auto}
.kr-cols li svg{width:15px;height:15px;flex:none;margin-top:2px}
.kr-cols .bring li svg{color:#6A46A1}
.kr-cols .give li svg{color:#2C9B6A}
.kr-apply{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:clamp(24px,3vw,32px);margin-top:14px}
.kr-apply h3{font-size:21px;font-weight:600;margin:0 0 8px}
.kr-apply p{color:var(--ink-2);font-size:15px;margin:0 0 18px}
.kr-apply .kr-note{font-size:13px;color:var(--muted);margin:16px 0 0}
.legal .kr-rise{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--kd,0s)}
.legal.open .kr-rise{opacity:1;transform:none}
.legal:target .kr-rise{opacity:1;transform:none}
@media (max-width:760px){
  .kr-grid{grid-template-columns:1fr}
  .kr-cols{grid-template-columns:1fr;gap:18px}
  .ub-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  html{scroll-behavior:auto}
  .js .u,.js .rv,.js .h1 .ln>span{opacity:1!important;transform:none!important;transition:none!important}
  .js .hero-figure,.js .rvimg{clip-path:none!important}
  .js .hero-figure img,.js .rvimg img{transform:none!important}
  .legal .kr-rise{opacity:1!important;transform:none!important;transition:none!important}
}
/* --- Bewertungen-Button (direkter Google-Link) --- */
.seal-rev{cursor:pointer;background:var(--grad-soft);border-color:transparent;gap:8px;padding:7px 12px 7px 13px;text-decoration:none;transition:transform .3s var(--ease),box-shadow .35s,background .3s}
.seal-rev:hover{transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(44,111,184,.55)}
.seal-rev .rstar{width:15px;height:15px;color:#FBBC04;flex:none}
.seal-rev .sep{color:var(--muted);margin:0 1px}
.seal-rev .ansehen{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.seal-rev .arr{width:13px;height:13px;color:var(--accent);flex:none;transition:transform .3s var(--ease)}
.seal-rev:hover .arr{transform:translate(2px,-2px)}
.seal-rev:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* --- Kleim Websites Credit --- */
.kw-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}
.kw-credit{display:block;width:100%;text-align:center;font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:clamp(11px,0.75rem,13px);font-weight:400;color:#98A1AE;cursor:pointer;margin-top:18px;padding:0;transition:color .25s}
.kw-credit:hover{color:#8b94a1;text-decoration:underline;text-underline-offset:2px}
.kw-toggle:focus-visible + .kw-credit{color:#8b94a1;outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.kw-pop{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
#kw-credit-toggle:checked ~ .kw-pop{display:flex}
.kw-pop-bg{position:absolute;inset:0;background:rgba(8,10,14,.55);backdrop-filter:blur(4px);cursor:pointer}
.kw-pop-card{position:relative;z-index:1;width:min(90vw,360px);background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -30px rgba(8,10,14,.5);padding:28px 24px 22px}
.kw-pop-card .kw-x{position:absolute;top:9px;right:9px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--muted);cursor:pointer;font-size:21px;line-height:1;transition:background .2s,color .2s}
.kw-pop-card .kw-x:hover{background:var(--paper-2);color:var(--ink)}
.kw-pop-card .kw-h{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;letter-spacing:-.01em;margin:0 0 2px;text-align:center}
.kw-pop-card .kw-tag{font-size:12.5px;color:var(--muted);margin:0 0 16px;text-align:center}
.kw-pop-card a.kw-link{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;border:1px solid var(--line);border-radius:8px;margin-top:8px;transition:border-color .2s,background .2s}
.kw-pop-card a.kw-link:hover{border-color:var(--accent);background:var(--grad-soft)}
.kw-pop-card a.kw-link svg{width:16px;height:16px;flex:none;color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
   Bausteine der Unterseiten. Wird von build.py an die Basis angehaengt.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Brotkrumen ─────────────────────────────────────────────────────────── */
.brd{border-bottom:1px solid var(--line);background:var(--paper);padding-top:var(--head)}
.brd ol{list-style:none;margin:0;padding:11px 0;display:flex;flex-wrap:wrap;align-items:center;gap:0}
.brd li{font-size:13px;color:var(--muted);display:flex;align-items:center;min-width:0}
.brd li+li::before{content:"";width:5px;height:5px;border-right:1.4px solid var(--line);
  border-bottom:1.4px solid var(--line);transform:rotate(-45deg);margin:0 11px;flex:none}
.brd a{color:var(--muted);text-decoration:none;transition:color .25s}
.brd a:hover{color:var(--accent)}
.brd [aria-current]{color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Seitenkopf der Unterseiten ─────────────────────────────────────────── */
.phero{padding:clamp(46px,6vw,86px) 0 clamp(40px,5vw,70px);position:relative;overflow:hidden;
  background:
    radial-gradient(900px 620px at 100% -20%,rgba(106,70,161,.12),transparent 58%),
    radial-gradient(760px 560px at -8% 0%,rgba(63,163,221,.10),transparent 60%),
    var(--paper)}
.brd+main .phero,main>.phero:first-child{padding-top:clamp(46px,6vw,86px)}
body>main>.phero:first-child{padding-top:calc(var(--head) + clamp(34px,4vw,58px))}
.brd~main>.phero:first-child{padding-top:clamp(46px,6vw,86px)}
.h1.ph1{font-size:clamp(31px,4.9vw,66px);line-height:1.04;margin-top:16px;letter-spacing:-.025em;
  max-width:17ch}
.phero-lead{margin-top:22px;max-width:56ch;font-size:clamp(16px,1.15vw,19px);line-height:1.62;
  color:var(--ink-2)}
.pfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:clamp(30px,4vw,48px);
  border-top:1px solid var(--line)}
.pfacts .fr{padding:16px 0 0;min-width:0}
.pfacts .fr small{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:#565D68;margin-bottom:6px}
.pfacts .fr b{font-size:15.5px;font-weight:600;color:var(--ink);overflow-wrap:break-word}

/* ── Text/Bild-Blöcke ───────────────────────────────────────────────────── */
.sp-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,4.6vw,72px);
  align-items:center}
.sp-rev .sp-tx{order:2}
.sp-rev .sp-img{order:1}
.sp-tx{min-width:0}
.sp-tx h2{margin:14px 0 20px;letter-spacing:-.02em}
.sp-tx p{color:var(--ink-2);line-height:1.68;margin:0 0 16px;max-width:58ch}
.sp-tx p:last-child{margin-bottom:0}
.sp-tx a:not(.btn){color:var(--accent);text-underline-offset:3px}
.sp-img{min-width:0;border-radius:12px;overflow:hidden;background:var(--paper-3)}
.sp-img img{display:block;width:100%;height:auto}
ul.tick{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:13px}
ul.tick li{position:relative;padding-left:26px;color:var(--ink-2);line-height:1.6;max-width:58ch}
ul.tick li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--grad-cta)}
ul.tick b{color:var(--ink);font-weight:600}

/* ── Leistungskarten als Links ──────────────────────────────────────────── */
a.lcard{text-decoration:none;color:inherit}
a.lcard h3{color:var(--ink)}
.lc-more{display:inline-block;margin-top:11px;font-size:13.5px;font-weight:600;color:var(--accent);
  transition:transform .3s var(--ease)}
a.lcard:hover .lc-more{transform:translateX(3px)}
a.area{text-decoration:none;color:inherit;display:block}
a.pg-tile{text-decoration:none;display:block}

/* ── Personal-Band ──────────────────────────────────────────────────────── */
.hire{padding:clamp(40px,5vw,64px) 0;background:var(--paper);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.hire-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,48px);align-items:center;
  border:1px solid var(--line);border-radius:16px;padding:clamp(26px,3.4vw,42px);
  background:linear-gradient(135deg,rgba(63,163,221,.10),rgba(106,70,161,.10))}
.hire-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#fff;background:var(--grad-cta);padding:5px 11px;border-radius:999px}
.hire-tx h2{font-size:clamp(23px,2.7vw,36px);margin:14px 0 12px;letter-spacing:-.02em}
.hire-tx p{color:var(--ink-2);line-height:1.62;max-width:54ch;margin:0}
.hire-links{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.hire-links a{font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  transition:border-color .3s,color .3s,transform .3s var(--ease)}
.hire-links a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.hire-cta{flex:none}

/* ── Stellenanzeigen ────────────────────────────────────────────────────── */
.kr-phero .kr-tag{font-size:12px}
/* auto-fit statt fester Spaltenzahl: die Stellen aendern sich, das Raster
   soll bei zwei Karten nicht mit einer Luecke dastehen. */
.kr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
a.kr-card{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:12px;padding:26px 24px 24px;background:var(--paper);
  transition:border-color .35s,transform .45s var(--ease),box-shadow .45s;flex:none}
a.kr-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,26,40,.07)}
a.kr-card h2{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
a.kr-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0 0 16px}
.kr-more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--accent)}
.kr-more svg{width:16px;height:16px;transition:transform .3s var(--ease)}
a.kr-card:hover .kr-more svg{transform:translateX(3px)}
.tasklist{list-style:none;margin:26px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 34px}
.tasklist li{display:flex;gap:11px;align-items:flex-start;color:var(--ink-2);line-height:1.55;min-width:0}
.tasklist li svg{width:19px;height:19px;flex:none;margin-top:3px;color:var(--accent)}
.kr-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 34px}
.kr-cols>div{border:1px solid var(--line);border-radius:12px;padding:26px 24px;background:var(--paper)}
.kr-cols h3{font-size:17px;font-weight:600;margin:0 0 16px;color:var(--ink)}
.kr-cols li svg{width:17px;height:17px;flex:none;margin-top:3px}
.kr-apply h2{font-size:clamp(21px,2.4vw,28px);margin:0 0 12px}
.kr-apply p{color:var(--ink-2);line-height:1.62;max-width:58ch;margin:0 0 6px}
.kr-note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:16px}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq-sec .fq-list{margin-top:clamp(26px,3vw,40px);border-top:1px solid var(--line);max-width:900px}
.fq{border-bottom:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:22px;padding:22px 0;font-size:clamp(16px,1.2vw,18.5px);font-weight:600;color:var(--ink);
  transition:color .25s}
.fq summary::-webkit-details-marker{display:none}
.fq summary:hover{color:var(--accent)}
.fq summary svg{width:21px;height:21px;flex:none;margin-top:2px;color:var(--muted);
  transition:transform .3s var(--ease),color .25s}
.fq[open] summary svg{transform:rotate(180deg);color:var(--accent)}
.fq-a{padding:0 0 24px;max-width:66ch}
.fq-a p{color:var(--ink-2);line-height:1.68;margin:0 0 12px}
.fq-a p:last-child{margin-bottom:0}
.fq-a a{color:var(--accent);text-underline-offset:3px}

/* ── Kontaktseite ───────────────────────────────────────────────────────── */
.kontakt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kk{border:1px solid var(--line);border-radius:14px;padding:clamp(26px,3vw,38px);background:var(--paper);
  min-width:0}
.kk h2{font-size:clamp(20px,2.2vw,26px);margin:0 0 20px}
.nap{font-style:normal;line-height:1.75;color:var(--ink-2);margin:0 0 22px}
.nap b{color:var(--ink);font-weight:600}
.napd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px 22px;margin:0 0 24px}
.napd dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.napd dd{margin:0;font-size:16.5px;font-weight:500;color:var(--ink);min-width:0;overflow-wrap:break-word}
.napd dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  transition:color .25s,border-color .25s}
.napd dd a:hover{color:var(--accent);border-color:var(--accent)}

/* ── Reine Textseiten (Impressum, Datenschutz) ──────────────────────────── */
.textpage{padding-top:clamp(44px,5vw,72px)}
.prose{max-width:78ch;margin:0 auto}
.prose h1{font-size:clamp(30px,5vw,46px);margin:0 0 14px;letter-spacing:-.02em}
.prose h2{font-size:20px;margin:36px 0 12px}
.prose p{color:var(--ink-2);line-height:1.72;margin:0 0 13px;font-size:16px}
.prose .intro{color:var(--muted);font-size:15px;margin-bottom:34px}
.prose a{color:var(--accent);text-underline-offset:3px;overflow-wrap:break-word}
.prose ul{color:var(--ink-2);line-height:1.72;padding-left:20px}

/* ── Projektseite: Karten tragen jetzt h2 ───────────────────────────────── */
.pg-card .pg-tx h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:9px 0 10px;color:var(--ink)}
.pg-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.pg-gal{margin-top:clamp(26px,3vw,40px)}

/* ── Fußzeile: Leistungsspalte ──────────────────────────────────────────── */
.footer .fnav{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-bottom:4px}
.footer .fnav-h{width:100%;color:#c9d0da;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:600;margin-bottom:2px}
.footer .fnav a{font-size:13.5px}

/* ── Aktiver Menüpunkt ──────────────────────────────────────────────────── */
.nav a.lk[aria-current]{color:var(--accent)}

/* ═══════════════════════════ Tablet ════════════════════════════════════ */
@media (max-width:1100px){
  .pfacts{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
  .kr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .sp-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .sp-rev .sp-tx,.sp-rev .sp-img{order:0}
  .sp-img{max-width:560px}
  .hire-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .hire-cta{justify-self:start}
  .kontakt-grid{grid-template-columns:minmax(0,1fr)}
  .tasklist{grid-template-columns:minmax(0,1fr)}
  .h1.ph1{max-width:20ch}
}
@media (max-width:760px){
  .kr-cols{grid-template-columns:minmax(0,1fr)}
  .pg-list{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════════════════ Handy ═════════════════════════════════════ */
@media (max-width:600px){
  .brd{padding-top:var(--head)}
  .brd ol{padding:9px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .brd ol::-webkit-scrollbar{display:none}
  .brd li{white-space:nowrap;font-size:12.5px}
  .brd li+li::before{margin:0 8px}

  .phero{padding:26px 0 30px}
  body>main>.phero:first-child{padding-top:calc(var(--head) + 18px)}
  .h1.ph1{font-size:clamp(27px,8.4vw,38px);line-height:1.08;max-width:none;margin-top:12px}
  .phero-lead{font-size:15.5px;margin-top:16px;line-height:1.58}

  /* Fakten waagrecht wischbar statt dreispaltig gequetscht */
  .pfacts{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    border-top:0;margin:24px -22px 0;padding:0 22px 4px;scrollbar-width:none}
  .pfacts::-webkit-scrollbar{display:none}
  .pfacts .fr{scroll-snap-align:start;flex:0 0 auto;min-width:44vw;border:1px solid var(--line);
    border-radius:10px;padding:13px 15px;background:var(--paper)}
  .pfacts .fr b{font-size:14.5px}

  .sp-grid{gap:22px}
  .sp-tx h2{margin:10px 0 14px}
  .sp-tx p{font-size:15.5px;line-height:1.62}
  ul.tick li{font-size:15.5px}

  .kr-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  a.kr-card{padding:22px 20px}
  a.kr-card h2{font-size:18px}

  .hire{padding:34px 0}
  .hire-in{padding:22px 20px;border-radius:14px}
  .hire-tx h2{font-size:22px;margin:12px 0 10px}
  .hire-tx p{font-size:15px}
  .hire-links{gap:7px}
  .hire-links a{font-size:12.5px;padding:6px 12px}
  .hire-cta,.hire-cta .btn{width:100%;justify-content:center}

  .tasklist{margin-top:20px;gap:12px}
  .tasklist li{font-size:15px}
  .kr-cols>div{padding:22px 20px}
  .kr-apply{padding:22px 20px}
  .apply-row{flex-direction:column;align-items:stretch}
  .apply-row .btn{justify-content:center}

  .fq summary{padding:18px 0;font-size:16px;gap:14px}
  .fq-a{padding-bottom:20px}
  .fq-a p{font-size:15.5px}

  .kk{padding:22px 20px}
  .napd{grid-template-columns:minmax(0,1fr);gap:3px}
  .napd dt{padding-top:12px}
  .napd dd{font-size:16px}

  .textpage{padding-top:26px}
  .prose h1{font-size:27px}
  .prose h2{font-size:18px;margin:28px 0 10px}
  .prose p{font-size:15.5px}

  .footer .fnav{gap:7px 16px}
  .footer .fnav a{font-size:13px}
}

/* ═══════════════════════════ Große Schirme ═════════════════════════════ */
@media (min-width:1500px){
  .phero-lead{font-size:20px;max-width:60ch}
  .pfacts .fr b{font-size:17px}
}
@media (min-width:1900px){
  .h1.ph1{font-size:72px}
  .prose{max-width:82ch}
}

@media (prefers-reduced-motion:reduce){
  .fq summary svg,.kr-more svg,.lc-more{transition:none}
}

/* Karte ohne Icon: Inhalt fuellt die volle Breite */
.lcard-plain{display:block}
.lcard-plain h3{margin-bottom:8px}

/* Fusszeile: eigener Grauton, damit auf #0E1014 WCAG AA erreicht wird */
.footer .brand .bt span{color:#98A1AE}
.kw-credit{color:#8b94a1}

/* WhatsApp-Knopf: dunkles Markengruen, damit weisse Schrift AA erreicht (7,7:1) */
.btn-wa{background:#075E54;color:#fff;border:none}
.btn-wa:hover{background:#0a7a6d;transform:translateY(-1px);filter:none}
.btn-wa svg{width:19px;height:19px;flex:none}
.copt.wa .ic svg{width:22px;height:22px}

/* Iconlose Karte bleibt auch als letzte ungerade Karte einspaltig */
.lst-grid .lcard-plain:last-child:nth-child(odd){display:block;grid-template-columns:none}

/* Sehr schmale Geraete: Google-Siegel wuerde sonst aus dem Hero geschnitten */
@media (max-width:430px){
  .seal-rev .sep,.seal-rev .ansehen,.seal-rev .arr{display:none}
  .hero-tags .seal{max-width:100%}
}

/* Blanke Überschrift in .lead-grid nach oben ziehen —
   align-items:end laesst sie sonst unten in einer leeren Spalte haengen */
.lead-grid>h2:first-child{align-self:start;margin:0}

/* Karriere-Headlines sind laenger als die Leistungs-Headlines */
.kr-phero .h1.ph1{max-width:26ch}
@media (max-width:600px){ .kr-phero .h1.ph1{max-width:none} }
.kr-phero .hero-actions{margin-top:30px}

/* ═══════════════════ Karriere: Kopf kompakt, Stellen sofort sichtbar ═══ */
.kr-top{padding:clamp(30px,4vw,54px) 0 clamp(20px,2.4vw,30px);position:relative;overflow:hidden;
  background:
    radial-gradient(820px 560px at 100% -30%,rgba(106,70,161,.13),transparent 58%),
    radial-gradient(700px 500px at -8% 0%,rgba(63,163,221,.11),transparent 60%),
    var(--paper)}
.kr-top .h1.ph1{font-size:clamp(29px,4.2vw,56px);margin-top:12px;max-width:24ch}
.kr-top .phero-lead{margin-top:16px;max-width:60ch}
.kr-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.kr-meta span{font-size:13px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:6px 13px}
.kr-meta span b{color:var(--accent);font-weight:700}
.kr-jobs{padding:clamp(22px,2.6vw,34px) 0 clamp(58px,7vw,96px)}
.kr-hint{margin-top:26px;font-size:14.5px;color:var(--muted)}
.kr-hint a{color:var(--accent);text-underline-offset:3px}

/* Stellenkarte */
a.kr-card{position:relative;padding:28px 24px 24px;overflow:hidden}
a.kr-card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad-cta);
  opacity:0;transition:opacity .35s}
a.kr-card:hover::before{opacity:1}
.kr-num{position:absolute;top:18px;right:20px;font-family:'Bricolage Grotesque',sans-serif;
  font-size:30px;font-weight:700;line-height:1;color:var(--ink);opacity:.07;letter-spacing:-.03em}
a.kr-card h2{font-size:19.5px;line-height:1.24;margin:0 0 10px;padding-right:34px}
a.kr-card p{margin:0 0 16px}
.kr-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.kr-chips .chip{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--paper-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
.kr-chips .chip-pay{color:#0d5c3f;background:rgba(37,160,110,.12);border-color:rgba(37,160,110,.28);
  font-weight:600}

/* ═══════════════════ Personal-Poster auf der Startseite ═══════════════ */
.hire{padding:clamp(34px,4vw,58px) 0;background:var(--paper);border:0}
.poster{position:relative;overflow:hidden;border-radius:20px;background:var(--dark);color:#EDEFF2;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:center;
  padding:clamp(30px,4vw,52px) clamp(26px,3.6vw,54px)}
.poster-glow{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(680px 460px at 88% -20%,rgba(106,70,161,.55),transparent 62%),
    radial-gradient(560px 420px at -6% 118%,rgba(63,163,221,.38),transparent 64%)}
/* NICHT .poster>* — das wuerde .poster-glow aus absolute holen und zur Grid-Spalte machen */
.poster>.poster-tx,.poster>.poster-mark{position:relative;z-index:1}
.poster-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#EDEFF2;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
  padding:6px 13px;border-radius:999px}
.poster-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ED08A;flex:none;
  box-shadow:0 0 0 0 rgba(78,208,138,.7);animation:posterpulse 2.4s var(--ease) infinite}
@keyframes posterpulse{
  0%{box-shadow:0 0 0 0 rgba(78,208,138,.55)}
  70%{box-shadow:0 0 0 9px rgba(78,208,138,0)}
  100%{box-shadow:0 0 0 0 rgba(78,208,138,0)}}
.poster h2{font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-.03em;margin:16px 0 14px;
  color:#fff}
.poster h2 em{font-style:normal;background:linear-gradient(100deg,#7EC4F0,#A98BE0 60%,#C7A6F5);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.poster p{color:#B7C0CD;line-height:1.62;max-width:46ch;margin:0}
.poster-links{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 24px}
.poster-links a{display:inline-flex;align-items:baseline;gap:9px;font-size:13.5px;font-weight:500;
  color:#EDEFF2;text-decoration:none;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 15px;
  transition:background .3s,border-color .3s,transform .3s var(--ease)}
.poster-links a span{font-size:12px;color:#95E7BE;font-weight:600}
.poster-links a:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);
  transform:translateY(-1px)}
.btn-poster{background:#fff;color:#0E1014;border:none;font-weight:600}
.btn-poster svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn-poster:hover{background:#fff;transform:translateY(-1px)}
.btn-poster:hover svg{transform:translateX(3px)}
.poster-mark{flex:none;color:rgba(255,255,255,.10)}
.poster-mark svg{width:clamp(120px,13vw,200px);height:auto;display:block}

@media (max-width:1100px){
  .kr-top .h1.ph1{max-width:none}
}
@media (max-width:900px){
  .poster{grid-template-columns:minmax(0,1fr);gap:0}
  .poster>.poster-mark{position:absolute;top:-14px;right:-24px;opacity:.7}
  .poster-mark svg{width:150px}
}
@media (max-width:600px){
  .kr-top{padding:20px 0 14px}
  .kr-top .h1.ph1{font-size:clamp(26px,7.8vw,34px)}
  .kr-meta{gap:6px;margin-top:16px}
  .kr-meta span{font-size:12px;padding:5px 11px}
  .kr-jobs{padding:16px 0 46px}
  a.kr-card{padding:22px 20px 20px}
  a.kr-card h2{font-size:17.5px}
  .kr-num{font-size:24px;top:15px;right:16px}
  .kr-chips{gap:5px;margin-bottom:15px}
  .kr-chips .chip{font-size:11.5px;padding:4px 10px}

  .hire{padding:26px 0}
  .poster{padding:26px 20px;border-radius:16px}
  .poster h2{font-size:clamp(26px,8vw,34px);margin:13px 0 11px}
  .poster p{font-size:15px}
  .poster-links{gap:6px;margin:18px 0 20px}
  .poster-links a{font-size:12.5px;padding:7px 13px;width:100%;justify-content:space-between}
  .btn-poster{width:100%;justify-content:center}
  .poster>.poster-mark{top:-8px;right:-16px}
  .poster-mark svg{width:104px}
}
@media (prefers-reduced-motion:reduce){
  .poster-badge .dot{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   HANDY-ANSICHT KARRIERE — eigene Anordnung, kein umgebrochener Desktop
   ═══════════════════════════════════════════════════════════════════ */

/* Grundzustand: Handy-Fassungen sind aus. Mit !important, weil sonst
   Utility-Klassen wie .btn (display:inline-flex) die Ausblendung schlagen. */
.m-only{display:none!important}

@media (max-width:599px){
  .d-only{display:none!important}
  .m-only{display:block!important}
  .mfacts.m-only{display:grid!important}
  .mbar.m-only{display:flex!important}
  .swipe-ui.m-only{display:flex!important}

  /* R7 — Sektionen enger, damit Inhalt nicht in Leerraum ertrinkt */
  .sec{padding:48px 0}
  .faq-sec{padding-top:38px}

  /* ── Stellenseite: Eckdaten als Bento, Verdienst quer und zuerst ───── */
  .mfacts{grid-template-columns:1fr 1fr;gap:8px;margin-top:22px}
  .mf{border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:var(--paper);
    min-width:0}
  .mf small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    color:#565D68;margin-bottom:4px}
  .mf b{font-size:15px;font-weight:600;color:var(--ink);overflow-wrap:break-word}
  /* Gruen markiert den Verdienst — nicht einfach die erste Kachel.
     Bei der Ausbildung liegt keine Zahl vor, dort bleibt alles neutral. */
  .mf-pay{grid-column:1/-1;background:rgba(37,160,110,.10);border-color:rgba(37,160,110,.30)}
  .mf-pay b{font-size:19px;color:#0d5c3f}
  /* Kein opacity — das drueckte den Kontrast auf 2,95:1. Direkt ein
     etwas hellerer Gruenton, der die Zeile ruhig haelt und AA erfuellt. */
  .mf-pay small{color:#0d5c3f}
  .mlead{margin-top:18px;font-size:14.5px;line-height:1.55;color:var(--muted)}

  /* Platz fuer die feste Leiste am unteren Rand */
  body:has(.mbar) .footer{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}

  /* ── Stellenseite: Inhaltsbloecke kompakter ────────────────────────── */
  .tasklist{margin-top:16px;gap:10px}
  .kr-cols{gap:12px}
  .kr-cols>div{padding:20px 18px}
  .kr-cols h3{margin-bottom:12px;font-size:16px}
  .kr-cols li{font-size:14.5px}
  .lead-grid{gap:14px;margin-bottom:26px}
  .lead-grid>h2:first-child{margin-bottom:2px}

  /* ── Hub: Stellen als Wischleiste mit Bedienhinweis ────────────────── */
  .kr-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:22px;
    margin:0 -22px;padding:2px 22px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .kr-grid::-webkit-scrollbar{display:none}
  .kr-grid>a.kr-card{flex:0 0 80%;scroll-snap-align:start;min-width:0}
  /* Der IntersectionObserver feuert fuer waagrecht ausgelagerte Karten nie —
     in der Leiste sind sie deshalb von Anfang an sichtbar. */
  .js .kr-grid>a.kr-card.rv{opacity:1;transform:none;transition-delay:0s}

  .swipe-ui{align-items:center;justify-content:space-between;gap:14px;margin-top:14px}
  .dots{display:flex;gap:6px}
  .dot{width:18px;height:3px;border-radius:2px;background:var(--line);transition:background .3s,width .3s}
  .dot.on{width:26px;background:var(--accent)}
  .swipe-lbl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);
    letter-spacing:.02em}
  .swipe-lbl b{color:var(--ink);font-weight:600}
  .chev{display:inline-flex;align-items:center;gap:2px}
  .chev i{width:5px;height:5px;border-right:1.6px solid var(--accent);
    border-bottom:1.6px solid var(--accent);transform:rotate(-45deg);opacity:.3;
    animation:chevrun 1.5s var(--ease) infinite}
  .chev i:nth-child(2){animation-delay:.16s}
  .chev i:nth-child(3){animation-delay:.32s}
  .swipe-ui.done .chev i{animation:none;opacity:.25}

  .kr-jobs{padding-bottom:38px}
  .kr-hint{margin-top:20px;font-size:13.5px}
}

@keyframes chevrun{0%,100%{opacity:.22}45%{opacity:1}}

/* ── Feste Leiste am unteren Rand (nur Stellenseiten) ─────────────────── */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:9px 14px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(252,252,251,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--line)}
.mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;border-radius:8px;font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:15px;font-weight:600;text-decoration:none}
.mbar svg{width:17px;height:17px;flex:none}
.mbar-call{flex:0 0 40%;color:var(--ink);background:var(--paper-2);border:1px solid var(--line)}
.mbar-apply{background:var(--grad-cta);color:#fff}

@media (prefers-reduced-motion:reduce){
  .chev i{animation:none;opacity:.35}
}

@media (max-width:599px){
  /* Echte Bedienelemente auf mindestens 44px — Kopfleiste lag bei 42px.
     KEIN display setzen: .ig-link ist auf dem Handy per display:none aus,
     das wuerde es wieder einblenden. */
  .site .brand,.site .burger,.site .cta{min-height:44px}
  .site .burger{min-width:44px}
  /* Kontaktlinks im Fliesstext etwas groesser antippbar (inline-block, sonst
     wirkt padding-block bei Inline-Elementen nicht) */
  .fq-a a[href^="tel"],.fq-a a[href^="mailto"],
  .prose a[href^="tel"],.prose a[href^="mailto"]{display:inline-block;padding:5px 0}
}

/* Snap waehrend des Anstupsers aushaengen, sonst zieht mandatory sofort zurueck */
.kr-grid.nudging{scroll-snap-type:none}

/* Der Kicker steht im Hero auf einem hellen Verlauf, nicht auf Weiss.
   Das Markenblau kommt dort nur auf 4,11:1 — im Hero deshalb einen
   Ton tiefer, ueberall sonst bleibt die Markenfarbe unveraendert. */
.hero .kick,.phero .kick,.kr-hero .kick{color:#1f5491}
.hero .kick::before,.phero .kick::before,.kr-hero .kick::before{background:#1f5491}

/* ═══════════════════════════════════════════════════════════════════════
   LESBARKEIT FLIESSTEXT
   Gemessen: Absatzabstaende standen auf 0, Absaetze klebten zur Wand
   zusammen. Auf dem Handy kam .lead-grid mit 19px auf nur 36 Zeichen je
   Zeile, die Karten der Leistungsseiten sogar auf 22 — beides zerhackt
   den Text. Zielkorridor sind 45-75 Zeichen je Zeile.
   ═══════════════════════════════════════════════════════════════════ */

/* Folgeabsaetze brauchen Luft, sonst liest sich alles als ein Block */
.sp-tx p + p,
.lead-grid .col-r p + p,
.ub-text p + p,
.fq-a p + p,
.kr-cols p + p{margin-top:.85em}

/* Etwas mehr Zeilenhoehe im laufenden Text — hilft besonders bei den
   langen deutschen Komposita */
.sp-tx p,.lead-grid .col-r p,.ub-text p,.fq-a p{line-height:1.72}

/* Lesespalte deckeln: darueber wird die Zeile zu lang zum Zurueckspringen */
.sp-tx p,.ub-text p,.fq-a p{max-width:68ch}
.lead-grid .col-r p{max-width:60ch}

@media (max-width:599px){
  /* 19px ergaben 36 Zeichen je Zeile — zu wenig zum Lesen */
  .lead-grid .col-r p{font-size:16.5px;line-height:1.68;max-width:none}

  /* Die Karten auf den Leistungsseiten tragen ganze Saetze, nicht nur
     Stichworte wie das Bento der Startseite. Zweispaltig blieben davon
     22 Zeichen je Zeile uebrig. */
  .lst-grid:has(.lcard-plain){grid-template-columns:1fr;gap:9px}
  .lst-grid .lcard-plain{padding:16px 16px}
  .lst-grid .lcard-plain h3{font-size:15.5px;margin-bottom:5px}
  .lst-grid .lcard-plain p{font-size:14px;line-height:1.58}
  .lst-grid .lcard-plain:last-child:nth-child(odd){grid-column:auto}

  .sp-tx p,.ub-text p,.fq-a p{line-height:1.68;max-width:none}
}


/* Handy — Besitzer: kleim-mobile
   Wird NACH base.css und pages.css eingelesen und gewinnt deshalb
   gegen beide. Nur Regeln dieses Gebiets hier ablegen. */

/* ══════════════════════════════════════════════════════════════════════
   1. MENUEBLATT — gilt ueberall, wo base.css die Leiste zuklappt (<1200)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1199.98px){
  /* position:absolute statt fixed: .site traegt backdrop-filter und wird
     damit zum Bezugsrahmen jedes fixierten Kindes (matrix.js: fixfalle).
     Die Leiste selbst ist fixiert, das Blatt haengt darunter — gleiches
     Bild, ohne die Falle. */
  .nav{position:absolute;inset:auto 0 auto 0;top:100%;
    max-height:calc(100dvh - var(--head) - 8px)}

  /* Zugeklappt unsichtbar statt nur verschoben. Ohne das stehen alle
     Menuepunkte im Fliesstext (innerText) und im Tab-Lauf, obwohl sie
     niemand sieht. visibility schaltet erst NACH der Fahrt um. */
  .nav{visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
  .nav.open{visibility:visible;transition:transform .4s var(--ease),visibility 0s}

  /* Rubriken als Zeilen mit sicherer Tippflaeche */
  .nav a.lk{display:flex;align-items:center;min-height:52px;padding:14px 26px;
    font-size:16.5px;font-weight:500}
  .nav a.lk[aria-current="page"]{color:var(--accent);
    box-shadow:inset 3px 0 0 var(--accent)}
}

/* Kontaktkacheln im Blatt — nur Handy (Grundregel .m-only haelt sie sonst aus) */
@media (max-width:599px){
  .nav-kk.m-only{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:8px;
    padding:12px 22px calc(16px + env(safe-area-inset-bottom,0px))}
  .nav .nk{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-height:56px;padding:10px 6px;border:1px solid var(--line);
    border-radius:11px;background:var(--paper-2);font-size:13.5px;font-weight:600;
    color:var(--ink);text-align:center;line-height:1.2}
  .nav .nk b{font-weight:500;font-size:11.5px;color:var(--muted);letter-spacing:.01em}
  .nav .nk:first-child{background:var(--grad-cta,linear-gradient(135deg,#1F5491,#163E6E));
    border-color:transparent;color:#fff}
  .nav .nk:first-child b{color:rgba(255,255,255,.82)}

  /* Die acht Leistungsseiten stehen auf dem Desktop in der Fusszeile.
     Auf dem Handy traegt sie das Menueblatt — dort sucht man sie, und
     im zugeklappten Blatt zaehlen sie nicht als Lesetext mit. */
  .nav-sub.m-only{display:grid!important;grid-template-columns:1fr 1fr;gap:2px 10px;
    padding:12px 26px 6px;border-top:1px solid var(--line)}
  .nav-sub b{grid-column:1/-1;font-size:11.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin-bottom:4px}
  .nav-sub a{display:flex;align-items:center;min-height:40px;font-size:14px;
    color:var(--ink-2);line-height:1.25;padding-right:6px}
}

/* ══════════════════════════════════════════════════════════════════════
   2. HANDY — eigene Anordnung
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:599px){

  /* ── 2.1 Diaet-Umschalter fuer Bauteile, die kein Block sind ────────
     .m-only{display:block!important} aus pages.css macht aus jedem
     Umschalter einen Block — bei Inline-Fassungen in der Bildunterschrift
     zerreisst das die Zeile. */
  figcaption span.m-only.m-only{display:inline!important}
  .swipe-hint.m-only{display:flex!important}

  /* ── 2.2 Erster Schirm: dichter Kopf, Restluft unten ───────────────
     fuellgrad misst den Leerraum UEBER der H1 (Grenze 25 % = 225px bei
     900px Messhoehe); gemessen waren 246px. Das Polster oben traegt den
     groessten Teil davon. */
  .hero{padding:calc(var(--head) + 14px) 0 34px;
    min-height:calc(100svh - var(--head));display:flex;align-items:stretch}
  .hero>.wrap{display:flex;flex-direction:column;width:100%}
  .hero-tags{gap:9px 12px}
  .hero-head{margin-bottom:0}
  .hero-sub{margin-top:24px;padding-bottom:26px;gap:18px}
  .hero-sub p{font-size:17px;line-height:1.5}
  /* Eine Ausrichtung je Schirm: der Knopftext steht wie der Fliesstext
     links, der Winkel traegt die Aktion nach rechts. */
  .hero-actions .btn{justify-content:space-between;text-align:left;padding-inline:22px}
  .hero-actions .btn::after{content:"\2192";font-size:17px;opacity:.75;flex:none}
  /* Dieselbe Ausrichtung fuer die vollbreiten Abschnitts-Knoepfe */
  .proj-cta .btn{justify-content:space-between;text-align:left;padding-inline:22px}
  /* Restluft traegt EIN Bauteil am unteren Rand, nicht die Luecken
     dazwischen — sonst steht das weisse Band mitten im Schirm (heroloch). */
  .hero-meta{margin-top:22px;flex:1 1 auto;display:grid;gap:0;
    grid-auto-rows:minmax(min-content,1fr);align-content:stretch}
  .hero-meta div{padding-block:10px 12px;margin:0}
  .hero-meta div:last-child{border-bottom:none}

  /* ── 2.3 Sektionsrhythmus ──────────────────────────────────────────
     Luft an den KOPF der Sektion: hebt die Textdichte, ohne den leeren
     Sektionsboden zu vergroessern (bleiwueste gegen leerboden). */
  .sec{padding:58px 0 44px}
  .faq-sec{padding-top:44px}
  /* Abschnitte, die nur aus Ueberschrift und einem kurzen Absatz bestehen,
     tragen das volle Polster nicht (matrix.js: blaehzeile bei 360px). */
  .sec:has(>.wrap.lead-grid){padding:44px 0 32px}
  .sec .kick{margin-bottom:10px}

  /* ── 2.4 Leistungen als Wischreihe mit Anstupser ───────────────────
     Sieben Karten untereinander sind auf dem Handy eine Liste ohne Ende.
     Nur die Karten, die Links sind (Startseite, Leistungsuebersicht) —
     die Textkacheln auf /ueber-uns/ und /karriere/ bleiben gestapelt. */
  .lst-grid:has(a.lcard){display:flex;grid-template-columns:none;gap:11px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:22px;
    margin:18px -22px 0;padding:2px 22px 8px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .lst-grid:has(a.lcard)::-webkit-scrollbar{display:none}
  .lst-grid:has(a.lcard)>a.lcard{flex:0 0 74%;scroll-snap-align:start;min-width:0;
    padding:18px 16px 16px}
  /* Der IntersectionObserver feuert fuer waagrecht ausgelagerte Karten nie */
  .js .lst-grid:has(a.lcard)>a.lcard.rv{opacity:1;transform:none;transition-delay:0s}
  .lst-grid:has(a.lcard)>a.lcard:last-child:nth-child(odd){grid-column:auto;
    display:block}
  .lst-grid:has(a.lcard)>a.lcard:last-child:nth-child(odd) .ic{width:34px;height:34px;
    margin:0 0 11px}
  /* "Mehr erfahren" traegt auf dem Handy nichts — die Karte ist der Link.
     Der Hinweis wandert als Winkel an die Ueberschrift (CSS statt Text). */
  .lst-grid:has(a.lcard) .lc-more{display:none}
  .lst-grid:has(a.lcard) h3::after{content:" \2192";color:var(--accent)}

  .swipe-hint{justify-content:flex-end;align-items:center;gap:3px;margin-top:9px;
    padding-right:2px}
  .swipe-hint i{width:6px;height:6px;border-right:1.7px solid var(--accent);
    border-bottom:1.7px solid var(--accent);transform:rotate(-45deg);opacity:.3;
    animation:chevrun 1.5s var(--ease) infinite}
  .swipe-hint i:nth-child(2){animation-delay:.16s}
  .swipe-hint i:nth-child(3){animation-delay:.32s}

  /* ── 2.5 Technikband als Markenschiene ─────────────────────────────── */
  .techbar .wrap{display:block;padding-top:26px;padding-bottom:24px}
  .techbar .lbl{max-width:none;margin-bottom:14px}
  .techbar .brands{flex-wrap:nowrap;overflow-x:auto;gap:22px;
    margin:0 -22px;padding:2px 22px 6px;scrollbar-width:none;
    scroll-snap-type:x proximity;scroll-padding-inline:22px;
    -webkit-overflow-scrolling:touch}
  .techbar .brands::-webkit-scrollbar{display:none}
  .techbar .brands a{white-space:nowrap;font-size:19px;opacity:.72;
    padding-block:6px;scroll-snap-align:start}
  .techbar .swipe-hint{margin-top:2px}

  /* ── 2.6 Ablauf als Zeitleiste ─────────────────────────────────────── */
  .flow{border-top:none}
  .flow .fstep{display:grid;grid-template-columns:34px minmax(0,1fr);
    column-gap:14px;align-items:start;padding:16px 0 18px;border-bottom:none}
  .flow .fstep::before{display:none}
  .flow .fstep .fi{grid-row:1/3;display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    background:var(--paper);font-size:14px;margin:0;position:relative;z-index:1}
  .flow .fstep:not(:last-child)::after{content:"";position:absolute;left:16.5px;
    top:44px;bottom:-4px;width:1px;background:var(--line)}
  .flow .fstep{position:relative}
  .flow .fstep h3{margin-bottom:3px;font-size:16px}
  .flow .fstep p{font-size:14.5px;line-height:1.5}

  /* ── 2.7 Einsatzbereich-Kacheln: Bento mit breiter Leitkachel ──────── */
  .eb-grid{gap:9px}
  /* Vier Kacheln: quer, Paar, quer. Ohne die letzte Querkachel bliebe
     die rechte Zelle der zweiten Reihe leer.
     Drei Kinder auf zwei Spalten: ohne benannte Flaechen rutscht der
     Absatz unter das Symbol und steht 52px schmal. */
  .eb-grid .eb:first-child,.eb-grid .eb:last-child{grid-column:1/-1;display:grid;
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:"ic titel" "ic text";gap:2px 14px;
    text-align:left;padding:16px 16px}
  .eb-grid .eb:first-child .ic,.eb-grid .eb:last-child .ic{grid-area:ic;
    width:46px;height:46px;margin:0;align-self:center}
  .eb-grid .eb:first-child h3,.eb-grid .eb:last-child h3{grid-area:titel;
    align-self:end;margin-bottom:0}
  .eb-grid .eb:first-child p,.eb-grid .eb:last-child p{grid-area:text;
    align-self:start}

  /* ── 2.8 Gegenueberstellung: jeder zweite Block Bild neben Text ─────
     Vier gleich gebaute .split-Sektionen liest der Betrachter als eine
     (matrix.js: handyskelett). Jede zweite bekommt deshalb ein anderes
     Muster — und zugleich faellt das Motiv unter die 30-%-Sperre. */
  .sp-grid{gap:18px}
  .sp-img{aspect-ratio:16/10;overflow:hidden;border-radius:12px}
  .sp-img img{width:100%;height:100%;object-fit:cover}
  /* Variante B (jede zweite): Motiv als hohe Kachel neben dem Kopf,
     Fliesstext darunter ueber die volle Breite. Kicker und Ueberschrift
     stehen in EIGENEN Zeilen — zwei Elemente in derselben Rasterzelle
     wuerden sich ueberlappen, sobald der Titel dreizeilig wird. */
  .sec.split.alt .wrap.sp-grid{display:grid;
    grid-template-columns:min(34vw,190px) minmax(0,1fr);
    grid-template-areas:"bild kick" "bild titel" "text text";
    gap:0 14px;align-items:start}
  .sec.split.alt .sp-tx{display:contents}
  .sec.split.alt .sp-tx>.kick{grid-area:kick;margin-bottom:2px}
  .sec.split.alt .sp-tx>h2{grid-area:titel;font-size:21px;line-height:1.2;margin:0;
    overflow-wrap:break-word;hyphens:auto}
  .sec.split.alt .sp-tx>p{grid-area:text;margin-top:15px}
  .sec.split.alt .sp-img{grid-area:bild;aspect-ratio:auto;height:100%;
    min-height:112px;align-self:stretch}

  /* ── 2.8b Projektkarten als Wischreihe ─────────────────────────────
     Drei grosse Karten untereinander sind auf dem Handy drei Schirme
     Scrollweg; nebeneinander bleiben sie ein Block. */
  .pg-list{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-left:22px;
    margin:16px -22px 0;padding:2px 22px 8px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .pg-list::-webkit-scrollbar{display:none}
  .pg-list>.pg-card{flex:0 0 80%;scroll-snap-align:start;min-width:0}
  /* Nicht auf die hoechste Karte strecken: sonst steht unter der kurzen
     Karte ein leerer Boden, den leerboden zu Recht meldet. */
  .pg-list{align-items:flex-start}
  /* Waagrecht ausgelagert feuert der IntersectionObserver nie — Karten
     UND Bildmasken deshalb von Anfang an offen. */
  .js .pg-list>.pg-card.rv{opacity:1;transform:none;transition-delay:0s}
  .js .pg-list>.pg-card .rvimg{clip-path:inset(0)}
  .js .pg-list>.pg-card .rvimg img{transform:none}

  /* ── 2.9 Projektgalerie als Kachelliste ────────────────────────────
     Gestapelt waren die Bilder 330px hoch und standen ohne Text daneben
     (matrix.js: alleingrafik, Grenze 30 % der Schirmhoehe). */
  .pg-gal{grid-template-columns:1fr;gap:10px}
  .pg-gal figure{display:grid;grid-template-columns:118px minmax(0,1fr);gap:13px;
    align-items:center;border:1px solid var(--line);border-radius:13px;
    padding:9px;background:var(--paper)}
  .pg-gal .ph{aspect-ratio:1;border-radius:9px}
  .pg-gal figcaption{margin-top:0;font-size:13.5px;line-height:1.45;max-width:none;
    overflow-wrap:break-word;hyphens:auto}
  .pg-gal figcaption b{font-size:15px;margin-bottom:2px}
  .pg-card .pg-img{aspect-ratio:16/10}
  .sec:has(>.wrap>.pg-list){padding-bottom:28px}

  /* ── 2.10 Kontaktband als Direktkacheln ────────────────────────────
     Das Band steht auf var(--dark). Eine helle Kachel darunter laesst
     die geerbte helle Schrift auf 1,1:1 absacken — die Kachel bleibt
     deshalb transparent. */
  .contact .cgrid{grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}
  .contact .ci{border:1px solid rgba(255,255,255,.17);border-radius:12px;
    padding:12px 13px;background:rgba(255,255,255,.05);min-width:0}
  .contact .ci:last-child{grid-column:1/-1}
  .contact .ci small{margin-bottom:3px}
  .contact .ci a,.contact .ci span{display:block;min-height:24px;font-size:14.5px;
    color:#EDEFF2;overflow-wrap:anywhere}

  /* ── 2.10b Fusszeile: Leistungsliste steckt im Menueblatt ──────────── */
  .footer .fnav{display:none}

  /* ── 2.10c Stellenband: das Signet traegt die Flaeche mit ───────────
     Gibt der Sektion ein eigenes Skelett (mit Grafik) statt der
     vierten Textkachel in Folge. */
  .poster-mark svg{width:132px}

  /* ── 2.10d Textkacheln ohne Ziel als Wischreihe (Ueber uns, Karriere) */
  .lst-grid:not(:has(a.lcard)){display:flex;grid-template-columns:none;gap:10px;
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:22px;
    margin:16px -22px 0;padding:2px 22px 8px;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .lst-grid:not(:has(a.lcard))::-webkit-scrollbar{display:none}
  .lst-grid:not(:has(a.lcard))>.lcard{flex:0 0 64%;scroll-snap-align:start;
    min-width:0;padding:16px 15px}
  .js .lst-grid:not(:has(a.lcard))>.lcard.rv{opacity:1;transform:none;transition-delay:0s}

  /* ── 2.10e Bewerbungsknoepfe zu zweit ──────────────────────────────── */
  .kr-apply .apply-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .kr-apply .apply-row .btn{width:100%;justify-content:center;padding-inline:10px}
  .kr-apply .apply-row .btn:last-child{grid-column:1/-1}

  /* ── 2.11 Kontrast: die Kachel "Alle Projekte" ─────────────────────
     Die weisse Schrift liegt auf einem ::before-Verlauf, den kein Pruefer
     sieht — gemessen 1,2:1 gegen den hellen Kachelgrund. Der Grund wird
     deshalb echt gesetzt, das Bild bleibt gleich. */
  .proj-grid .pg-tile.more{background:#1B4A80}

  /* ── 2.11b Kontaktseite: doppelte Wege raus ────────────────────────
     Der Modal-Knopf wiederholt die Liste direkt darueber, und die beiden
     Stellenlinks im Band stehen auf sechs anderen Seiten sowie hinter
     "Alle Stellen ansehen". Auf der Kontaktseite bleibt so der Kontakt. */
  .kontakt-grid .apply-row .btn-grad{display:none}
  body:has(.kontakt-grid) .poster-links{display:none}

  /* ── 2.11c Modale sind Vollbild-Blaetter ───────────────────────────
     Eine 620er-Karte mit max-height:90dvh wird auf 390px zum
     Scrollfenster im Scrollfenster, und der Schliesser scrollt mit
     nach oben weg. */
  .cmodal{padding:0;align-items:stretch}
  .cmodal-card{width:100%;max-width:none;border:none;border-radius:0;
    min-height:100svh;max-height:100svh;
    padding:16px 20px calc(30px + env(safe-area-inset-bottom,0px));
    display:flex;flex-direction:column}
  .cmodal .x{position:sticky;top:0;z-index:4;order:-1;align-self:flex-end;flex:none;
    width:44px;height:44px;margin:0 -4px 2px 0;background:rgba(14,16,20,.86)}
  .cmodal h3{margin-top:10px}
  .cmodal .sub{font-size:14.5px;margin-top:8px}
  .copts{margin-top:18px;gap:9px}
  .copt{padding:13px 14px;gap:13px;min-height:64px}
  .copt .ic{width:40px;height:40px}
  .copt .tx b{font-size:16px;overflow-wrap:anywhere}
  .cmodal .legal-note{margin-top:16px}
  .hwhy{margin-top:16px;padding:14px 15px}

  /* ── 2.12 Tippziele ────────────────────────────────────────────────── */
  .footer nav a,.footer .fnav a{display:inline-block;padding-block:7px}
  .brands a{display:inline-block}
  .fq summary{min-height:48px;align-items:center}
}

/* Die Zusatzzeile des Google-Siegels kostet bis 760px eine ganze Zeile
   im ersten Schirm — der Link bleibt, nur der Zusatz geht. */
@media (max-width:759.98px){
  .hero-tags .seal-rev .sep,.hero-tags .seal-rev .ansehen{display:none}
}

/* Sehr schmal: Kacheln im Blatt untereinander lesbar halten */
@media (max-width:380px){
  .pg-gal figure{grid-template-columns:96px minmax(0,1fr);gap:11px}
  /* Label ueber Wert: die Zeile waechst mit der Restluft mit, statt
     75px Kastenhoehe fuer 19px Text zu tragen. */
  .hero-meta div{flex-direction:column;align-items:flex-start;justify-content:center;
    gap:3px;padding-block:12px}
  .hero-meta div b{margin-top:0;text-align:left}
}
@media (max-width:359px){
  .nav-kk.m-only{grid-template-columns:1fr 1fr}
  .nav .nk:first-child{grid-column:1/-1}
}

/* ══════════════════════════════════════════════════════════════════════
   3. TABLET — hoch UND quer, bis unmittelbar vor den Desktopblock
   desktop.css beginnt bei 1200px; alles darunter gehoert hierher.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:1199.98px){
  /* Satzspiegel: auf dem Tablet ist die Rinne aus clamp() zu schmal,
     der Text klebt sonst am Rand */
  .wrap{padding-inline:clamp(26px,4.2vw,48px)}

  /* Seitenkopf: die Lesespalte aus dem Desktopraster (56ch) laesst rechts
     eine leere Saeule stehen (matrix.js: leerflaeche 188x261 bei 768).
     Und der Kopf startet zu tief — bei 1024 lagen 251px Leerraum ueber
     der H1 (matrix.js: fuellgrad, Grenze 25 %). */
  .h1.ph1{max-width:none;margin-top:10px}
  .phero-lead{max-width:72ch}
  body>main>.phero:first-child{padding-top:calc(var(--head) + 8px)}
  /* Mit Brotkrumenleiste traegt diese schon den Kopfabstand — die
     Spezifitaet (0,3,1) von pages.css muss dabei erreicht werden,
     sonst bleibt die Regel wirkungslos. */
  .brd~main>.phero:first-child,.brd+main .phero{padding-top:clamp(24px,3.2vw,38px)}
  .kr-top{padding-top:clamp(20px,2.6vw,30px)}
  .kr-top .h1.ph1{max-width:none;margin-top:8px}
  .phero{padding-bottom:clamp(30px,3.4vw,46px)}

  /* Hero: zwei Spalten unten, Text oben — kein gestreckter Desktop */
  .hero{padding-top:calc(var(--head) + 10px)}
  .hero-sub{grid-template-columns:1fr;gap:24px;align-items:start}
  .hero-actions{gap:12px}
  .hero-meta{gap:28px 40px}

  /* Raster: drei Spalten sind auf 768 zu eng, zwei sind zu leer */
  .lst-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .lst-grid .lcard:last-child:nth-child(odd){grid-column:1/-1}
  .eb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  /* Ungerade letzte Karte quer ueber beide Spalten — sonst bleibt die
     zweite Zelle leer (matrix.js: leerflaeche 351x589 bei 768). */
  .pg-list>.pg-card:last-child:nth-child(odd){grid-column:1/-1;display:grid;
    grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:24px;align-items:center}
  .pg-list>.pg-card:last-child:nth-child(odd) .pg-img{aspect-ratio:4/3}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
  .cgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

  /* Gegenueberstellung: Bild neben Text erst ab 900, darunter gestapelt
     mit gedeckelter Hoehe — sonst frisst das Motiv den halben Schirm */
  .sp-grid{gap:26px}
  .sp-img{aspect-ratio:16/9;overflow:hidden}
  .sp-img img{width:100%;height:100%;object-fit:cover}

  /* Technikband bricht auf 768 in zwei Zeilen — dann gehoert die
     Beschriftung darueber, nicht daneben */
  .techbar .wrap{display:block;padding-top:30px;padding-bottom:28px}
  .techbar .lbl{max-width:none;margin-bottom:14px}
  .techbar .brands{gap:14px 34px}

  /* Weisse Schrift auf einem ::before-Verlauf: der gerechnete Grund ist
     die helle Kachelfarbe (1,2:1). Grund echt setzen, Bild bleibt gleich. */
  .proj-grid .pg-tile.more{background:#1B4A80}

  /* Menuezeile: der Knopf traegt ein Wort, nicht nur drei Striche */
  .burger{width:auto;min-width:44px;min-height:44px;gap:9px;padding-inline:6px}
}

/* Bis 960 traegt base.css eine Spalte — zwei plus Leitkarte quer nutzen die
   Flaeche besser. Ab 961 bleibt das Dreierraster von base.css stehen, sonst
   zieht eine vollbreite Karte das 600w-Motiv auf 938px (bildstreckung). */
@media (min-width:600px) and (max-width:960px){
  .areas{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .areas>.area:first-child{grid-column:1/-1}
  .areas>.area:first-child .ph{aspect-ratio:21/9}
}

/* Tablet quer (1024) hat Zeigerbedienung wie das Handy — Tippziele halten */
@media (min-width:600px) and (max-width:1199.98px) and (pointer:coarse){
  .nav a.lk,.footer nav a,.footer .fnav a{min-height:44px;display:flex;
    align-items:center}
  .fq summary{min-height:48px}
}


/* Desktop — Besitzer: kleim-desktop
   Wird NACH base.css und pages.css eingelesen und gewinnt deshalb
   gegen beide. Nur Regeln dieses Gebiets hier ablegen. */

/* ═══════════════════════════════════════════════════════════════════════
   1 · AB 1200px — Laptop-Grundhaertung
   Die untere Kante liegt bewusst bei 1200, nicht bei 1440: darunter
   greift der Handy-/Tabletblock, darueber bisher nur base.css. Ohne
   diesen Block bleibt der Streifen 1200-1499 ungeprueft.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1200px){

  /* --- Kopfleiste: feste Bauhoehe, Knopfreihe bricht nie um ------------
     Eine umbrechende Kopfzeile macht jede Rechnung mit --head falsch und
     schiebt die erste Sektion aus dem Bild. Nav und Kopfaktionen werden
     fluide enger, statt auf eine zweite Zeile zu fallen. */
  .site .wrap{flex-wrap:nowrap;height:var(--head);min-height:var(--head)}
  .nav{gap:clamp(14px,1.6vw,32px);min-width:0}
  .nav a.lk{font-size:clamp(14px,1.05vw,16.5px)}
  .hdr-right{gap:clamp(9px,.9vw,16px);flex:none}
  .brand{flex:none}

  /* --- Seitenkopf der Unterseiten: Leerraum ueber der H1 ---------------
     Gemessen 19.09.2026 mit tools/matrix.js: fuellgrad 27-31 % der
     Schirmhoehe (243-277px bei Messhoehe 900, erlaubt 25 %) auf allen
     sechs Unterseiten und auf JEDER Desktopbreite, weil die Polster
     oberhalb der H1 alle am oberen Klammerende ihrer clamp() stehen.
     Drei Posten, einzeln nachgemessen bei 1440x900:
       Brotkrumenleiste  142px   (98 Kopf + 2x11 Polster + 21 Zeile)
       Sektionspolster    86px   (clamp(46,6vw,86) am oberen Anschlag)
       Kicker-Zeilenbox   29px   (nur 21px Inhalt — der Rest ist der
                                  Strut des 18px-Fliesstextes, weil
                                  .kick inline-flex ist)
       H1-Abstand         16px
     Zusammen 275px. Der Kicker als BLOCK (display:flex) hat keinen
     Strut mehr und wird damit so hoch wie sein Inhalt. */
  .brd ol{padding:7px 0}
  .phero,
  .brd+main .phero,
  main>.phero:first-child,
  .brd~main>.phero:first-child{padding-top:clamp(26px,2.3vw,38px)}
  body>main>.phero:first-child{padding-top:calc(var(--head) + clamp(24px,2.3vw,38px))}
  .kr-top{padding-top:clamp(22px,1.9vw,32px)}
  .phero .kick{display:flex;width:fit-content;line-height:1.25}
  .kr-top .kr-tag{display:block;width:fit-content;line-height:1.3;margin-bottom:6px}
  .h1.ph1{margin-top:10px}
  .kr-top .h1.ph1{margin-top:8px}

  /* --- Seitenkopf: die leere rechte Spalte --------------------------
     leerflaeche 32-51 % auf /einsatzbereiche/, /leistungen/, /ueber-uns/
     (Loch 433x463 bei 1440 bis 1059x478 bei 3440). Zwei Ursachen:
     (a) .h1.ph1 war auf 17ch gedeckelt — bei 1440 sind das 742px in
         einem 1182px-Satzspiegel, und die zweite Zeile brach dadurch
         sogar unnoetig um (3 statt 2 Zeilen auf /leistungen/);
     (b) die Eckdatentafel .pfacts stand als drittes UNTER dem Lauftext,
         rechts daneben blieb die halbe Spalte leer.
     Die H1 laeuft jetzt ueber beide Spalten, die Tafel steht neben dem
     Lauftext und fuellt die rechte Spalte. Seiten ohne Tafel
     (/kontakt/, /projekte/) behalten die einspaltige Anordnung —
     dafuer das :has(). */
  .h1.ph1{max-width:none}
  .phero .wrap:has(.pfacts){
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(280px,30%);
    column-gap:clamp(40px,3.6vw,76px);
    align-items:start}
  .phero .wrap:has(.pfacts)>.kick{grid-column:1;grid-row:1}
  .phero .wrap:has(.pfacts)>.h1.ph1{grid-column:1/-1;grid-row:2}
  .phero .wrap:has(.pfacts)>.phero-lead{grid-column:1;grid-row:3}
  .phero .wrap:has(.pfacts)>.pfacts{
    grid-column:2;grid-row:3;align-self:start;
    display:grid;grid-template-columns:minmax(0,1fr);gap:0;
    margin-top:22px;border-top:1px solid var(--line)}
  .phero .wrap:has(.pfacts)>.pfacts .fr{
    padding:14px 0 13px;border-bottom:1px solid var(--line)}
  .phero .wrap:has(.pfacts)>.pfacts .fr:last-child{border-bottom:0}

  /* --- Lesespalten: mitwachsend, aber gedeckelt ----------------------
     Tim 19.09.2026 zum Desktop: „vllt text groesser und fuelliger
     machen auch zum rand hin". Der Lauftext waechst deshalb mit dem
     Satzspiegel mit — aber nur bis 64 Zeichen, darueber wird eine Zeile
     unlesbar. */
  .phero-lead{font-size:clamp(17px,1.25vw,23px);max-width:64ch;margin-top:20px}
  .kr-top .phero-lead{max-width:66ch}
  .sp-tx p,ul.tick li{max-width:62ch}
  .kr-apply p{max-width:64ch}
  .prose{max-width:76ch}

  /* --- Kontaktband: die leere vierte Rasterspalte --------------------
     .cgrid stand fest auf repeat(4,1fr), im Markup liegen aber nur drei
     Eintraege — das vierte Viertel war auf ganzer Hoehe leer und war
     bei 3440 exakt der gemeldete 465px breite Teil des Lochs
     (1868/4 = 467). auto-fit klappt die leere Spur weg und bleibt
     richtig, falls spaeter ein vierter Eintrag dazukommt. */
  .cgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

  /* --- Haeufige Fragen: Liste auf den Satzspiegel -------------------
     .fq-list hing auf max-width:900px, waehrend die H2 darueber die
     volle Breite belegt — der Rest der Zeile war Loch (531x575 bei
     1920 bis 934x581 bei 3440).
     ACHTUNG, hier steckt die eigentliche Falle: die Liste allein auf
     volle Breite zu setzen macht das Loch GROESSER (724x581 statt
     531x575, gemessen 19.09.2026). Grund ist die Zeile selbst —
     <summary> traegt keinen eigenen Textknoten, sondern nur <span> und
     <svg>. Als Flaeche zaehlen damit nur die Frage links und der
     Pfeil rechts, und dazwischen steht per justify-content:space-between
     die halbe Zeile leer. Erst `flex:1` am Fragetext legt die Zeile
     lueckenlos aus. Gedeckelt bleibt nur die Antwort, und die ist zu
     flach, um als Loch zu zaehlen. */
  .faq-sec .fq-list{max-width:none}
  .fq summary{gap:clamp(22px,3vw,64px)}
  .fq summary>span{flex:1 1 auto;min-width:0}
  .fq-a{max-width:72ch}

  /* --- Kontaktband zweispaltig: Ueberschrift links, Zuspruch und
     Knoepfe rechts. Einspaltig blieb rechts neben der 14em-Ueberschrift
     ein Loch von 552x323 (1440) bis 467x323 (1920) stehen. Die
     m-only-Kurzfassung ist display:none und damit kein Rasterkind —
     beide .lead2 duerfen dieselbe Zelle tragen. */
  .contact .wrap{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    column-gap:clamp(44px,4vw,96px);
    align-items:start}
  .contact .wrap>.kick{grid-column:1/-1;grid-row:1}
  .contact .wrap>h2{grid-column:1;grid-row:2/span 2;max-width:none;
    font-size:clamp(40px,4.4vw,78px)}
  .contact .wrap>.lead2{grid-column:2;grid-row:2;max-width:38em;
    font-size:clamp(18px,1.3vw,23px);margin-top:26px}
  .contact .wrap>.contact-cta{grid-column:2;grid-row:3;margin-top:30px}
  .contact .wrap>.cgrid{grid-column:1/-1;grid-row:4}

  /* --- Projektgalerie: Riesensektion --------------------------------
     section.sec.alt auf /projekte/ war 2144px = 2,4 Schirme bei 1920
     und 2581px = 2,9 bei 3440 — fuenf Hochformate in zwei Spalten,
     jede Spalte so breit wie der halbe Satzspiegel. Das Sechserraster
     fuellt beide Zeilen restlos (3x span2, dann 2x span3), der
     Hoehendeckel haelt die Sektion unter zwei Schirmen. */
  .gal.pg-gal{grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 30px}
  .gal.pg-gal>figure{grid-column:span 2}
  .gal.pg-gal>figure:nth-last-child(-n+2){grid-column:span 3}
  .gal.pg-gal .ph{aspect-ratio:16/11;max-height:420px}
  .gal.pg-gal figcaption{max-width:44ch}
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · AB 1500px — der Satzspiegel wird breiter als der Inhalt
   Ab hier waechst --maxw (base.css: 1400/1560/1760/1980). Jede Spalte,
   die auf einem festen px- oder em-Deckel steht, bleibt dabei stehen
   und hinterlaesst genau das Loch, das matrix.js als leerflaeche meldet.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1500px){

  /* Startseiten-Hero: .hero-head stand fest auf 1000px, rechts daneben
     blieben 434px (1920) bis 809px (3440) ueber die volle Hoehe des
     Kopfblocks leer. */
  .hero-head{max-width:none}
  .h1{font-size:clamp(34px,6.4vw,112px)}
  .hero-sub{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,4vw,80px)}
  .hero-sub p{max-width:42em;font-size:clamp(19px,1.35vw,24px)}
  .hero-meta{gap:clamp(48px,4.4vw,88px)}

  .cgrid .ci a,.cgrid .ci span{font-size:clamp(18px,1.15vw,21px)}

  /* Sektionskoepfe duerfen mitwachsen, sonst steht die H2 als kleine
     Insel in einem 1560er Satzspiegel. */
  .lead-grid{gap:clamp(50px,4.4vw,88px)}
  .lead-grid h2{font-size:clamp(46px,3.5vw,62px)}
  .lead-grid .col-r p{font-size:clamp(19px,1.25vw,22px);max-width:56ch}
  .sp-tx h2,.about-grid h2{font-size:clamp(34px,3.1vw,54px)}
  .about-grid p{font-size:clamp(19px,1.3vw,23px);max-width:34em}
  .feat-body p{font-size:clamp(17px,1.2vw,21px);max-width:38em}
  .area p{max-width:34em}
}

/* ═══════════════════════════════════════════════════════════════════════
   3 · AB 1900px — Karten und Zeilen skalieren mit
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:1900px){
  .h1.ph1{font-size:clamp(66px,3.9vw,88px)}
  .lcard{padding:32px 30px}
  .lcard h3{font-size:20px}
  .lcard p{font-size:16px}
  .lcard .ic{width:46px;height:46px}
  .eb{padding:40px 28px 36px}
  .eb h3{font-size:20.5px}
  .eb p{font-size:15.5px}
  .eb .ic{width:56px;height:56px}
  .flow .fstep h3{font-size:22px}
  .flow .fstep p{font-size:17px}
  .pfacts .fr b{font-size:18px}
  .pfacts .fr small{font-size:12.5px}
  .kr-cols>div,.kk{padding:32px 30px}
  .napd dd{font-size:18px}
  .fq summary{font-size:20px}
  .fq-a p{font-size:17.5px}
  .brand img{height:70px}
  .brand .bt b{font-size:22px}
}

/* ═══════════════════════════════════════════════════════════════════════
   4 · AB 2400px — 4K und darueber
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:2400px){
  .h1{font-size:clamp(112px,5vw,132px)}
  .lcard{padding:38px 34px}
  .lcard p{font-size:17px}
  .eb p{font-size:16.5px}
  .area p{font-size:17.5px}
  .gal figcaption{font-size:17.5px}
  .footer nav a{font-size:16px}
  .footer .cp{font-size:14.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   5 · AB 3400px — Ultrawide 21:9 und 32:9
   base.css deckelt --maxw bei 1980px. Auf 3440px sind das 58 % der
   Breite, auf 5120px nur 39 % — der Inhalt klebt als schmale Insel in
   der Mitte. Der Satzspiegel waechst deshalb weiter, waehrend jede
   Lesespalte oben in Zeichen gedeckelt bleibt.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width:3400px){
  :root{--maxw:2240px}
  body{font-size:21px}
  .wrap{padding:0 clamp(56px,2.4vw,96px)}
  .lst-grid,.areas{gap:26px}
  .eb-grid{gap:26px}
}
@media (min-width:4400px){
  :root{--maxw:2600px}
  body{font-size:22px}
  .h1{font-size:clamp(132px,3.2vw,158px)}

  /* Der breitere Satzspiegel reisst zwei Loecher auf, die bis 3440
     nicht da sind. Beide gemessen bei 5120x900 am 19.09.2026: */

  /* (a) section.hero 1043x471 = 23 % — zwischen dem Lauftext der
     Heldenzeile (42em) und der rechts stehenden Knopfgruppe, nach
     unten durch die Eckdatenzeile. Die Eckdaten als mitwachsendes
     Raster legen die untere Haelfte aus, der breitere Lesedeckel
     die obere. */
  .hero-sub p{max-width:54em}
  .hero-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
    gap:clamp(30px,1.6vw,56px)}

  /* (b) riesensektion section.sec.split 1672px = 1,9 Schirme und das
     2,4-fache des Median-Abschnitts. Das Motiv steht auf height:auto
     und rechnet sich aus der Spaltenbreite hoch — je breiter der
     Satzspiegel, desto hoeher die Sektion. Der Deckel gehoert an die
     Spalte und braucht eine ECHTE Hoehe: height:100% am Bild loest
     gegen ein blosses max-height nicht auf. */
  .sp-img{height:min(700px,62vh)}
  .sp-img img{height:100%;object-fit:cover}
}

/* Einblende-Verzoegerungen als Klassen (CSP erlaubt keine Style-Attribute) */
.d-04{--d:.04s}.d-05{--d:.05s}.d-10{--d:.10s}.d-12{--d:.12s}.d-18{--d:.18s}.d-20{--d:.20s}.d-24{--d:.24s}.d-26{--d:.26s}.d-28{--d:.28s}.d-30{--d:.3s}.d-34{--d:.34s}.d-42{--d:.42s}.d-50{--d:.5s}.d-56{--d:.56s}.d-62{--d:.62s}.d-68{--d:.68s}
.mt18{margin-top:18px}
:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+1):is(.rv,.rvimg),:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+1) :is(.rv,.rvimg){transition-delay:0.02s}
:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+2):is(.rv,.rvimg),:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+2) :is(.rv,.rvimg){transition-delay:0.10s}
:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+3):is(.rv,.rvimg),:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+3) :is(.rv,.rvimg){transition-delay:0.18s}
:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+4):is(.rv,.rvimg),:is(.areas,.gal,.flow,.lst-grid,.eb-grid,.kr-grid,.pg-list,.kontakt-grid,.fq-list,.tasklist)>:nth-child(4n+4) :is(.rv,.rvimg){transition-delay:0.26s}