/* Knöpfe – SLDS: .slds-button_neutral / _brand / _destructive; 3D-Glanz eigene Ergänzung */
.knopf {
  display: inline-flex; align-items: center; gap: var(--slds-g-spacing-2);
  padding: 0 var(--slds-g-spacing-4);
  border: 1px solid var(--slds-g-color-border-2);
  border-radius: var(--slds-g-radius-border-pill);
  background: var(--glanz-licht), linear-gradient(to bottom, var(--slds-g-color-surface-1), var(--glanz-elfenbein));
  color: var(--slds-g-color-accent-2); text-shadow: var(--glanz-praegung-hell);
  box-shadow: var(--glanz-kante), var(--glanz-tiefe);
  font: 600 var(--slds-g-font-scale-base)/1.875rem var(--slds-g-font-family-base);
  cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.knopf:hover { background: var(--glanz-licht), linear-gradient(to bottom, var(--slds-g-color-surface-1), var(--slds-g-color-brand-base-90)); transform: translateY(-1px); box-shadow: var(--glanz-kante), var(--glanz-tiefe-hover); }
.knopf:active { background: linear-gradient(to bottom, var(--glanz-elfenbein), var(--slds-g-color-surface-1)); transform: translateY(1px); box-shadow: var(--glanz-gedrueckt); }
.knopf:focus-visible { outline: none; box-shadow: var(--glanz-kante), var(--glanz-tiefe), 0 0 0 2px var(--slds-g-color-brand-base-15); }
.knopf_marke { background: var(--glanz-licht), linear-gradient(to bottom, var(--slds-g-color-accent-container-1), var(--slds-g-color-accent-2)); border-color: var(--slds-g-color-accent-2); color: var(--slds-g-color-on-accent-1); text-shadow: var(--glanz-praegung-dunkel); }
.knopf_marke:hover { background: var(--glanz-licht), linear-gradient(to bottom, var(--slds-g-color-accent-2), var(--slds-g-color-accent-3)); border-color: var(--slds-g-color-accent-3); }
.knopf_marke:active { background: linear-gradient(to bottom, var(--slds-g-color-accent-3), var(--slds-g-color-accent-2)); }
.knopf_gefahr { background: var(--glanz-licht), linear-gradient(to bottom, var(--slds-g-color-error-base-50), var(--slds-g-color-error-1)); border-color: var(--slds-g-color-error-1); color: var(--slds-g-color-on-accent-1); text-shadow: var(--glanz-praegung-dunkel); }
.knopf_gefahr:hover { background: var(--glanz-licht), linear-gradient(to bottom, var(--slds-g-color-error-1), color-mix(in oklab, var(--slds-g-color-error-1), black 20%)); border-color: color-mix(in oklab, var(--slds-g-color-error-1), black 20%); }
.knopf_gefahr:active { background: linear-gradient(to bottom, color-mix(in oklab, var(--slds-g-color-error-1), black 20%), var(--slds-g-color-error-1)); }
.knopf_marke:focus-visible, .knopf_gefahr:focus-visible { box-shadow: inset 0 0 0 2px var(--slds-g-color-brand-base-15), inset 0 0 0 4px var(--slds-g-color-surface-1), var(--glanz-tiefe); }
.knopf:disabled { background: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-disabled-1); color: var(--slds-g-color-disabled-1); text-shadow: none; transform: none; box-shadow: none; cursor: not-allowed; }
.knopf_marke:disabled, .knopf_gefahr:disabled { background: var(--slds-g-color-disabled-container-2); border-color: var(--slds-g-color-disabled-container-2); }
.knopf + .knopf { margin-left: var(--slds-g-spacing-1); }
a.knopf:hover { color: var(--slds-g-color-accent-2); text-decoration: none; }
a.knopf_marke:hover, a.knopf_gefahr:hover { color: var(--slds-g-color-on-accent-1); }

