@charset "utf-8";
/* Gemeinsame Gestaltung aller Leistungs- und Zielgruppenseiten.
   Aenderungen hier wirken auf alle sechs Unterseiten zugleich. */
/* FONTS:START – Schriften liegen lokal im Hauptverzeichnis, keine Verbindung zu Google.
   Schibsted Grotesk und Instrument Sans sind variable Schriften: eine Datei deckt mehrere Stärken ab. */
@font-face{font-family:"Schibsted Grotesk";src:url("schibsted-grotesk.woff2") format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("instrument-sans.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* FONTS:END */

/* Leistungsseite — gleiche Tokens wie index.html, ohne WebGL, damit sie sofort steht */
:root{
  --void:#05100E;--deep:#0A241E;--ink:#0B1614;--teal:#3C7B86;--teal-lit:#79BAC2;
  --signal:#D98C3D;--signal-lit:#EDA660;--ice:#EDF3F1;--ice-2:#E3ECE9;
  --mist:#A2B7B1;--slate:#52665F;--text-lead:#C6D6D1;
  --line-d:rgba(200,235,226,.14);--line-d-2:rgba(200,235,226,.28);--line-l:rgba(11,22,20,.13);
  --glass-blur:blur(22px) saturate(160%);
  --f-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gut:clamp(1.25rem,4.2vw,3.75rem);--wrap:1180px;--ease:cubic-bezier(.22,.61,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ice);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--signal);color:#1A0E02}
:focus-visible{outline:2px solid var(--signal-lit);outline-offset:3px;border-radius:4px}
[hidden]{display:none !important}
[id]{scroll-margin-top:5.5rem}
h1,h2,h3{font-family:var(--f-display);font-weight:800;margin:0;text-wrap:balance}
p,ul,dl{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-size:.715rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--teal);margin:0 0 1.2rem}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto}
.dark .eyebrow{color:var(--teal-lit)}
.skip{position:absolute;left:-9999px;top:.5rem;z-index:100;background:var(--signal);color:#1B0F03;padding:.5rem 1rem;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{left:1rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-weight:600;font-size:.925rem;
  padding:.8rem 1.4rem;border-radius:999px;border:1px solid transparent;background:transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.btn--signal{background:var(--signal);color:#1B0F03;border-color:var(--signal)}
.btn--signal:hover{background:var(--signal-lit);border-color:var(--signal-lit);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-d-2);color:inherit}
.btn--ghost:hover{border-color:currentColor;transform:translateY(-2px)}

/* Navigation */
.nav{
  position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;
  padding:.85rem var(--gut);color:#E8F1EE;
  background:rgba(5,16,14,.86);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line-d);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;justify-self:start}
.brand__mark{width:46px;height:26px;flex:0 0 auto}
.brand__name{font-family:var(--f-display);font-weight:800;font-size:1.06rem;letter-spacing:-.03em;line-height:1}
.brand__sub{display:block;font-family:var(--f-mono);font-size:.52rem;letter-spacing:.28em;font-weight:500;opacity:.62;margin-top:.18rem}
.nav__links{display:flex;gap:1.6rem;justify-self:center}
.nav__links a{text-decoration:none;font-size:.895rem;font-weight:500;opacity:.75;position:relative;padding:.2rem 0;transition:opacity .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--signal);transition:right .35s var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{opacity:1}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{right:0}
.nav__cta{justify-self:end;padding:.6rem 1.15rem;font-size:.85rem}

/* ---------- Seitenkachel oben rechts ----------
   Beruht auf <details>, klappt also auch ohne JavaScript auf. */
.nav__rechts{display:flex;align-items:center;gap:.6rem;justify-self:end;grid-column:3}
.kachel{position:relative}
.kachel > summary{
  list-style:none;cursor:pointer;display:grid;place-items:center;
  width:40px;height:40px;border:1px solid var(--line-d-2);border-radius:12px;
  transition:border-color .25s,background .25s;
}
.kachel > summary::-webkit-details-marker{display:none}
.kachel > summary:hover{border-color:currentColor}
.kachel[open] > summary{border-color:var(--signal);background:rgba(217,140,61,.12)}
.kachel svg{display:block;width:18px;height:18px;fill:currentColor}
.kachel__panel{
  position:absolute;right:0;top:calc(100% + .65rem);z-index:70;
  width:min(21rem,calc(100vw - 1.6rem));padding:.55rem;
  border:1px solid rgba(210,240,232,.16);border-radius:16px;
  background:linear-gradient(160deg,rgba(14,42,36,.97) 0%,rgba(6,20,17,.98) 100%);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -34px rgba(0,0,0,.65);
}
/* Sicherheitsnetz: geschlossen wird das Panel in jedem Browser vollständig entfernt */
.kachel:not([open]) .kachel__panel{display:none}
.kachel__gruppe{display:block;padding:.6rem .8rem .3rem;color:var(--teal-lit)}
.kachel__panel a{
  display:block;padding:.6rem .8rem;border-radius:10px;text-decoration:none;
  color:#E8F1EE;font-size:.92rem;font-weight:500;transition:background .2s;
}
.kachel__panel a:hover{background:rgba(255,255,255,.08)}
.kachel__trenner{height:1px;background:var(--line-d);margin:.4rem .5rem}

