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

.ausbau{
  --au-brand:     #1a4bf0;
  --au-brand-2:   #5b7cf5;
  --au-brand-3:   #93a9f9;
  --au-dark:      #06233f;
  --au-text:      #072034;
  --au-muted:     #55677a;
  --au-muted-2:   #8593a3;
  --au-on-dark:   #c2d2e2;
  --au-on-dark-2: #8fa6bc;
  --au-leer:      #e3e9f0;
  --au-track:     #e9eef4;
  --au-line:      rgba(6,35,63,.13);
  --au-line-soft: rgba(6,35,63,.06);
  --au-radius:    10px;
  --au-radius-sm:  6px;
  --au-radius-xs:  4px;
  --au-shadow:    0 40px 80px -50px rgba(7,32,52,.7);
  --au-display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --au-body:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  width:min(100%,540px);
  background:#fff;
  border:1px solid var(--au-line);
  border-radius:var(--au-radius);
  overflow:hidden;
  box-shadow:var(--au-shadow);
  font-family:var(--au-body);
  color:var(--au-text);
  font-size:16px;
  line-height:1.55;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
.ausbau *{box-sizing:border-box}
.au-kopf{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--au-line)}
.au-kopf > b{font-family:var(--au-display);font-weight:700;font-size:15px;letter-spacing:-.022em}
.au-reiter-leiste{display:flex;gap:4px}
.au-reiter{border:1px solid var(--au-line-soft);border-radius:var(--au-radius-xs);background:#fff;padding:5px 10px;font:inherit;font-size:12.5px;font-weight:600;color:var(--au-muted-2);white-space:nowrap;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease}
.au-reiter:hover{border-color:var(--au-dark);color:var(--au-text)}
.au-reiter:focus-visible{outline:2px solid var(--au-brand);outline-offset:2px}
.au-reiter.an{background:var(--au-brand);border-color:var(--au-brand);color:#fff}
.au-buehne{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;padding:22px 18px 18px}
.au-saeulen{display:flex;align-items:flex-end;gap:10px}
.au-saeule{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.au-saeule:focus-visible{outline:2px solid var(--au-brand);outline-offset:4px;border-radius:var(--au-radius-xs)}
.au-stapel{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;width:38px;transition:transform .45s ease}
.au-seg{display:block;border-radius:3px;background:var(--au-leer);transition:background .45s ease}
.au-seg1{height:58px}.au-seg2{height:42px}.au-seg3{height:34px}
.au-saeule.an .au-seg1{background:var(--au-brand)}
.au-saeule.an .au-seg2{background:var(--au-brand-2)}
.au-saeule.an .au-seg3{background:var(--au-brand-3)}
.au-saeule.an .au-stapel{transform:translateY(-2px)}
.au-name{font-family:var(--au-display);font-weight:700;font-size:14px;color:var(--au-muted-2);transition:color .3s ease}
.au-saeule.an .au-name{color:var(--au-text)}
.au-legende{display:grid;align-content:center;gap:9px}
.au-leg{display:grid;grid-template-columns:9px 1fr;gap:4px 9px;align-items:center;opacity:.35;transition:opacity .4s ease}
.au-leg.an{opacity:1}
.au-leg i{width:9px;height:9px;border-radius:2px;background:#c9d3de}
.au-leg[data-b="1"].an i{background:var(--au-brand)}
.au-leg[data-b="2"].an i{background:var(--au-brand-2)}
.au-leg[data-b="3"].an i{background:var(--au-brand-3)}
.au-leg b{font-size:13px;font-weight:600;letter-spacing:-.012em}
.au-leg small{grid-column:2;font-size:11.5px;color:var(--au-muted);line-height:1.35}
.au-messwerte{display:grid;gap:12px;padding:2px 18px 18px}
.au-mess-kopf{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--au-muted);margin-bottom:6px}
.au-mess-kopf b{color:var(--au-text);font-weight:700;font-variant-numeric:tabular-nums}
.au-track{display:block;height:6px;border-radius:3px;background:var(--au-track);overflow:hidden}
.au-track i{display:block;height:100%;border-radius:3px;background:var(--au-brand);transition:width .65s cubic-bezier(.2,.8,.2,1)}
.au-fuss{background:var(--au-dark);color:#fff;padding:16px 18px;display:grid;gap:5px;min-height:118px;align-content:center}
.au-fuss > b{font-family:var(--au-display);font-weight:700;font-size:1.08rem;letter-spacing:-.026em}
.au-fuss > span{font-size:13.5px;line-height:1.5;color:var(--au-on-dark)}
.au-fuer{font-size:12.5px!important;color:var(--au-on-dark-2)!important;padding-top:3px;margin-top:4px;border-top:1px solid rgba(255,255,255,.14)}
.au-fuss > b,.au-fuss > span{transition:opacity .19s ease,transform .19s ease}
.ausbau.wechsel .au-fuss > b,.ausbau.wechsel .au-fuss > span{opacity:0;transform:translateY(3px)}
@media(max-width:520px){.au-kopf{flex-wrap:wrap;gap:10px;padding:13px 16px}.au-reiter-leiste{width:100%}.au-reiter{flex:1;text-align:center;padding:7px 6px}.au-buehne{grid-template-columns:1fr;gap:16px;padding:18px 16px 14px}.au-saeulen{justify-content:center}.au-messwerte{padding:0 16px 16px}.au-fuss{min-height:0;padding:16px}}
@media(prefers-reduced-motion:reduce){.au-seg,.au-stapel,.au-track i,.au-leg,.au-fuss > b,.au-fuss > span{transition:none}}
.package-hero-visual{display:grid;place-items:center;min-width:0}