/* Badge – SLDS: .slds-badge (in Cosmos eckig, normale Schriftstärke) */
.badge {
  display: inline-flex; align-items: center; padding: .25rem .5rem;
  border-radius: var(--slds-g-radius-border-1);
  background: var(--slds-g-color-neutral-base-90); color: var(--slds-g-color-on-surface-1);
  font-size: var(--slds-g-font-scale-neg-1); line-height: normal;
}
.badge_erfolg { background: var(--slds-g-color-success-container-1); color: var(--slds-g-color-success-1); }
.badge_warnung { background: var(--slds-g-color-warning-container-1); color: var(--slds-g-color-warning-1); }
.badge_fehler { background: var(--slds-g-color-error-container-1); color: var(--slds-g-color-error-1); }
.badge_info { background: var(--slds-g-color-info-container-1); color: var(--slds-g-color-info-1); }

/* Pille (Filter, Auswahl) – SLDS: .slds-pill */
.pille {
  display: inline-flex; align-items: center; height: 1.5rem; padding: 0 .5rem;
  border: 1px solid var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-pill);
  background: var(--slds-g-color-surface-1); color: var(--slds-g-color-on-surface-2);
  font-family: inherit; font-size: var(--slds-g-font-scale-neg-1); line-height: 1.25; cursor: pointer;
}
.pille:hover, .pille[aria-pressed="true"] { background: var(--slds-g-color-brand-base-90); }

/* Karte – SLDS: .slds-card (Cosmos: 20 px rund, ohne Rahmen und Schatten) */
.karte { background: var(--slds-g-color-surface-container-1); border-radius: var(--slds-g-radius-border-4); color: var(--slds-g-color-on-surface-1); }
.karte__kopf { display: flex; align-items: center; gap: var(--slds-g-spacing-3); padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4) 0; margin-bottom: var(--slds-g-spacing-3); }
.karte__titel { margin: 0; flex: 1; font-size: var(--slds-g-font-scale-3); font-weight: 400; line-height: 1.25; color: var(--slds-g-color-on-surface-3); }
.karte__inhalt { padding: 0 var(--slds-g-spacing-4); margin: var(--slds-g-spacing-3) 0; }
.karte__fuss { padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4); border-top: 1px solid var(--slds-g-color-border-1); text-align: center; }
.karte + .karte { margin-top: var(--slds-g-spacing-4); }
.spalten > .karte, .raster > .karte { margin-top: 0; }

/* Karte hervorgehoben (aktueller Schritt) – eigene Ergänzung, kein SLDS-Vorbild */
.karte_aktiv { box-shadow: 0 0 0 2px var(--slds-g-color-accent-container-1); }

/* Abschnitt in einer Karte (Zwischenüberschrift) – eigene Ergänzung */
.abschnitt__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-2); margin-bottom: var(--slds-g-spacing-2); padding-bottom: var(--slds-g-spacing-1); border-bottom: 1px solid var(--slds-g-color-border-1); }
.abschnitt__titel { flex: 1 0 auto; margin: 0; font-size: var(--slds-g-font-scale-1); font-weight: 600; line-height: 1.5; color: var(--slds-g-color-on-surface-3); }
.abschnitt + .abschnitt { margin-top: var(--slds-g-spacing-4); }

/* Reiter – SLDS: .slds-tabs_default */
.reiter { display: flex; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--slds-g-color-border-1); }
.reiter a { position: relative; display: block; height: 2.5rem; line-height: 2.5rem; padding: 0 var(--slds-g-spacing-3); color: var(--slds-g-color-on-surface-1); font-size: var(--slds-g-font-scale-1); font-weight: 600; text-decoration: none; }
.reiter a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 0; }
.reiter a:hover { color: var(--slds-g-color-brand-base-15); }
.reiter a:hover::after { height: 3px; background: var(--slds-g-color-brand-base-15); }
.reiter a:focus-visible { box-shadow: none; outline: 2px solid var(--slds-g-color-brand-base-15); outline-offset: -.375rem; border-radius: var(--slds-g-radius-border-1); }
.reiter a[aria-selected="true"] { color: var(--slds-g-color-accent-3); }
.reiter a[aria-selected="true"]::after { height: 3px; background: var(--slds-g-color-accent-2); }
.reiter a { white-space: nowrap; }
@media (max-width: 640px) { .reiter { overflow-x: auto; overflow-y: hidden; } }