/* Kopf der Seite */
.dark{background:var(--void);color:#E8F1EE}
.hero{
  background:radial-gradient(70% 90% at 85% 20%,#0F302A 0%,rgba(5,16,14,0) 62%),var(--void);
  padding:clamp(3.2rem,7vw,6rem) 0 clamp(3.8rem,8vw,6.5rem);overflow:hidden;
}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;color:var(--mist);margin-bottom:2rem}
.crumbs a{text-decoration:none;color:var(--mist);transition:color .25s}
.crumbs a:hover{color:#E8F1EE}
.crumbs span[aria-hidden]{opacity:.5}
.hero h1{font-size:clamp(2.3rem,4.9vw,4.1rem);line-height:.98;letter-spacing:-.036em}
.hero h1 em{font-style:normal;color:var(--teal-lit)}
.lead{font-size:clamp(1.06rem,1.3vw,1.24rem);line-height:1.62;max-width:34em}
.hero .lead{color:var(--text-lead);margin-top:1.6rem}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:2rem}
.hero__micro{flex-basis:100%;color:var(--mist);font-size:.64rem;margin-top:.2rem}
.viz{width:100%;max-width:520px;justify-self:end;height:auto;display:block}

/* Grafiken */
.viz .ln{fill:none;stroke:var(--teal);stroke-opacity:.45;stroke-width:1.4}
.viz .pulse{fill:none;stroke:#BFE3DC;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:16 420;animation:pulse 4.8s linear infinite}
.viz .pulse.o{stroke:var(--signal)}
.viz .node{fill:#0E2F29;stroke:var(--teal-lit);stroke-width:1.4}
.viz .node.o{fill:var(--signal);stroke:var(--signal-lit)}
.viz .ring{fill:none;stroke:var(--signal);stroke-opacity:.5;animation:ring 3.2s var(--ease) infinite;transform-box:fill-box;transform-origin:center}
.viz .sim{fill:none;stroke:var(--teal-lit);stroke-opacity:.55;stroke-width:1.3;animation:sim 5s ease-in-out infinite}
.viz .sim.f{fill:rgba(60,123,134,.28)}
.viz .sim.o{fill:var(--signal);stroke:var(--signal-lit);stroke-opacity:1}
.viz .chip{fill:none;stroke:var(--teal-lit);stroke-opacity:.5;stroke-width:1.1}
.viz .sim.o + .chip{stroke:#1B0F03;stroke-opacity:.55}
@keyframes pulse{from{stroke-dashoffset:436}to{stroke-dashoffset:0}}
@keyframes ring{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@keyframes sim{0%,100%{stroke-opacity:.35}50%{stroke-opacity:.85}}

/* Helle Abschnitte */
.sec{padding:clamp(3.8rem,8vw,6.2rem) 0}
.sec + .sec{padding-top:0}
.sec + .sec > .wrap{border-top:1px solid var(--line-l);padding-top:clamp(3.2rem,6vw,5rem)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:start}
.split h2,.sec h2{font-size:clamp(1.75rem,3.3vw,2.6rem);line-height:1.05;letter-spacing:-.03em}
.prose{max-width:62ch;color:#2A3A36;font-size:1.06rem}
.prose p+p{margin-top:1.1rem}
.prose strong{color:var(--ink)}

/* Begriffe erklärt */
.terms{display:flex;flex-direction:column;border-top:1px solid var(--line-l);margin-top:2.2rem}
.terms > div{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:.4rem 2rem;padding:1.4rem 0;border-bottom:1px solid var(--line-l)}
.terms dt{font-family:var(--f-display);font-weight:700;font-size:1.08rem;letter-spacing:-.015em;line-height:1.3}
.terms dt small{display:block;font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-top:.35rem}
.terms dd{margin:0;color:#2A3A36}

/* Themen, die wir klären */
.topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem clamp(1.6rem,3vw,2.6rem);margin-top:2.6rem}
.topic{border-top:1px solid var(--line-l);padding-top:1.1rem}
.topic .mono{color:var(--teal);display:block;margin-bottom:.6rem}
.topic h3{font-size:1.12rem;letter-spacing:-.018em;line-height:1.25;margin-bottom:.45rem}
.topic p{color:#3A4B46;font-size:.97rem}

/* Hinweise mit dem Schalter aus dem Logo */
.tips{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem clamp(2rem,5vw,4rem)}
.tips li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start}
.tips .sw{width:32px;height:18px;border-radius:999px;background:var(--deep);position:relative;margin-top:.3rem}
.tips .sw::after{content:"";position:absolute;top:2px;left:16px;width:14px;height:14px;border-radius:50%;background:var(--signal)}
.tips h3{font-size:1.08rem;letter-spacing:-.015em;margin-bottom:.35rem}
.tips p{color:#3A4B46;font-size:.97rem}

/* Ablauf in einer Zeile */
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1.8rem;color:#3A4B46;font-size:.95rem}
.steps b{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--signal);font-weight:500;margin-right:.35rem}
.steps i{font-style:normal;opacity:.4}
.steps .inline-link{margin-left:.9rem}
.inline-link{color:var(--teal);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(60,123,134,.35)}
.inline-link:hover{border-color:var(--teal)}

/* Einleitungssatz unter einer Abschnittsüberschrift */
.sec-intro{max-width:62ch;color:#2A3A36;font-size:1.06rem;margin-top:1.2rem}

/* Ablauf Schritt für Schritt – nur dort, wo die Reihenfolge wirklich zählt */
.proc{list-style:none;padding:0;margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-l);counter-reset:schritt}
.proc li{padding:1.5rem 1.4rem 0 0;counter-increment:schritt}
.proc li + li{padding-left:1.4rem;border-left:1px solid var(--line-l)}
.proc li::before{content:"Schritt " counter(schritt);display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:.8rem}
.proc h3{font-size:1.08rem;letter-spacing:-.015em;line-height:1.25;margin-bottom:.45rem}
.proc p{color:#3A4B46;font-size:.97rem}
@media (max-width:1000px){
  .proc{grid-template-columns:1fr;border-top:0}
  .proc li,.proc li + li{padding:1.3rem 0;border-left:0;border-top:1px solid var(--line-l)}
}

/* Hinweis mit Rechtslage oder Einordnung */
.hinweis{margin-top:2.2rem;padding:1.15rem 1.35rem;border-left:3px solid var(--teal);border-radius:0 12px 12px 0;background:#fff;color:#2A3A36;font-size:.97rem;max-width:74ch}
.hinweis strong{color:var(--ink)}
.weiter{margin-top:1.8rem}

/* Vergleichstabelle – scrollt auf schmalen Bildschirmen in sich, nie die ganze Seite */
.tabelle{margin-top:2.2rem;overflow-x:auto;border-top:1px solid var(--line-l)}
.vergleich{width:100%;min-width:640px;border-collapse:collapse;font-size:.97rem}
.vergleich th,.vergleich td{text-align:left;vertical-align:top;padding:1rem 1.2rem 1rem 0;border-bottom:1px solid var(--line-l)}
.vergleich thead th{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.015em;color:var(--ink);padding-top:1.2rem}
.vergleich tbody th{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:500;width:11rem;padding-top:1.2rem}
.vergleich td{color:#3A4B46}

/* FAQ */
.faq{border-top:1px solid var(--line-l);margin-top:2.2rem;max-width:860px}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.4rem 3rem 1.4rem 0;position:relative;
  font-family:var(--f-display);font-weight:700;font-size:clamp(1.02rem,1.5vw,1.18rem);letter-spacing:-.018em;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.8rem;width:12px;height:12px;
  border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);transform:rotate(45deg);transition:transform .35s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);top:2rem}
.faq__a{padding:0 3rem 1.6rem 0;color:#3A4B46;max-width:68ch}

/* Weitere Leistungen */
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.8rem}
.more a{
  display:flex;flex-direction:column;gap:.4rem;padding:1.5rem 1.6rem;border-radius:18px;text-decoration:none;
  background:#fff;border:1px solid var(--line-l);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.more a:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:0 20px 40px -26px rgba(11,22,20,.35)}
.more .mono{color:var(--teal)}
.more b{font-family:var(--f-display);font-size:1.22rem;letter-spacing:-.02em}
.more span:last-child{color:#3A4B46;font-size:.95rem}

/* Abschluss */
.cta-band{padding:clamp(4.5rem,9vw,7rem) 0;text-align:center;
  background:radial-gradient(60% 80% at 50% 0%,#0F302A 0%,rgba(5,16,14,0) 70%),var(--void)}
.cta-band h2{font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.02;letter-spacing:-.032em;max-width:20ch;margin:0 auto}
.cta-band .lead{color:var(--text-lead);margin:1.3rem auto 0}
.cta-band .hero__cta{justify-content:center}
.cta-band .hero__micro{text-align:center}

/* Fuß */
.foot{background:var(--void);color:#E8F1EE;border-top:1px solid var(--line-d);padding:2.4rem 0 2.8rem}
.foot__row{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem}
.foot nav a{text-decoration:none;font-size:.87rem;color:var(--mist);transition:color .25s}
.foot nav a:hover{color:var(--signal)}
.foot small{color:var(--mist);font-size:.8rem}

/* Schnellkontakt auf dem Handy */
.mobilbar{display:none}

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .viz{justify-self:start;max-width:420px}
  .split{grid-template-columns:1fr}
  .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .nav__links{display:none}
  .topics,.tips,.more{grid-template-columns:1fr}
  .terms > div{grid-template-columns:1fr}
  .eyebrow{letter-spacing:.1em}
  body{padding-bottom:5.2rem}
  .mobilbar{
    position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:1fr 1.5fr;gap:.6rem;
    padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));color:#E8F1EE;
    background:rgba(5,16,14,.82);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
    border-top:1px solid var(--line-d);
  }
  .mobilbar .btn{padding:.78rem 1rem}
  .nav__cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.001ms !important}
}