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

.umfang{
  --um-brand:#1a4bf0;--um-dark:#06233f;--um-text:#072034;--um-muted:#55677a;--um-muted-2:#8593a3;--um-on-dark:#c2d2e2;--um-line:rgba(6,35,63,.13);--um-line-soft:rgba(6,35,63,.06);--um-kreis:rgba(6,35,63,.28);--um-leiste-bg:#fbfcfe;
  --um-radius:10px;--um-radius-xs:4px;--um-shadow:0 40px 80px -50px rgba(7,32,52,.7);
  --um-display:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;--um-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  width:min(100%,540px);background:#fff;border:1px solid var(--um-line);border-radius:var(--um-radius);overflow:hidden;box-shadow:var(--um-shadow);font-family:var(--um-body);color:var(--um-text);font-size:16px;line-height:1.55;text-align:left;-webkit-font-smoothing:antialiased
}
.umfang *{box-sizing:border-box}
.um-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--um-line)}
.um-kopf b{font-family:var(--um-display);font-weight:700;font-size:1.05rem;letter-spacing:-.026em;transition:opacity .19s ease,transform .19s ease}
.um-kopf span{font-size:11.5px;color:var(--um-muted-2)}
.um-tafel{display:grid;grid-template-columns:1fr 1fr;min-height:196px}.um-spalte{padding:16px 18px}.um-spalte+.um-spalte{border-left:1px solid var(--um-line-soft)}
.um-titel{display:block;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--um-line-soft)}
.um-jetzt .um-titel{color:var(--um-brand)}.um-spaeter .um-titel{color:var(--um-muted-2)}
.um-spalte ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.um-spalte li{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font-size:13.5px;line-height:1.35;animation:umRein .45s cubic-bezier(.16,1,.3,1) both}.um-spalte li::before{content:"";width:16px;height:16px;margin-top:1px;border-radius:var(--um-radius-xs)}
@keyframes umRein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.um-jetzt li{color:var(--um-text);font-weight:500}.um-jetzt li::before{background:var(--um-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4L3.6 6.6 9 1' stroke='white' stroke-width='1.7'/%3E%3C/svg%3E") center/10px 8px no-repeat}
.um-spaeter li{color:var(--um-muted)}.um-spaeter li::before{width:14px;height:14px;margin-left:1px;border-radius:50%;border:1.5px dashed var(--um-kreis)}
.um-fuss{background:var(--um-dark);color:var(--um-on-dark);padding:15px 18px;font-size:13.5px;line-height:1.5;min-height:64px;display:grid;align-content:center}.um-fuss span{transition:opacity .19s ease,transform .19s ease}.umfang.wechsel .um-fuss span,.umfang.wechsel .um-kopf b{opacity:0;transform:translateY(3px)}
.um-leiste{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px;border-top:1px solid var(--um-line);background:var(--um-leiste-bg)}.um-punkte{display:flex;gap:6px}.um-punkt{width:20px;height:6px;border:0;border-radius:3px;background:#d5dde6;padding:0;cursor:pointer;transition:background .3s ease,width .3s ease}.um-punkt:hover{background:#a9b6c4}.um-punkt:focus-visible{outline:2px solid var(--um-brand);outline-offset:3px}.um-punkt.an{background:var(--um-brand);width:28px}.um-hinweis{font-size:12px;color:var(--um-muted-2)}
.software-hero-visual{display:grid;place-items:center;min-width:0}
@media(max-width:520px){.um-kopf{padding:13px 16px}.um-tafel{grid-template-columns:1fr;min-height:0}.um-spalte+.um-spalte{border-left:0;border-top:1px solid var(--um-line-soft)}.um-spalte{padding:14px 16px}.um-fuss{padding:15px 16px;min-height:0}.um-leiste{padding:11px 16px}.um-hinweis{display:none}}
@media(prefers-reduced-motion:reduce){.um-spalte li{animation:none}.um-kopf b,.um-fuss span,.um-punkt{transition:none}}