/* Pfad (Phasen) – SLDS: .slds-path; Chevron-Geometrie aus SLDS, Farben Cosmos, 3D-Glanz eigene Ergänzung */
.pfad { display: flex; margin: 0; padding: 0; list-style: none; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .22)); }
.pfad li {
  position: relative; isolation: isolate; flex: 1; min-width: 5rem; margin: 0 .4375rem 0 .375rem;
  height: 2rem; line-height: 2rem; text-align: center; font-weight: 600;
  color: var(--slds-g-color-on-surface-2); text-shadow: var(--glanz-praegung-hell);
  --hg: var(--slds-g-color-neutral-base-90); --rand: transparent;
  --hell: color-mix(in oklab, var(--hg), white 45%); --dunkel: color-mix(in oklab, var(--hg), black 10%);
  --fuellbild: none; --fortschritt: 0%;
}
.pfad li::before, .pfad li::after { content: ""; position: absolute; left: -.25rem; right: -.3125rem; z-index: -1; border: 1px solid var(--rand); }
.pfad li::before { top: 0; height: calc(1rem + 1px); transform: skew(28deg); border-bottom: 0; background: linear-gradient(to bottom, rgb(255 255 255 / .3), rgb(255 255 255 / .05)), var(--fuellbild), linear-gradient(to bottom, var(--hell), var(--hg)); box-shadow: var(--glanz-kante); }
.pfad li::after { bottom: 0; height: 1rem; transform: skew(-30deg); border-top: 0; background: var(--fuellbild), linear-gradient(to bottom, var(--hg), var(--dunkel)); }
.pfad li:first-child, .pfad li:last-child { background: linear-gradient(to bottom, rgb(255 255 255 / .3), rgb(255 255 255 / .05) 50%, transparent 50%), var(--fuellbild), linear-gradient(to bottom, var(--hell), var(--hg) 50%, var(--dunkel)); }
.pfad li:first-child { margin-left: 0; padding-left: .625rem; border-radius: 2rem 0 0 2rem; box-shadow: inset 1px 0 0 var(--rand), inset 0 1px 0 var(--rand), inset 0 -1px 0 var(--rand), var(--glanz-kante); }
.pfad li:first-child::before, .pfad li:first-child::after { left: 1.125rem; }
.pfad li:last-child { margin-right: 0; padding-right: .625rem; border-radius: 0 2rem 2rem 0; box-shadow: inset -1px 0 0 var(--rand), inset 0 1px 0 var(--rand), inset 0 -1px 0 var(--rand), var(--glanz-kante); }
.pfad li:last-child::before, .pfad li:last-child::after { right: 1.125rem; }
.pfad .erledigt { --hg: var(--slds-g-color-success-container-1); color: var(--slds-g-color-success-1); }
.pfad .aktuell { --hg: var(--slds-g-color-surface-1); --dunkel: var(--glanz-elfenbein); --rand: var(--slds-g-color-accent-3); color: var(--slds-g-color-brand-base-20); }
.pfad .gewaehlt { --hg: var(--slds-g-color-surface-inverse-1); --hell: color-mix(in oklab, var(--hg), white 25%); color: var(--slds-g-color-on-accent-1); text-shadow: var(--glanz-praegung-dunkel); }
/* 7.18 Aktuelle Phase mit Fortschritt: die Farbe von „erledigt“ läuft mit weichem Verlauf bis zum Anteil der bestätigten Schritte (data-fortschritt in Zehnerschritten) */
.pfad .aktuell[data-fortschritt] { --weich: 15%; --fuellbild: linear-gradient(to right, var(--slds-g-color-success-container-1) calc(var(--fortschritt) - var(--weich)), transparent calc(var(--fortschritt) + var(--weich))); }
.pfad .aktuell[data-fortschritt="0"] { --fuellbild: none; }
.pfad [data-fortschritt="10"] { --fortschritt: 10%; } .pfad [data-fortschritt="20"] { --fortschritt: 20%; } .pfad [data-fortschritt="30"] { --fortschritt: 30%; }
.pfad [data-fortschritt="40"] { --fortschritt: 40%; } .pfad [data-fortschritt="50"] { --fortschritt: 50%; } .pfad [data-fortschritt="60"] { --fortschritt: 60%; }
.pfad [data-fortschritt="70"] { --fortschritt: 70%; } .pfad [data-fortschritt="80"] { --fortschritt: 80%; } .pfad [data-fortschritt="90"] { --fortschritt: 90%; }
.pfad [data-fortschritt="100"] { --fortschritt: 115%; }
.pfad li[role="button"] { cursor: pointer; }
.pfad li:focus-visible { outline: 2px solid var(--slds-g-color-brand-base-15); outline-offset: 2px; }
.pfad li:focus-visible:not(:first-child, :last-child) { box-shadow: none; }
@media (max-width: 640px) { .pfad { overflow-x: auto; padding-bottom: 2px; } .pfad li { flex: none; padding: 0 var(--slds-g-spacing-4); } }

