/* sitetap · Komponenten · setzt tokens.css voraus · Übersicht: komponenten.html */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--st-weiss)}
body{margin:0;background:var(--st-weiss);color:var(--st-schiefer);font:400 var(--st-body)/1.7 var(--st-font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--st-font-head);font-weight:600;color:var(--st-tinte);margin:0 0 .5em}
h1{font-size:var(--st-h1);line-height:1.04;letter-spacing:-.03em}
h2{font-size:var(--st-h2);line-height:1.1;letter-spacing:-.025em}
h3{font-size:var(--st-h3);line-height:1.2;letter-spacing:-.02em}
.st-lead{font-size:var(--st-lead);line-height:1.6}
.st-kennzahl{font:600 var(--st-kennzahl)/1 var(--st-font-head);letter-spacing:-.03em;color:var(--st-indigo)}
.st-prose{max-width:var(--st-blog-measure);font-size:18px}
@media (max-width:640px){.st-prose{font-size:17px}}
.st-container{max-width:var(--st-container);margin:0 auto;padding:0 16px}

/* Buttons */
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 var(--st-button)/1 var(--st-font-head);padding:15px 24px;border:0;border-radius:var(--st-ecke-btn);text-decoration:none;cursor:pointer;transition:background var(--st-dauer-kurz)}
.st-btn--klein{padding:13px 20px}   /* Header */
.st-btn--voll{width:100%}         /* Preiskarten */
/* Pfeil im Button oder Textlink rückt beim Hover 3 px nach rechts */
.st-btn svg,.st-link svg{flex:none;transition:transform .2s}
.st-btn:hover svg,.st-link:hover svg{transform:translateX(3px)}
.st-btn--primary{background:var(--st-indigo);color:#fff;box-shadow:var(--st-glow)}
.st-btn--primary:hover,.st-btn--primary:active{background:var(--st-indigo-dunkel)}
.st-btn--secondary{background:#fff;color:var(--st-tinte);box-shadow:inset 0 0 0 1px #DDE2EE}
.st-btn:disabled{background:var(--st-linie);color:var(--st-grau);box-shadow:none;cursor:default}
.st-dark .st-btn--secondary{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}

/* Pills / Badges */
.st-pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;background:#fff;color:var(--st-tinte);border-radius:var(--st-ecke-pill);padding:8px 14px;font:600 13px/1 var(--st-font-head);box-shadow:var(--st-float)}
.st-pill--soft{background:var(--st-lavendel);color:var(--st-indigo);box-shadow:none}
.st-pill svg{flex:none;color:var(--st-indigo)}
.st-dark .st-pill{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.st-card .st-pill,.st-card .st-pill--soft{box-shadow:none}   /* auf Karten flach */
/* Glas-Pill: schwebt über Bildern und Illustrationen, das Motiv scheint durch */
.st-pill--glass{color:var(--st-tinte);background:var(--st-glass-pill-bg);-webkit-backdrop-filter:var(--st-glass-pill-filter);backdrop-filter:var(--st-glass-pill-filter);box-shadow:var(--st-glass-pill-shadow)}
.st-float{animation:st-float 6s ease-in-out infinite}
@keyframes st-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Badge: kleine Vertrauens-Hinweise (Zertifikate, DSGVO), flach in Kartengrau */
.st-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--st-ecke-pill);background:var(--st-kartengrau);font:600 12px/1 var(--st-font-head);color:var(--st-schiefer)}
.st-badge svg{flex:none;color:var(--st-indigo)}

/* Textlink mit Pfeil */
.st-link{display:inline-flex;align-items:center;gap:6px;font:600 var(--st-button)/1 var(--st-font-head);color:var(--st-tinte);text-decoration:none;transition:color var(--st-dauer-kurz)}
.st-link:hover{color:var(--st-indigo)}

/* Karte: kein Rahmen, keine Kante, kein Schatten */
.st-card{background:var(--st-karte-bg);border-radius:var(--st-radius-karte);padding:32px}
.st-card .st-btn--secondary,.st-card .st-pill,.st-card input{background:#fff} /* Weiß auf der Karte */
.st-card--indigo{background:var(--st-karte-indigo-bg);color:#fff}      /* eine Kennzahl als Blickfang, max. eine pro Raster */
.st-card--indigo h3,.st-card--indigo .st-stat strong{color:#fff}
.st-card--indigo .st-stat span{color:#fff;opacity:.9}
.st-card--empfohlen{background:var(--st-karte-empfohlen-bg)}          /* empfohlenes Paket */

/* Dunkle Kachel: Bühne für Illustrationen in einem Raster (Leistungen). Zählt nicht als Dark-Sektion. */
.st-tile-dark{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--st-radius-karte);background:var(--st-kachel-dunkel-bg);color:var(--st-nebeltext);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.08)}
.st-tile-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(55% 45% at 50% 32%,rgba(69,91,229,.26) 0%,rgba(69,91,229,0) 100%);opacity:.75;transition:opacity .4s}
.st-tile-dark:hover::before{opacity:1}
.st-tile-dark h3{color:#fff}

/* Glas-Panel: Mega-Menü, mobiles Menü, Overlays */
.st-glass{background:var(--st-glass-bg);-webkit-backdrop-filter:var(--st-glass-filter);backdrop-filter:var(--st-glass-filter);border-radius:var(--st-radius-panel);box-shadow:var(--st-glass-shadow)}

/* Bildrahmen mit sitetap-Ecke */
.st-frame{border-radius:var(--st-ecke-bild);overflow:hidden}
.st-frame>img{display:block;width:100%;height:100%;object-fit:cover}

/* Dark-Sektion (max. eine pro Seite) */
.st-dark{position:relative;overflow:hidden;background:var(--st-dark-bg);color:var(--st-nebeltext);border-radius:var(--st-radius-sektion)}
.st-dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 30%,#000,transparent)}
.st-dark>*{position:relative}
.st-dark h1,.st-dark h2,.st-dark h3{color:#fff}
.st-dark .st-card{background:var(--st-nachtkarte);box-shadow:inset 0 0 0 1px var(--st-nachtlinie)}
.st-dark .st-card--active{background:var(--st-indigo);color:#fff;box-shadow:var(--st-glow)}
.st-dark .st-label{color:var(--st-indigo-hell)}

hr,.st-divider{border:0;border-top:1px solid var(--st-linie)}

/* ── Seitenaufbau ─────────────────────────────── */
/* Sektion: Pill (Eyebrow) + H2 links, kurze Einleitung rechts, unten bündig */
.st-section{padding:var(--st-sektion) 0}
.st-section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--st-space-5) var(--st-space-7);margin-bottom:var(--st-space-7)}
.st-section-head h2{margin:var(--st-space-4) 0 0;max-width:17ch}
.st-section-head p{margin:0;max-width:40ch;font-size:var(--st-lead);line-height:1.6}
.st-section-head--center{flex-direction:column;align-items:center;text-align:center}
.st-section-head--center h2{max-width:20ch}
.st-dark .st-section-head p{color:var(--st-nebeltext)}
@media (max-width:860px){.st-section-head{margin-bottom:var(--st-space-6)}.st-section-head p{font-size:17px}}
/* Hervorhebung in Headlines: ein Wort in Indigo, nicht kursiv */
h1 em,h2 em{font-style:normal;color:var(--st-indigo)}

/* ── Inhalte ──────────────────────────────────── */
/* Häkchen-Liste: Indigo-Häkchen mit Mini-sitetap-Ecke */
.st-checks{list-style:none;margin:var(--st-space-5) 0 0;padding:0}
.st-checks li{position:relative;margin:10px 0;padding-left:30px;line-height:1.55}
.st-checks li::before{content:"";position:absolute;left:0;top:.2em;width:19px;height:19px;border-radius:var(--st-ecke-check);background:var(--st-indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}

/* Nummer: Schritte im Ablauf. Auf Dunkel transparent, in der aktiven Karte weiß */
.st-num{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--st-ecke-pill);font:600 17px/1 var(--st-font-head);color:var(--st-indigo);background:var(--st-lavendel)}
.st-dark .st-num{color:var(--st-indigo-hell);background:rgba(123,140,245,.14);box-shadow:inset 0 0 0 1px rgba(123,140,245,.3)}
.st-dark .st-card--active .st-num{background:#fff;color:var(--st-indigo);box-shadow:none}
/* Kachel-Nummer oben links: „01“ auf Dunkel, „[ 01 ]“ auf hellen Karten */
.st-index{font:600 12px/1 var(--st-font-head);letter-spacing:.1em;color:var(--st-grau)}
.st-tile-dark .st-index,.st-dark .st-index{color:var(--st-indigo-hell)}

/* Kennzahl mit Beschriftung */
.st-stat strong{display:block;white-space:nowrap;font:600 var(--st-kennzahl)/1 var(--st-font-head);letter-spacing:-.03em;color:var(--st-indigo)}
.st-stat span{display:block;margin-top:8px;font-size:13px;line-height:1.4;color:var(--st-grau)}
.st-stat--m strong{font-size:clamp(30px,2.4vw + 8px,40px)}
.st-dark .st-stat strong{color:#fff}
.st-dark .st-stat span{color:var(--st-nebeltext);font-size:var(--st-body);line-height:1.6}
.st-delta{font-size:13px;font-weight:500;color:var(--st-wachstum)}

/* Icon-Kachel (auf Karten weiß) und runde Logo-Kachel für Fremdmarken */
.st-icon-tile{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--st-radius-klein);background:var(--st-weiss);color:var(--st-indigo)}
.st-icon-tile svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-logo-tile{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:var(--st-lift)}
.st-logo-tile img,.st-logo-tile svg{width:26px;height:26px;display:block}

/* Status-Punkt: Grün = erreichbar/live, Indigo = neu */
.st-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--st-indigo);box-shadow:0 0 0 3px rgba(69,91,229,.18)}
.st-dot--live{background:var(--st-wachstum);box-shadow:none}

/* FAQ: details/summary mit Plus in Lavendel, das sich zum × dreht */
.st-faq details{border-bottom:1px solid var(--st-linie)}
.st-faq details:first-child{border-top:1px solid var(--st-linie)}
.st-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--st-space-4);padding:22px 0;list-style:none;cursor:pointer;font:600 19px/1.35 var(--st-font-head);letter-spacing:-.01em;color:var(--st-tinte)}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:var(--st-ecke-pill);background:linear-gradient(var(--st-indigo),var(--st-indigo)) center/12px 2px no-repeat,linear-gradient(var(--st-indigo),var(--st-indigo)) center/2px 12px no-repeat,var(--st-lavendel);transition:transform var(--st-dauer)}
.st-faq details[open] summary::after{transform:rotate(45deg)}
.st-faq summary:hover{color:var(--st-indigo)}
.st-faq summary:focus-visible{outline:2px solid var(--st-indigo);outline-offset:4px;border-radius:4px}
.st-faq details p{margin:0;padding:0 48px 24px 0;max-width:62ch}
@media (max-width:560px){.st-faq summary{font-size:17px}.st-faq details p{padding-right:0}}

