/* SLX – gescoptes Stylesheet: wirkt nur innerhalb von <div class="slx"> */
.slx{
  --blue:#5289A6;--blue-deep:#3B7089;--blue-ink:#2C617E;--navy:#1B3A6B;--sand:#DAD4CD;
  --orange:#F5A33A;--ink:#1D2830;--muted:#55636D;--mist:#F2F6F8;--line:#D5E1E8;
  display:block;position:relative;isolation:isolate;overflow-x:clip;
  font-family:'Montserrat','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);background:#fff;line-height:1.65;font-size:1.0625rem;
}
.slx,.slx *{box-sizing:border-box}
.slx a{color:var(--blue-ink)}
.slx :focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.slx .wrap{width:min(1080px,100% - 2.5rem);margin-inline:auto}
.slx .logo-text{
  display:flex;font-size:3rem;font-weight:700;line-height:1;letter-spacing:-.025em;color:#030712;
}

.slx .intro{text-align:center;padding:3.5rem 0 .5rem}
.slx .intro h1{font-size:clamp(1.9rem,4.6vw,3.1rem);line-height:1.15;margin:0 auto .9rem;font-weight:300;letter-spacing:-.01em}
.slx .intro h1 strong{display:block;font-weight:700}
.slx .intro p{margin:0 auto;max-width:52ch;color:var(--muted)}

.slx .hub{position:relative;width:min(820px,100%);aspect-ratio:1;margin:1rem auto 3.5rem}
.slx .hub-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.slx .hub-lines line{stroke:var(--blue);stroke-width:1.6;stroke-opacity:.5;vector-effect:non-scaling-stroke;stroke-dasharray:2 7;stroke-linecap:round}
.slx .hub-lines circle{fill:var(--blue);opacity:.55}
.slx .hub-core{
  position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(120px,23%,190px);aspect-ratio:1;
  border-radius:50%;background:#fff;border:2px solid var(--blue);display:grid;place-items:center;box-shadow:0 0 0 12px var(--mist);
}
.slx .node{
  position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;width:150px;display:flex;flex-direction:column;
  align-items:center;gap:.7rem;text-align:center;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;line-height:1.25;
}
.slx .disc{
  width:clamp(64px,11vw,92px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--sand);
  color:var(--blue-ink);box-shadow:0 0 0 6px #fff;transition:background .2s,color .2s,transform .2s;
}
.slx .disc svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.slx .node:hover .disc,.slx .node:focus-visible .disc{background:var(--blue-deep);color:#fff;transform:scale(1.08)}
.slx .node:hover .label{text-decoration:underline;text-underline-offset:4px}
@media (max-width:720px){
  .slx .hub{aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem 1rem;margin-bottom:2.5rem}
  .slx .hub-lines{display:none}
  .slx .hub-core{position:static;translate:none;grid-column:1/-1;justify-self:center;width:150px;margin-bottom:.5rem}
  .slx .node{position:static;translate:none;width:auto}
  .slx .disc{width:76px}
}

.slx .advantage{margin:0 auto 3.5rem;max-width:720px;padding:1.4rem 1.8rem;border-left:6px solid var(--orange);background:var(--mist);border-radius:0 12px 12px 0}
.slx .advantage strong{display:block;font-size:1.15rem;color:var(--navy);margin-bottom:.2rem}

.slx .voices{background:var(--blue-deep);color:#fff;padding:3.5rem 0}
.slx .voices h2{font-weight:400;font-size:clamp(1.5rem,3vw,2rem);margin:0 0 2rem;color:#fff}
.slx .voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem;color:#fff}
.slx blockquote{margin:0;padding:0;border:0}
.slx blockquote p{margin:0 0 1rem;max-width:44ch;color:#fff}
.slx blockquote footer{font-weight:700;font-size:1.2rem}

.slx .closing{padding:3.5rem 0}
.slx .closing p{max-width:66ch;margin:0 0 1.2rem}

.slx .cta{background:var(--mist);padding:3rem 0}
.slx .cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem}
.slx .cta h2{margin:0 0 .3rem;font-size:1.5rem}
.slx .cta p{margin:0;color:var(--muted)}
.slx .btn{display:inline-block;background:var(--orange);color:#1B2A33;font-weight:700;padding:.95rem 1.7rem;border-radius:999px;text-decoration:none;transition:background .2s}
.slx .btn:hover{background:#FFB95A}

.slx .page-hero{background:var(--blue-deep);color:#fff;padding:1.8rem 0 3rem}
.slx .crumb{color:#fff;font-weight:600;text-decoration:none}
.slx .crumb:hover{text-decoration:underline;text-underline-offset:4px}
.slx .page-hero .row{display:flex;gap:1.6rem;align-items:center;margin-top:1.6rem}
.slx .page-hero .disc{width:88px;flex:none;box-shadow:none}
.slx .page-hero .disc svg{width:46%;height:46%}
.slx .page-hero h1{font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.15;margin:0;font-weight:700;color:#fff}
.slx .page-hero .lead{max-width:62ch;margin:1.3rem 0 0;font-size:1.15rem}

.slx .content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;padding:3.5rem 0;align-items:start}
@media (max-width:820px){.slx .content{grid-template-columns:1fr;gap:2.5rem}.slx .page-hero .row{flex-direction:column;align-items:flex-start}}
.slx .content h2{font-size:1.3rem;color:var(--blue-ink);margin:0 0 1rem}
.slx .content section+section{margin-top:2.2rem}
.slx .content p{margin:0 0 1rem;max-width:62ch}
.slx .content img{max-width:100%;height:auto}
.slx .features{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.slx .features li{padding-left:1.7rem;position:relative;margin:0}
.slx .features li::before{content:"";position:absolute;left:0;top:.62em;width:.7rem;height:.7rem;border-radius:50%;background:var(--blue)}

.slx .pager{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:0 0 2.5rem}
.slx .pager a{font-weight:600;text-decoration:none;padding:.7rem 1.1rem;border:2px solid var(--line);border-radius:999px}
.slx .pager a:hover{border-color:var(--blue)}

.slx .more{background:#fff;border-top:1px solid var(--line);padding:2.5rem 0 3rem}
.slx .more h2{font-size:1.15rem;margin:0 0 1.2rem;color:var(--navy)}
.slx .more ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.8rem}
.slx .more li{margin:0}
.slx .more a{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;padding:.4rem 1rem .4rem .4rem;border-radius:999px;background:var(--mist)}
.slx .more a .disc{width:38px;box-shadow:none}
.slx .more a:hover{background:var(--sand)}

@media (prefers-reduced-motion:reduce){
  .slx .disc,.slx .btn{transition:none}
  .slx .node:hover .disc,.slx .node:focus-visible .disc{transform:none}
}