/* =========================================================================
   360web — Einordnung
   Eigenständige Komponente für den Seitenkopf der IT-Support-Seite.
   Alle Farben und Maße liegen als Variablen auf .support selbst, damit
   nichts mit dem übrigen Stylesheet kollidiert.

   Hinweis: .support ist ein verbreiteter Klassenname. Falls er auf Ihrer
   Seite schon vergeben ist, siehe README, Abschnitt „Klassennamen ändern".
   ========================================================================= */

.support{
  --sp-brand:#1a4bf0;--sp-brand-tint:#eff4fe;--sp-dark:#06233f;--sp-text:#072034;--sp-text-2:#2c3e51;--sp-muted:#55677a;--sp-muted-2:#8593a3;--sp-on-dark:#c2d2e2;--sp-hell:#f4f8fd;--sp-line:rgba(6,35,63,.13);--sp-line-soft:rgba(6,35,63,.06);--sp-leiste-bg:#fbfcfe;--sp-radius:10px;--sp-radius-sm:6px;--sp-radius-xs:4px;--sp-shadow:0 40px 80px -50px rgba(7,32,52,.7);--sp-display:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;--sp-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  width:min(100%,540px);background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);overflow:hidden;box-shadow:var(--sp-shadow);font-family:var(--sp-body);color:var(--sp-text);font-size:16px;line-height:1.55;text-align:left;-webkit-font-smoothing:antialiased
}
.support *{box-sizing:border-box}.sp-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--sp-line)}.sp-kopf b{font-family:var(--sp-display);font-weight:700;font-size:15px;letter-spacing:-.022em}.sp-zaehler{font-size:12.5px;color:var(--sp-muted-2);font-variant-numeric:tabular-nums}.sp-zaehler i{font-style:normal;font-weight:700;color:var(--sp-brand)}.sp-leib{padding:18px;display:grid;gap:0}.sp-frage{background:var(--sp-hell);border:1px solid var(--sp-line-soft);border-radius:var(--sp-radius-sm);padding:14px 16px;display:grid;gap:6px}.sp-wer{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--sp-muted-2)}.sp-frage b{font-family:var(--sp-display);font-weight:700;font-size:1.05rem;line-height:1.28;letter-spacing:-.026em}.sp-pfeil{display:grid;place-items:center;padding:9px 0;color:var(--sp-brand)}.sp-einordnung{display:grid;gap:13px}.sp-zeile{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:baseline}.sp-label{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--sp-muted-2)}.sp-einordnung b{font-size:14.5px;font-weight:600;letter-spacing:-.015em}.sp-chips{display:flex;flex-wrap:wrap;gap:6px}.sp-chips i{font-style:normal;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--sp-line-soft);border-radius:var(--sp-radius-xs);padding:5px 9px;font-size:12px;font-weight:500;color:var(--sp-text-2);animation:spChip .45s cubic-bezier(.16,1,.3,1) both}.sp-chips i::before{content:"";width:12px;height:12px;flex:none;border-radius:3px;background:var(--sp-brand-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5L3.3 5.8 8 1' stroke='%231a4bf0' stroke-width='1.6'/%3E%3C/svg%3E") center/9px 7px no-repeat}@keyframes spChip{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.sp-fuss{background:var(--sp-dark);color:#fff;padding:15px 18px;display:grid;gap:6px;min-height:86px;align-content:center}.sp-marke{justify-self:start;display:inline-flex;align-items:center;gap:7px;background:var(--sp-brand);color:#fff;border-radius:var(--sp-radius-xs);padding:5px 10px;font-size:12.5px;font-weight:700;letter-spacing:-.01em}.sp-marke::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9}.support.projekt .sp-marke{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}.support.projekt .sp-marke::before{background:#7fb0ff;opacity:1}.sp-fuss>span:last-child{font-size:13.5px;line-height:1.5;color:var(--sp-on-dark)}.sp-fuss>span,.sp-frage b,.sp-einordnung{transition:opacity .2s ease,transform .2s ease}.support.wechsel .sp-fuss>span,.support.wechsel .sp-frage b,.support.wechsel .sp-einordnung{opacity:0;transform:translateY(3px)}.sp-leiste{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-top:1px solid var(--sp-line);background:var(--sp-leiste-bg)}.sp-punkte{display:flex;gap:6px}.sp-punkt{width:18px;height:6px;border:0;border-radius:3px;background:#d5dde6;padding:0;cursor:pointer;transition:background .3s ease,width .3s ease}.sp-punkt:hover{background:#a9b6c4}.sp-punkt:focus-visible{outline:2px solid var(--sp-brand);outline-offset:3px}.sp-punkt.an{background:var(--sp-brand);width:26px}.sp-hinweis{font-size:12px;color:var(--sp-muted-2)}
@media(max-width:520px){.sp-kopf{padding:13px 16px}.sp-leib{padding:16px}.sp-zeile{grid-template-columns:1fr;gap:6px}.sp-fuss{padding:15px 16px;min-height:0}.sp-leiste{padding:11px 16px}.sp-hinweis{display:none}}@media(prefers-reduced-motion:reduce){.sp-chips i{animation:none}.sp-fuss>span,.sp-frage b,.sp-einordnung,.sp-punkt{transition:none}}