/* Design 8: Mosaik. Kachelwand in Markenfarben, Details öffnen als Overlay. */
body.d8{background:#f1f3f5;--c-bg:#10202c;--c-accent:var(--orange);--c-btn:var(--orange);--c-btn-ink:#10202c;--c-radius:12px;--wrap:1320px}
.bar8{background:#f1f3f5}.bar8-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px}.logo{width:230px}.logo img{width:100%;height:auto}.bar8-nav{display:flex;gap:6px;align-items:center}.bar8-nav a{padding:10px 18px;border-radius:999px;font-weight:800;font-size:14px}.bar8-nav a:hover{background:#e2e7eb}.bar8-nav a[aria-current]{background:#10202c;color:#fff}.bar8-nav .cta{background:var(--orange);margin-left:6px}
.intro{padding-block:clamp(24px,4vw,56px) clamp(20px,3vw,32px)}.intro h1{font-size:clamp(3rem,8vw,7.6rem);line-height:.9;letter-spacing:-.07em;font-weight:800}.intro .lead{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:600;color:#44525c;margin-top:18px}
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(168px,auto);gap:14px;padding-bottom:clamp(48px,7vw,96px)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:clamp(20px,2.4vw,34px);border:0;border-radius:30px;text-align:left;overflow:hidden;color:#10202c;transition:transform .3s cubic-bezier(.3,1.3,.4,1)}
button.tile:hover,a.tile:hover{transform:translateY(-6px) scale(1.01)}button.tile:focus-visible,a.tile:focus-visible{outline:4px solid #10202c;outline-offset:3px}
.tile-k{font-weight:800;font-size:14px;opacity:.85}.tile>*:not(.disc):not(.rings){position:relative;z-index:1}.tile-big{padding-bottom:.06em;font-size:clamp(2rem,5.6vw,5.4rem);line-height:.92;letter-spacing:-.06em;font-weight:800;text-wrap:balance;max-width:11ch}.tile-s{margin-top:8px;font-size:clamp(1rem,1.4vw,1.2rem);font-weight:700;line-height:1.3;max-width:24ch}
.tile-arrow{position:absolute;top:20px;right:20px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#10202c;font-style:normal;font-size:1.6rem;font-weight:800;line-height:1;transition:transform .3s}button.tile:hover .tile-arrow{transform:rotate(90deg)}
.t-rfm{grid-column:1/7;grid-row:span 2;background:var(--red);color:#fff}.t-rfm .tile-big{max-width:6.5ch}.t-spot{grid-column:7/13;grid-row:span 2;background:var(--blue);color:#fff}
.disc{position:absolute;z-index:0;right:-14%;top:-22%;width:52%;aspect-ratio:1;border-radius:50%;background:var(--orange)}
.minis{display:flex;gap:8px;align-items:flex-end;margin-top:6px}.minis img{height:clamp(60px,9vw,120px);width:auto;max-width:22%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,30,60,.35))}
.t-num{grid-column:span 3;gap:2px}.t-num b{font-size:clamp(3rem,6.6vw,6.4rem);line-height:.85;letter-spacing:-.07em;font-weight:800}.t-num span{font-weight:700;font-size:15px;line-height:1.3}.t-orange{background:var(--orange)}.t-green{background:var(--green)}.t-ink{background:#10202c;color:#fff}
.t-wire{grid-column:span 3;background:#fff}.t-wire b{position:relative;z-index:2;font-size:clamp(1.8rem,3.4vw,3.2rem);letter-spacing:-.06em;line-height:1}.rings{position:absolute;right:-42%;top:-42%;width:90%;aspect-ratio:1}.rings i{position:absolute;border-radius:50%;border:10px solid var(--blue)}.rings i:nth-child(1){inset:0}.rings i:nth-child(2){inset:18%;border-color:var(--orange)}.rings i:nth-child(3){inset:36%;border-color:var(--red)}
.t-flow{grid-column:span 8;background:#10202c;color:#fff;gap:14px}.chips{display:flex;flex-wrap:wrap;gap:10px}.chips i{font-style:normal;font-weight:800;padding:12px 22px;border-radius:999px;background:var(--c);color:#10202c;font-size:clamp(.95rem,1.6vw,1.3rem)}.chips i:nth-child(1),.chips i:nth-child(3){color:#fff}
.t-go{grid-column:span 4;background:var(--orange);justify-content:space-between}.t-go .tile-big{font-size:clamp(1.8rem,3.2vw,3rem);max-width:9ch}.t-go .tile-arrow{position:static;margin-top:10px;align-self:flex-start}
/* Overlay */
.dlg{width:min(1100px,calc(100% - 32px));max-height:calc(100vh - 32px);padding:0;border:0;border-radius:32px;overflow:auto;background:#fff;color:#10202c;box-shadow:0 40px 100px rgba(0,0,0,.5)}.dlg::backdrop{background:rgba(16,32,44,.78);backdrop-filter:blur(4px)}
.dlg-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(20px,3vw,36px);background:var(--c);color:#fff}.dlg-head h2{font-size:clamp(2rem,5.4vw,4.6rem);line-height:.92;letter-spacing:-.06em;font-weight:800}.dlg[style*=green] .dlg-head{color:#10202c}
.close{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:50%;border:0;background:#fff;color:#10202c;font-size:2rem;line-height:1;font-weight:800}.close:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(16,32,44,.45)}
.dlg-body{padding:clamp(20px,3vw,40px)}.dlg-lead{font-size:clamp(1.1rem,1.6vw,1.35rem);font-weight:600;line-height:1.45;max-width:50ch;color:#35444f}
.dcols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}.dcols4{grid-template-columns:repeat(4,1fr)}.dcols article{padding:20px;border-radius:20px;background:#f1f4f6;border-top:8px solid var(--c)}.dcols h3{font-size:1.2rem;font-weight:800;margin-bottom:8px}.dcols li{padding:8px 0;border-top:1px solid #dbe3e8;font-size:15px;color:#35444f}.dcols li:first-child{border-top:0}.dcols p{font-size:14.5px;color:#35444f}.dcols .role{font-weight:800;color:#10202c}.dcols figure{aspect-ratio:1.2;display:grid;place-items:center;margin-bottom:8px}.dcols img{max-width:80%;max-height:100%;object-fit:contain}
.dlg-cta{display:inline-flex;margin-top:26px;padding:15px 34px;background:#10202c;color:#fff;border-radius:999px;font-weight:800}
.d8 .contact{background:#10202c}.d8 .footer{background:#f1f3f5}
@media(max-width:1000px){.t-rfm,.t-spot{grid-column:1/-1}.t-num{grid-column:span 6}.t-wire{grid-column:span 6}.t-flow{grid-column:1/-1}.t-go{grid-column:1/-1}.dcols,.dcols4{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mosaic{grid-template-columns:1fr}.t-rfm,.t-spot,.t-num,.t-wire,.t-flow,.t-go{grid-column:1/-1}.tile{min-height:190px;grid-row:auto}.dcols,.dcols4{grid-template-columns:1fr}.bar8-nav a:not(.cta){display:none}.logo{width:180px}}
@media(prefers-reduced-motion:reduce){.tile,.tile-arrow{transition:none}}