/* Formularfeld – SLDS: .slds-form-element, .slds-input */
.feld { margin-bottom: var(--slds-g-spacing-3); }
.feld > label { display: block; margin-bottom: var(--slds-g-spacing-1); font-weight: 600; color: var(--slds-g-color-on-surface-2); }
.pflicht { color: var(--slds-g-color-error-1); margin: 0 .125rem; text-decoration: none; border: 0; }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: calc(1.875rem + 2px); padding: 0 var(--slds-g-spacing-2);
  border: 1px solid var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-2);
  background: var(--slds-g-color-surface-1); color: var(--slds-g-color-on-surface-2); font: inherit;
}
.feld textarea { padding: var(--slds-g-spacing-2); resize: vertical; }
.feld :is(input, select, textarea):focus-visible { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--slds-g-color-brand-base-15); }
.feld :is(input, select, textarea):disabled { background: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-disabled-1); color: var(--slds-g-color-disabled-1); cursor: not-allowed; }
.feld_fehler :is(input, select, textarea) { background: var(--slds-g-color-error-container-1); border-color: var(--slds-g-color-error-1); color: var(--slds-g-color-error-1); }
.feld .hilfe { margin-top: .125rem; font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-1); }
.feld_fehler .hilfe { color: var(--slds-g-color-error-1); }
@media (pointer: coarse) { .feld :is(input, select, textarea) { font-size: 1rem; } }
.felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); column-gap: var(--slds-g-spacing-4); }
.feld_breit { grid-column: 1 / -1; }
.auswahlgruppe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-1) var(--slds-g-spacing-4); min-height: calc(1.875rem + 2px); }
.feld_zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-2); margin-bottom: 0; }
.feld_zeile > label { margin-bottom: 0; }
.feld_zeile :is(input, select) { flex: 1 1 8rem; width: auto; }

/* Suchfeld mit Vorschlagsliste – angelehnt an .slds-combobox / .slds-listbox */
.suchfeld { position: relative; }
.vorschlaege { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + var(--slds-g-spacing-1)); max-height: 16rem; overflow: auto; margin: 0; padding: var(--slds-g-spacing-1) 0; list-style: none; background: var(--slds-g-color-surface-1); border-radius: var(--slds-g-radius-border-3); box-shadow: var(--slds-g-shadow-2); }
.vorschlaege li { display: flex; align-items: center; gap: var(--slds-g-spacing-2); min-height: 2rem; padding: var(--slds-g-spacing-1) var(--slds-g-spacing-3); color: var(--slds-g-color-on-surface-2); cursor: pointer; }
.vorschlaege li:hover, .vorschlaege li[aria-selected="true"] { background: var(--slds-g-color-brand-base-95); }
.vorschlaege__zusatz { margin-left: auto; font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-1); }
.vorschlaege__neu { border-top: 1px solid var(--slds-g-color-border-1); color: var(--slds-g-color-accent-2); font-weight: 600; }
.vorschlaege__leer { color: var(--slds-g-color-on-surface-1); cursor: default; }
.vorschlaege li.vorschlaege__leer:hover { background: none; }

