:host { display: block; }

    /* ── Fortschrittsleiste ─────────────────────────────────────────── */
    .fortschritt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 2.5rem;
      position: relative;
    }
    .fortschritt::before {
      content: '';
      position: absolute;
      top: 18px;
      left: 24px;
      right: 24px;
      height: 2px;
      background: var(--farbe-rahmen);
      z-index: 0;
    }
    .schritt-punkt {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .4rem;
      z-index: 1;
      cursor: pointer;
      background: none;
      border: none;
      font-family: var(--schrift-text);
    }
    .schritt-punkt:disabled { cursor: not-allowed; opacity: .5; }
    .punkt {
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .8rem; font-weight: 600;
      background: var(--farbe-flaeche);
      border: 2px solid var(--farbe-rahmen);
      color: var(--farbe-text-ged);
      transition: var(--uebergang);
    }
    .schritt-punkt.abgeschlossen .punkt {
      background: var(--farbe-erfolg);
      border-color: var(--farbe-erfolg);
      color: #fff;
    }
    .schritt-punkt.aktiv .punkt {
      border-color: var(--farbe-akzent);
      background: var(--farbe-akzent);
      color: #002440;
      box-shadow: 0 0 0 4px rgba(255,237,0,.25);
    }
    .schritt-bezeichnung {
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--farbe-text-ged);
      font-weight: 500;
      max-width: 70px;
      text-align: center;
      line-height: 1.2;
    }
    .schritt-punkt.aktiv .schritt-bezeichnung { color: var(--farbe-text); font-weight: 600; }

    /* ── Karte ─────────────────────────────────────────────────────── */
    .karte {
      background: var(--farbe-flaeche);
      border-radius: var(--radius);
      box-shadow: var(--schatten-md);
      padding: 2rem;
      animation: hochFaden .35s ease-out;
    }
    @keyframes hochFaden {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .karten-titel {
      font-family: var(--schrift-anzeige);
      font-size: 1.35rem;
      margin-bottom: 1.5rem;
      color: var(--farbe-primaer);
    }

    /* ── Navigations-Buttons ───────────────────────────────────────── */
    .nav-zeile {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      margin-top: 2rem;
    }
    .btn {
      font-family: var(--schrift-text);
      font-size: .9rem;
      font-weight: 600;
      padding: .65rem 1.5rem;
      border-radius: var(--radius);
      border: none;
      cursor: pointer;
      transition: var(--uebergang);
    }
    .btn:disabled { opacity: .4; cursor: not-allowed; }
    .btn-primaer {
      background: var(--farbe-primaer);
      color: #fff;
    }
    .btn-primaer:hover:not(:disabled) { background: var(--farbe-primaer-h); }
    .btn-sekundaer {
      background: transparent;
      color: var(--farbe-primaer);
      border: 1.5px solid var(--farbe-rahmen);
    }
    .btn-sekundaer:hover:not(:disabled) { border-color: var(--farbe-primaer); }
    .btn-gefahr {
      background: var(--farbe-gefahr);
      color: #fff;
    }
    .btn-gefahr:hover:not(:disabled) { opacity:.85; }

    /* ── Schrittinhalt-Container ────────────────────────────────────── */
    .schritt-inhalt { min-height: 260px; }

    @media print {
      .fortschritt, .nav-zeile { display: none !important; }
      .karte { box-shadow: none; border: 1px solid #ddd; }
      .schritt-inhalt { min-height: 0; }
    }