/* CTA mit Hinweis-Tags: beim Hover gleiten oben und unten Tags hinter dem Button hervor */
.st-cta-offer{position:relative;display:inline-flex;isolation:isolate}
.st-cta-offer>.st-btn{position:relative;z-index:2;transition:background var(--st-dauer-kurz),transform .45s var(--st-ease-spring)}
.st-cta-offer__tag{position:absolute;z-index:1;white-space:nowrap;pointer-events:none;font:600 12px/1 var(--st-font-head);letter-spacing:.01em;color:var(--st-indigo);background:var(--st-lavendel);border-radius:var(--st-ecke-pill);box-shadow:var(--st-float);opacity:0;transition:transform .5s var(--st-ease-spring),opacity .2s}
.st-cta-offer__tag--top{top:0;left:12px;padding:7px 12px 16px}
.st-cta-offer__tag--bottom{bottom:0;right:12px;padding:16px 12px 7px}
.st-cta-offer:hover>.st-btn,.st-cta-offer:focus-within>.st-btn{transform:scale(1.04)}
.st-cta-offer:hover .st-cta-offer__tag,.st-cta-offer:focus-within .st-cta-offer__tag{opacity:1}
.st-cta-offer:hover .st-cta-offer__tag--top,.st-cta-offer:focus-within .st-cta-offer__tag--top{transform:translateY(-22px) rotate(-4deg)}
.st-cta-offer:hover .st-cta-offer__tag--bottom,.st-cta-offer:focus-within .st-cta-offer__tag--bottom{transform:translateY(22px) rotate(3deg)}

/* Monogramm: Bildmarke groß, angeschnitten, 5 % Deckkraft (Abschluss-CTA) */
.st-mono{position:absolute;pointer-events:none;opacity:.05}

/* Nur für Screenreader */
.st-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Platzhalter-Zahlen markieren, damit sie vor dem Livegang ersetzt werden: <strong data-platzhalter>…</strong>.
   Sichtbar machen mit <html data-platzhalter-zeigen>. */
[data-platzhalter-zeigen] [data-platzhalter]{outline:2px dashed var(--st-indigo);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .st-float{animation:none}
  .st-cta-offer>.st-btn,.st-cta-offer__tag{transition:opacity .2s}
}