/* Checkbox – SLDS: .slds-checkbox (Cosmos: 4 px rund, gefüllt wenn an) */
.auswahl { display: inline-flex; align-items: center; gap: var(--slds-g-spacing-2); cursor: pointer; color: var(--slds-g-color-on-surface-2); }
.auswahl input { appearance: none; display: grid; place-content: center; width: 1rem; height: 1rem; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--slds-g-color-border-2); border-radius: var(--slds-g-radius-border-1); background: var(--slds-g-color-surface-1); cursor: pointer; }
.auswahl input:checked { background: var(--slds-g-color-accent-container-1); border-color: var(--slds-g-color-accent-container-1); }
.auswahl input:checked::after { content: ""; width: .5rem; height: .25rem; border: solid; border-color: var(--slds-g-color-on-accent-1); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.auswahl input:focus-visible { outline: none; box-shadow: var(--slds-g-shadow-outset-focus-1); }
.auswahl input:disabled { background: var(--slds-g-color-disabled-container-1); border-color: var(--slds-g-color-disabled-1); cursor: not-allowed; }

/* Tabelle – SLDS: .slds-table_bordered */
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--slds-g-color-border-1); border-radius: var(--slds-g-radius-border-2); overflow: hidden; background: var(--slds-g-color-surface-1); }
.tabelle th, .tabelle td { padding: var(--slds-g-spacing-2); text-align: left; }
.tabelle th { font-weight: 600; color: var(--slds-g-color-on-surface-1); background: var(--slds-g-color-surface-container-2); }
.tabelle td { border-top: 1px solid var(--slds-g-color-border-1); color: var(--slds-g-color-on-surface-2); }
.tabelle tbody tr:hover td { background: var(--slds-g-color-surface-container-2); }
.tabelle .zahl { text-align: right; }
.tabelle .aktion { text-align: right; white-space: nowrap; }
.tabelle tbody tr[aria-current] td { background: var(--slds-g-color-brand-base-95); }
@media (max-width: 640px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
  .tabelle thead { display: none; }
  .tabelle tr { padding: var(--slds-g-spacing-1) 0; }
  .tabelle tr + tr { border-top: 1px solid var(--slds-g-color-border-1); }
  .tabelle td { display: flex; align-items: baseline; gap: var(--slds-g-spacing-2); padding: var(--slds-g-spacing-1) var(--slds-g-spacing-2); border-top: 0; }
  .tabelle td[data-label]::before { content: attr(data-label); flex: 0 0 35%; text-align: left; font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-1); }
  .tabelle td:empty { display: none; }
  .tabelle .aktion { justify-content: flex-end; }
}

/* Dialog – SLDS: .slds-modal (natives <dialog>) */
.dialog { width: 50%; min-width: 20rem; max-width: 40rem; max-height: calc(100dvh - 2rem); padding: 0; border: 0; overflow: hidden; border-radius: var(--slds-g-radius-border-4); background: var(--slds-g-color-surface-1); }
.dialog::backdrop { background: color-mix(in oklab, var(--slds-g-color-on-surface-2), transparent 20%); backdrop-filter: blur(5px); }
.dialog__kopf { padding: var(--slds-g-spacing-4); text-align: center; }
.dialog__kopf h2 { margin: 0; font-size: var(--slds-g-font-scale-3); font-weight: 400; color: var(--slds-g-color-on-surface-3); }
.dialog__inhalt { padding: var(--slds-g-spacing-4); overflow: auto; min-height: 0; }
.dialog[open] { display: flex; flex-direction: column; }
.dialog__fuss .knopf_gefahr { float: left; }
.dialog_breit { width: 90%; max-width: 60rem; }
.dialog_breit .dialog__inhalt { background: var(--slds-g-color-surface-2); }
@media (max-width: 640px) { .dialog { width: 100%; min-width: 0; max-width: calc(100% - 1rem); } }
.dialog__fuss { padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4); text-align: right; box-shadow: var(--slds-g-shadow-4); }

/* Meldung – SLDS: .slds-notify_toast / .slds-scoped-notification */
.meldung { display: flex; gap: var(--slds-g-spacing-3); align-items: center; padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4); border-radius: var(--slds-g-radius-border-2); box-shadow: var(--slds-g-shadow-3); background: var(--slds-g-color-info-container-1); color: var(--slds-g-color-info-1); }
.meldung_erfolg { background: var(--slds-g-color-success-container-1); color: var(--slds-g-color-success-1); }
.meldung_warnung { background: var(--slds-g-color-warning-container-1); color: var(--slds-g-color-warning-1); }
.meldung_fehler { background: var(--slds-g-color-error-container-1); color: var(--slds-g-color-error-1); }
.einblendung { position: fixed; inset: auto auto var(--slds-g-spacing-4) 50%; transform: translateX(-50%); max-width: calc(100vw - 2rem); margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }

/* Fortschritt – SLDS: .slds-progress-bar_circular */
.fortschritt { height: .5rem; border-radius: var(--slds-g-radius-border-pill); background: var(--slds-g-color-neutral-base-90); overflow: hidden; }
.fortschritt > span { display: block; height: 100%; border-radius: var(--slds-g-radius-border-pill); background: var(--slds-g-color-accent-container-1); }
.fortschritt_fertig > span { background: var(--slds-g-color-success-1); }

/* Seitenkopf – SLDS: .slds-page-header (Cosmos: ohne Rahmen und Schatten) */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-4); padding: var(--slds-g-spacing-4); background: var(--slds-g-color-surface-container-2); }
.seitenkopf h1 { margin: 0; flex: 1; font-size: var(--slds-g-font-scale-5); font-weight: 400; line-height: 1.25; color: var(--slds-g-color-on-surface-3); overflow-wrap: anywhere; }
.seitenkopf__text { flex: 1 1 16rem; min-width: 0; }
.seitenkopf__zusatz { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-1) var(--slds-g-spacing-2); margin: var(--slds-g-spacing-1) 0 0; color: var(--slds-g-color-on-surface-1); }

/* Kopfleiste (Hauptnavigation) – angelehnt an .slds-context-bar, Werte angenommen */
.kopfleiste { display: flex; align-items: stretch; gap: var(--slds-g-spacing-2); height: 3rem; padding: 0 var(--slds-g-spacing-4); background: var(--slds-g-color-surface-1); border-bottom: 1px solid var(--slds-g-color-border-1); }
.kopfleiste__name { display: flex; align-items: center; margin-right: var(--slds-g-spacing-4); font-size: var(--slds-g-font-scale-2); font-weight: 600; color: var(--slds-g-color-on-surface-3); }
.kopfleiste a { position: relative; display: flex; align-items: center; padding: 0 var(--slds-g-spacing-3); color: var(--slds-g-color-on-surface-1); font-size: var(--slds-g-font-scale-1); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopfleiste a:hover { color: var(--slds-g-color-brand-base-15); background: var(--slds-g-color-brand-base-95); }
.kopfleiste a[aria-current="page"] { color: var(--slds-g-color-accent-3); }
.kopfleiste a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--slds-g-color-accent-2); }
.kopfleiste__rechts { margin-left: auto; display: flex; align-items: center; gap: var(--slds-g-spacing-4); color: var(--slds-g-color-on-surface-1); white-space: nowrap; }
@media (max-width: 640px) { .kopfleiste { overflow-x: auto; } .kopfleiste__name { display: none; } }

/* Seitenrahmen */
.seite { max-width: 1600px; margin: 0 auto; padding: var(--slds-g-spacing-3); }
.spalten { display: grid; grid-template-columns: 22rem minmax(0, 1fr); gap: var(--slds-g-spacing-3); align-items: start; }
@media (max-width: 640px) { .spalten { grid-template-columns: minmax(0, 1fr); } }
.seite_schmal { max-width: 30rem; }
.seite_mittel { max-width: 50rem; }
.fortschrittszeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-3); }
.fortschrittszeile > :first-child { flex: 1 1 12rem; min-width: 0; }
.fortschrittszeile .fortschritt { flex: 0 1 12.5rem; }

/* Angabenliste (Stammdaten lesen) – eigene Ergänzung */
.angaben { margin: 0; }
.angaben > div { padding: var(--slds-g-spacing-2) 0; border-top: 1px solid var(--slds-g-color-border-1); }
.angaben > div:first-child { border-top: 0; }
.angaben dt { font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-1); }
.angaben dd { margin: 0; color: var(--slds-g-color-on-surface-2); }
.angaben__bearbeitbar { cursor: pointer; }
.angaben__bearbeitbar:hover { background: var(--slds-g-color-brand-base-95); box-shadow: calc(-1 * var(--slds-g-spacing-2)) 0 0 var(--slds-g-color-brand-base-95), var(--slds-g-spacing-2) 0 0 var(--slds-g-color-brand-base-95); }
.angaben__bearbeitbar:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); }
.angaben__bearbeitbar dt { display: flex; justify-content: space-between; gap: var(--slds-g-spacing-2); }
.angaben__stift { flex: none; width: .875rem; height: .875rem; fill: currentColor; color: var(--slds-g-color-on-surface-1); }
.angaben__bearbeitbar:is(:hover, :focus-visible) .angaben__stift { color: var(--slds-g-color-accent-2); }
.angaben__fehlt dt { color: var(--slds-g-color-error-1); }

/* Klappbereich – angelehnt an .slds-section (aufklappbar) */
.klappe + .klappe { border-top: 1px solid var(--slds-g-color-border-1); }
.klappe > summary { display: flex; align-items: center; gap: var(--slds-g-spacing-2); min-height: 2.5rem; list-style: none; cursor: pointer; font-size: var(--slds-g-font-scale-1); font-weight: 600; color: var(--slds-g-color-on-surface-3); }
.klappe > summary::-webkit-details-marker { display: none; }
.klappe > summary::before { content: ""; flex: none; width: .4375rem; height: .4375rem; margin: 0 .25rem; border: solid var(--slds-g-color-on-surface-1); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.klappe[open] > summary::before { transform: rotate(45deg); }
.klappe__titel { flex: 1; min-width: 0; }
.klappe__inhalt { padding-bottom: var(--slds-g-spacing-3); }

/* Kennzahlen (Kacheln mit Filterwirkung) – eigene Ergänzung */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--slds-g-spacing-3); }
.kennzahl { display: block; width: 100%; padding: var(--slds-g-spacing-3) var(--slds-g-spacing-4); border: 0; border-radius: var(--slds-g-radius-border-4); background: var(--slds-g-color-surface-1); color: var(--slds-g-color-on-surface-1); font: inherit; text-align: left; cursor: pointer; }
.kennzahl__zahl { display: block; font-size: var(--slds-g-font-scale-4); line-height: 1.25; color: var(--slds-g-color-on-surface-3); }
.kennzahl__name { display: block; font-size: var(--slds-g-font-scale-neg-1); }
.kennzahl:hover { background: var(--slds-g-color-brand-base-95); }
.kennzahl[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--slds-g-color-accent-container-1); }
.kennzahl:focus-visible, .kennzahl[aria-pressed="true"]:focus-visible { box-shadow: var(--slds-g-shadow-outset-focus-1); }
.kennzahl_warnung .kennzahl__zahl { color: var(--slds-g-color-warning-1); }
.kennzahl_fehler .kennzahl__zahl { color: var(--slds-g-color-error-1); }
.kennzahl_erfolg .kennzahl__zahl { color: var(--slds-g-color-success-1); }

/* Hilfsklassen für die Anordnung – eigene Ergänzung */
.stapel > * + * { margin-top: var(--slds-g-spacing-3); }
.stapel > :first-child { margin-top: 0; }
.stapel > :last-child { margin-bottom: 0; }
.reihe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--slds-g-spacing-2); }
.reihe_rechts { justify-content: flex-end; }
.reihe__platz { flex: 1 1 auto; }
.reihe > .knopf + .knopf { margin-left: 0; }
.nebentext { font-size: var(--slds-g-font-scale-neg-1); color: var(--slds-g-color-on-surface-1); }
.mehrzeilig { white-space: pre-line; }
@media (min-width: 641px) { .nur-schmal { display: none !important; } }
@media (max-width: 640px) { .nicht-schmal { display: none !important; } }

/* Handy und Touch-Geräte: größere Tippziele (8.20, 9.10, 12.26) – eigene Ergänzung, zur Prüfung */
@media (max-width: 640px), (pointer: coarse) {
  .knopf { line-height: 2.625rem; }
  .pille { height: 2.75rem; padding: 0 var(--slds-g-spacing-3); font-size: var(--slds-g-font-scale-base); }
  .feld :is(input, select, textarea) { min-height: 2.75rem; }
  .vorschlaege li, .auswahl { min-height: 2.75rem; }
}