/* Gerüst der Admin-Oberfläche nach dem Entwurf (Vorbild Inspinia, Skin „Luxe“): Seitenleiste, blaues Band aus Kopfleiste
   und Titelbereich, Aufklappmenüs, Kacheln und Karten. Farben nur über die Variablen des Themes (kms-hell.css,
   kms-dunkel.css). Die Seitenleiste hat drei Zustände, layout.js setzt sie am <html>:
     data-kms-sidenav="breit"      240 px, Symbol und Text
     data-kms-sidenav="schmal"     72 px, nur Symbole
     data-kms-sidenav="offcanvas"  unter 768 px ausgeblendet; mit data-kms-sidenav-open über dem Inhalt */
:root {
    --kms-sidebar-width: 15rem;
    --kms-sidebar-narrow-width: 4.5rem;
    --kms-offcanvas-width: 16.5rem;
    --kms-topbar-height: 4rem;
    --kms-band-height: 12.25rem;
}

.kms-shell {
    display: flex;
    min-height: 100vh;
}

/* Seitenleiste */
.kms-sidebar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    width: var(--kms-sidebar-width);
    height: 100vh;
    box-sizing: border-box;
    flex: 0 0 var(--kms-sidebar-width);
    flex-direction: column;
    overflow: hidden auto;
    background: var(--kms-sidebar-background);
    box-shadow: var(--kms-shadow-card);
    color: var(--kms-sidebar-foreground);
    transition: width .15s, flex-basis .15s;
}

.kms-sidebar-top {
    display: flex;
    height: var(--kms-topbar-height);
    flex: none;
    align-items: center;
    justify-content: space-between;
}

.kms-brand {
    display: flex;
    height: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: .75rem;
    padding: 0 1.375rem;
    color: var(--kms-signet);
    text-decoration: none;
    white-space: nowrap;
}

.kms-brand-text {
    font-size: 1rem;
    font-weight: 700;
}

.kms-signet {
    flex: none;
}

.kms-sidebar-close {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    align-items: center;
    justify-content: center;
    margin-right: .5rem;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.kms-sidebar-close:hover {
    background: var(--kms-sidebar-hovered);
}

.kms-sidebar :focus-visible {
    outline: 3px solid var(--kms-focus-ring);
    outline-offset: -3px;
}

.kms-user-block {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: .25rem .75rem .5rem;
    padding: .75rem;
    border-radius: .375rem;
    background: var(--kms-user-block-background);
}

.kms-avatar {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kms-avatar-background);
    color: var(--kms-avatar-foreground);
    font-size: .8125rem;
    font-weight: 700;
}

.kms-user-block-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.3;
}

.kms-user-block-name {
    overflow: hidden;
    color: var(--kms-text);
    font-size: .875rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kms-user-block-role {
    color: var(--kms-muted);
    font-size: .75rem;
}

.kms-nav {
    padding-bottom: 1rem;
}

/* Programmversion unten rechts; schmal nur die Nummer. */
.kms-sidebar-version {
    margin-top: auto;
    padding: .5rem 1.375rem .75rem;
    color: var(--kms-muted);
    font-size: .75rem;
    text-align: right;
    white-space: nowrap;
}

.kms-nav,
.kms-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kms-nav-heading {
    padding: .875rem 1.375rem .375rem;
    color: var(--kms-muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kms-nav-link {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    gap: .75rem;
    margin: 0 .625rem;
    padding: 0 .75rem;
    border-radius: .375rem;
    color: inherit;
    font-size: .875rem;
    text-decoration: none;
    white-space: nowrap;
}

.kms-nav-link:hover {
    background: var(--kms-sidebar-hovered);
}

.kms-nav-link.active {
    background: var(--kms-sidebar-active-background);
    box-shadow: inset 3px 0 0 var(--kms-accent-yellow);
    color: var(--kms-sidebar-active-foreground);
    font-weight: 600;
}

.kms-nav-link .kms-icon {
    flex: none;
}

.kms-nav-text {
    flex: 1;
}

.kms-nav-badge {
    min-width: 1.25rem;
    box-sizing: border-box;
    padding: 1px .4375rem;
    border-radius: .625rem;
    background: var(--kms-accent-yellow);
    color: var(--kms-badge-foreground);
    font-size: .6875rem;
    font-weight: 700;
    text-align: center;
}

/* Schmal: nur Signet und Symbole, Abschnittstitel werden zu Trennlinien (Entwurf Form). */
html[data-kms-sidenav="schmal"] .kms-sidebar {
    width: var(--kms-sidebar-narrow-width);
    flex-basis: var(--kms-sidebar-narrow-width);
}

html[data-kms-sidenav="schmal"] .kms-brand {
    padding: 0 1.3125rem;
}

html[data-kms-sidenav="schmal"] .kms-sidebar-top {
    margin-bottom: .375rem;
}

html[data-kms-sidenav="schmal"] .kms-sidebar-version {
    padding-inline: 0;
    text-align: center;
}

html[data-kms-sidenav="schmal"] :is(.kms-brand-text, .kms-user-block, .kms-nav-text, .kms-nav-badge, .kms-sidebar-version-label) {
    display: none;
}

html[data-kms-sidenav="schmal"] .kms-nav-link {
    padding: 0 1rem;
}

html[data-kms-sidenav="schmal"] .kms-nav-heading {
    height: 1px;
    margin: .5rem 1rem;
    padding: 0;
    overflow: hidden;
    background: var(--kms-sidebar-separator);
    color: transparent;
    font-size: 0;
}

html[data-kms-sidenav="schmal"] .kms-nav-group:first-child .kms-nav-heading {
    display: none;
}

/* Offcanvas: Leiste über dem Inhalt, dahinter ein dunkler Hintergrund (Entwurf Mobile). */
html[data-kms-sidenav="offcanvas"] .kms-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--kms-offcanvas-width);
    height: auto;
    box-shadow: var(--kms-shadow-offcanvas);
    transform: translateX(-100%);
    /* Beim Schließen erst nach dem Hinausgleiten verbergen. */
    transition: transform .2s, visibility 0s .2s;
    visibility: hidden;
}

/* Beim Öffnen sofort sichtbar, sonst nähme die Schließen-Taste den Fokus aus layout.js nicht an. */
html[data-kms-sidenav="offcanvas"][data-kms-sidenav-open] .kms-sidebar {
    transform: none;
    transition: transform .2s;
    visibility: visible;
}

html[data-kms-sidenav="offcanvas"] .kms-sidebar-close {
    display: flex;
}

.kms-backdrop {
    display: none;
}

html[data-kms-sidenav="offcanvas"][data-kms-sidenav-open] .kms-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
    display: block;
    background: var(--kms-backdrop);
}

/* Hauptbereich: Das Band liegt hinter Kopfleiste und Titelbereich, die Karten liegen halb darauf. */
.kms-main {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.kms-band {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: var(--kms-band-height);
    background: var(--kms-band-background);
}

.kms-topbar {
    position: relative;
    z-index: 3;
    display: flex;
    height: var(--kms-topbar-height);
    box-sizing: border-box;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    color: var(--kms-band-foreground);
}

.kms-topbar :focus-visible {
    outline: 3px solid var(--kms-band-focus-ring);
    outline-offset: 2px;
}

.kms-menu-toggle {
    display: flex;
    width: 2.375rem;
    height: 2.375rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: var(--kms-band-button);
    color: inherit;
    cursor: pointer;
}

.kms-menu-toggle:hover {
    background: var(--kms-band-button-hovered);
}

.kms-topbar-actions {
    display: flex;
    align-items: center;
    gap: .375rem;
}

.kms-topbar-divider {
    width: 1px;
    height: 1.5rem;
    margin: 0 .375rem;
    background: var(--kms-band-divider);
}

.kms-topbar-button {
    display: flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.kms-user-button {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .625rem;
    padding: 0 .375rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}

.kms-topbar-button:hover,
.kms-user-button:hover {
    background: var(--kms-band-button);
}

.kms-band-avatar {
    display: flex;
    width: 2rem;
    height: 2rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kms-band-avatar-background);
    color: var(--kms-band-avatar-foreground);
    font-size: .8125rem;
    font-weight: 700;
}

.kms-user-name {
    font-weight: 600;
    white-space: nowrap;
}

/* Aufklappmenüs (Darstellung, Benutzer); Öffnen, Schließen und Pfeiltasten übernimmt layout.js. */
.kms-dropdown {
    position: relative;
}

.kms-menu {
    position: absolute;
    top: 3rem;
    right: 0;
    z-index: 5;
    /* Ohne max-content richtet sich die Breite nach der schmalen Schaltfläche, und die Einträge brächen um. */
    width: max-content;
    min-width: 11.875rem;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
    padding: .375rem;
    border: 1px solid var(--kms-line);
    border-radius: .5rem;
    background: var(--kms-surface);
    box-shadow: var(--kms-shadow-menu);
    color: var(--kms-text);
}

.kms-menu[hidden] {
    display: none;
}

.kms-menu-user {
    min-width: 14.375rem;
}

.kms-topbar .kms-menu :focus-visible {
    outline-color: var(--kms-focus-ring);
    outline-offset: -3px;
}

.kms-menu-item {
    display: flex;
    width: 100%;
    min-height: 2.5rem;
    box-sizing: border-box;
    align-items: center;
    gap: .625rem;
    padding: 0 .625rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .875rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.kms-menu-item:hover {
    background: var(--kms-chip);
}

.kms-menu-item[aria-checked="true"] {
    background: var(--kms-chip);
    color: var(--kms-accent);
    font-weight: 600;
}

.kms-menu-item-danger {
    color: var(--kms-danger);
    font-weight: 600;
}

.kms-menu-email {
    margin: 0;
    padding: .5rem .625rem;
    color: var(--kms-muted);
    font-size: .75rem;
    overflow-wrap: anywhere;
}

.kms-menu-separator {
    height: 1px;
    margin: .375rem 0;
    border: 0;
    background: var(--kms-line);
}

.kms-menu form {
    margin: 0;
}

/* Inhalt mit Seitentitel auf dem Band */
.kms-content {
    position: relative;
    display: flex;
    min-width: 0;
    box-sizing: border-box;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 1.5rem 1.5rem;
}

/* Zusammen mit dem Abstand von .kms-content 22 px bis zu den Karten, wie im Entwurf. */
.kms-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 0 .125rem;
    color: var(--kms-band-foreground);
}

/* Lange Titel ohne Leerzeichen (z. B. eine E-Mail-Adresse als Name eines Kontos) brechen um, statt überzustehen. */
.kms-page-heading > div {
    min-width: 0;
}

.kms-page-heading h1 {
    margin: 0;
    color: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.kms-page-heading-bar {
    display: block;
    width: 2rem;
    height: 3px;
    margin-top: .375rem;
    border-radius: 2px;
    background: var(--kms-accent-yellow);
}

.kms-page-heading a:focus-visible {
    outline: 3px solid var(--kms-band-focus-ring);
    outline-offset: 2px;
}

.kms-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    font-size: .875rem;
    list-style: none;
    opacity: .9;
}

.kms-breadcrumbs li + li::before {
    margin-right: .375rem;
    content: "›" / "";
}

.kms-breadcrumbs a {
    color: inherit;
}

/* Kacheln der Startseite */
.kms-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr));
    gap: 1.25rem;
}

.kms-tile {
    display: flex;
    flex-direction: column;
    border-radius: .375rem;
    background: var(--kms-surface);
    box-shadow: var(--kms-shadow-card);
    color: var(--kms-text);
    text-decoration: none;
    transition: box-shadow .15s;
}

.kms-tile:hover {
    box-shadow: var(--kms-shadow-card-hovered);
}

/* Der Rahmen liegt innen auf der Kachel: Außen stünde er zum Teil auf dem Band, wo Logo-Blau nur 1,16:1 hätte. */
.kms-tile:focus-visible {
    outline: 3px solid var(--kms-focus-ring);
    outline-offset: -3px;
}

.kms-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px dashed var(--kms-line);
}

.kms-tile-title {
    font-size: .9375rem;
    font-weight: 600;
}

.kms-tile-open {
    padding: 2px .5rem;
    border-radius: 4px;
    background: var(--kms-chip);
    color: var(--kms-accent);
    font-size: .6875rem;
    font-weight: 600;
}

.kms-tile-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .875rem;
    padding: 1.125rem;
}

.kms-tile-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kms-chip);
    color: var(--kms-accent);
}

.kms-tile-figure {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.kms-tile-count {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
}

.kms-tile-label {
    color: var(--kms-muted);
    font-size: .8125rem;
}

/* Karte mit Titelzeile, z. B. im Profil */
.kms-card {
    display: flex;
    flex-direction: column;
    border-radius: .375rem;
    background: var(--kms-surface);
    box-shadow: var(--kms-shadow-card);
    color: var(--kms-text);
}

.kms-card-title {
    margin: 0;
    padding: .875rem 1.25rem;
    border-bottom: 1px dashed var(--kms-line);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.4;
}

.kms-card-body {
    padding: 1.125rem 1.25rem 1.25rem;
}

.kms-card-body > :first-child {
    margin-top: 0;
}

.kms-card-body > :last-child {
    margin-bottom: 0;
}

.kms-card :focus-visible {
    outline-color: var(--kms-focus-ring);
}

/* Nummerierter Abschnitt einer Karte, z. B. „1 Angaben“ (Entwurf Form) */
.kms-step {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .625rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--kms-accent);
    color: var(--kms-page-background);
    font-size: .75rem;
    font-weight: 600;
}

/* Hinweiskasten: linker Rand in Gelb, Symbol in der Akzentfarbe (Entwurf Form) */
.kms-notice {
    display: flex;
    gap: .75rem;
    padding: .75rem .875rem;
    border-left: 4px solid var(--kms-accent-yellow);
    border-radius: .375rem;
    background: var(--kms-chip);
    color: var(--kms-text);
    font-size: .875rem;
}

.kms-notice > .kms-icon {
    flex: none;
    color: var(--kms-accent);
}

/* Formularseiten: Karten untereinander, Fußzeile mit den Schaltflächen */
.kms-issue-form {
    display: flex;
    max-width: 57.5rem;
    flex-direction: column;
    gap: 1.25rem;
}

.kms-form-footer {
    display: flex;
    justify-content: space-between;
    padding: .875rem 1.25rem;
    border-radius: .375rem;
    background: var(--kms-surface);
    box-shadow: var(--kms-shadow-card);
}

.kms-form-layout .kms-form-hint {
    display: block;
    margin-top: .25rem;
}

.kms-note-hint {
    display: flex !important;
    justify-content: space-between;
    gap: 1rem;
}

/* Übersicht: Filter über dem Grid */
.kms-grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
}

.kms-grid-toolbar label {
    font-size: .875rem;
    font-weight: 600;
}

/* E-Mail-Domains: gespeicherte (Punycode-)Form klein unter der Unicode-Anzeige */
.kms-stored-domain {
    display: block;
}

.kms-status-filter {
    width: 12rem;
}

/* Nutzer: Beschriftung und Feld brechen gemeinsam um; Suchfeld schmal auf kleinen Bildschirmen */
.kms-filter {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: .5rem;
}

.kms-user-search {
    width: 18rem;
    min-width: 0;
}

/* Nutzer im Detail: Stammdaten als zweispaltige Liste, darunter die Aktionen */
.kms-facts {
    display: grid;
    grid-template-columns: minmax(8rem, max-content) 1fr;
    gap: .375rem 1.5rem;
    margin: 0 0 1rem;
    font-size: .875rem;
}

.kms-facts dt {
    color: var(--kms-muted);
    font-weight: 600;
}

.kms-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.kms-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 .5rem;
}

.kms-subtitle {
    margin: 1.5rem 0 .75rem;
    font-size: .875rem;
    font-weight: 600;
}

/* Erläuterung unter einem Grid */
.kms-grid + .kms-form-hint {
    margin-top: .5rem;
}

/* Ergebnis einer Aktion über den Karten; hebt sich vom Band ab */
.kms-message {
    background: var(--kms-surface);
    box-shadow: var(--kms-shadow-card);
}

/* Ansicht nach dem Ausstellen (AccessCodeIssued) */
.kms-issued-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
    margin: 1.25rem 0;
}

/* Immer schwarz auf weiß mit Ruhezone, auch im Dunkelmodus: Nur so lesen Scanner den Code zuverlässig. */
.kms-qr {
    width: 12rem;
    height: 12rem;
    flex: none;
    background: #FFFFFF;
}

.kms-qr > svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sperre der Bedienelemente bis zum Start des Circuits (AdminLayout): Das <fieldset> verschwindet mit display: contents aus dem
   Layout, seine Kinder bleiben Teil des Flex-Containers (.kms-content mit Abstand, .kms-topbar-actions). Gesperrt bleiben die
   Felder darin trotzdem (E2E-Test AccessCodes_Gate_DisablesControlsDespiteDisplayContents). */
.kms-interactive-gate {
    display: contents;
}

/* Code als Definitionsliste (Begriff und Wert), ohne Standardabstände */
.kms-code-list {
    margin: 0;
}

.kms-issued .kms-card-title:focus {
    outline: none;
}

.kms-issued-label,
.kms-issued-valid {
    margin: 0;
    color: var(--kms-muted);
    font-size: .875rem;
}

.kms-issued-code {
    margin: .25rem 0 .625rem;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
}

.kms-issued-valid strong {
    color: var(--kms-text);
}

.kms-issued-steps {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
}

.kms-issued-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.kms-issued-actions .kms-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 0;
}

.kms-print-only {
    display: none;
}

.kms-print-title {
    margin: 0 0 .25rem;
    font-size: 1.125rem;
}

.kms-print-kind,
.kms-print-link {
    margin: 0;
    color: var(--kms-muted);
    font-size: .875rem;
}

.kms-print-kind {
    margin-bottom: .5rem;
}

.kms-print-link {
    margin-bottom: 1.25rem;
    overflow-wrap: anywhere;
}

/* Landeseite des Links im QR-Code (RedeemLanding) */
.kms-redeem-code {
    margin: .25rem 0 1rem;
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
}

/* Standorte: Kennzeichen in der Liste („ausgeblendet“, „Koordinaten fehlen“) */
.kms-flag {
    display: inline-block;
    margin: 0 .375rem .125rem 0;
    padding: 0 .5rem;
    border: 1px solid var(--kms-line);
    border-radius: .75rem;
    background: var(--kms-chip);
    color: var(--kms-text);
    font-size: .8125rem;
}

/* Standort bearbeiten: Beschriftung außerhalb einer DxFormLayout, Abstand der nur lesbaren Angaben, Kasernen und Personen */
.kms-field-label {
    display: block;
    margin: .75rem 0 .25rem;
    font-size: .875rem;
    font-weight: 600;
}

.kms-facts-spaced {
    margin-top: 1rem;
}

.kms-edit-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
}

.kms-site-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem 1rem;
}

.kms-site-field {
    display: flex;
    flex: 1 1 12rem;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
}

.kms-site-field label {
    font-size: .875rem;
    font-weight: 600;
}

/* Zahl der Termine einer Kaserne, auf Höhe der Eingabefelder. */
.kms-site-events {
    padding-bottom: .5rem;
    white-space: nowrap;
}

.kms-person {
    min-width: 0;
    margin: 0 0 1rem;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--kms-line);
    border-radius: .375rem;
}

.kms-person-legend {
    padding: 0 .375rem;
    font-size: .9375rem;
    font-weight: 600;
}

.kms-person-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
}

.kms-person-photo img {
    width: 6rem;
    height: 6rem;
    border-radius: .375rem;
    object-fit: cover;
}

.kms-person-photo .kms-dropzone {
    flex: 1 1 18rem;
}

.kms-person-photo .kms-dropzone + .kms-form-hint {
    flex-basis: 100%;
}

/* Ablagefläche für Dateien (FileDropZone): gestrichelter Rahmen, beim Darüberziehen durchgezogen in der Akzentfarbe. Der Rahmen
   aus --kms-input-border erreicht wie die Eingabefelder 3:1 zum Grund. */
.kms-dropzone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    padding: 1rem;
    border: 2px dashed var(--kms-input-border);
    border-radius: .375rem;
    background: var(--kms-surface);
    color: var(--kms-muted);
    font-size: .875rem;
    text-align: center;
}

.kms-dropzone.kms-dropzone-over {
    border-style: solid;
    border-color: var(--kms-accent);
    background: var(--kms-chip);
    color: var(--kms-text);
}

/* DxFileInput setzt über der Schaltfläche 20 px Abstand für seine Dateiliste; die ist hier ausgeblendet. */
.kms-dropzone .dxbl-upload {
    padding: 0;
}

.kms-dropzone[inert] {
    opacity: .6;
}

/* Länderwahl: Flagge (4:3) vor dem Namen in der Liste und im Eingabefeld. Der Rand hebt weiße Flaggen vom Grund ab. */
.kms-country {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kms-country-flag {
    flex: none;
    width: 1.333rem;
    height: 1rem;
    border: 1px solid var(--kms-line);
    border-radius: 2px;
    object-fit: cover;
}

.kms-country-flag-edit {
    margin: 0 .5rem 0 .625rem;
}

/* Das Eingabefeld darf schmaler werden als seine Standardbreite, sonst schiebt es die Flagge aus dem sichtbaren Bereich. */
.kms-country-input {
    min-width: 0;
}

/* Termin bearbeiten: Farbmarke der Kategorie vor dem Namen in der Liste und im Eingabefeld (wie die Flagge der Länderwahl). Der
   Rand hebt helle Farben vom Grund ab. */
.kms-category {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.kms-category-swatch {
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--kms-line);
    border-radius: 50%;
}

.kms-category-swatch-edit {
    margin: 0 .5rem 0 .625rem;
}

.kms-category-input {
    min-width: 0;
}

/* Termin bearbeiten: Bild und PDF untereinander, Vorschau des Bildes in begrenzter Größe */
.kms-event-file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: 1rem;
}

.kms-event-file .kms-dropzone {
    align-self: stretch;
}

.kms-event-image {
    max-width: min(100%, 20rem);
    max-height: 15rem;
    border-radius: .375rem;
    object-fit: contain;
}

/* Import der Standortliste nach dem Entwurf import-vorschau-v2: Zähler und Karten mit farbigem Rand und Kennzeichnung. Die
   Farben kommen aus dem Theme (--kms-import-*); die Kennzeichnung nennt die Kategorie immer auch als Text. */
.kms-import-counts {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.kms-import-count {
    padding: .375rem 1rem;
    border-left: 6px solid var(--kms-line);
    border-radius: .375rem;
    background: var(--kms-chip);
    font-size: .875rem;
}

.kms-import-count b {
    margin-right: .25rem;
    font-size: 1.125rem;
}

.kms-import-card {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--kms-line);
    border-left: 8px solid var(--kms-line);
    border-radius: .375rem;
}

.kms-import-card-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
}

.kms-import-card-title h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.kms-import-tag {
    padding: .125rem .625rem;
    border-radius: .75rem;
    background: var(--kms-muted);
    color: var(--kms-import-tag-foreground);
    font-size: .8125rem;
    font-weight: 700;
}

.kms-import-new { border-left-color: var(--kms-import-new); }
.kms-import-new .kms-import-tag { background: var(--kms-import-new); }
.kms-import-changed { border-left-color: var(--kms-import-changed); }
.kms-import-changed .kms-import-tag { background: var(--kms-import-changed); }
.kms-import-conflict { border-left-color: var(--kms-import-conflict); }
.kms-import-conflict .kms-import-tag { background: var(--kms-import-conflict); }
.kms-import-missing { border-left-color: var(--kms-import-missing); }
.kms-import-missing .kms-import-tag { background: var(--kms-import-missing); }

.kms-import-facts {
    margin: .5rem 0 0;
    font-size: .875rem;
}

.kms-import-assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: .75rem;
}

.kms-import-assign label {
    font-size: .875rem;
    font-weight: 600;
}

.kms-import-target {
    width: 18rem;
    max-width: 100%;
}

.kms-assignment {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

/* Breite Tabellen scrollen in ihrem Kasten, nicht die Seite (375 px). */
.kms-table-scroll {
    max-width: 100%;
    margin-top: .75rem;
    overflow-x: auto;
}

.kms-import-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.kms-import-table th,
.kms-import-table td {
    padding: .5rem;
    border-bottom: 1px solid var(--kms-line);
    text-align: left;
    vertical-align: top;
}

.kms-import-table thead th {
    color: var(--kms-muted);
    font-weight: 600;
}

.kms-import-value {
    min-width: 8rem;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.kms-import-meta {
    display: block;
    color: var(--kms-muted);
    font-size: .8125rem;
}

.kms-import-mark {
    margin: .75rem 0 0;
    padding-left: .625rem;
    border-left: 3px solid var(--kms-accent-yellow);
    font-size: .875rem;
    font-weight: 600;
}

.kms-import-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1rem;
}

@media (width < 992px) {
    .kms-user-name {
        display: none;
    }
}

@media (width < 768px) {
    :root {
        --kms-band-height: 11.25rem;
    }

    .kms-topbar {
        padding: 0 .75rem;
    }

    .kms-topbar-actions {
        gap: .25rem;
    }

    .kms-user-button > .kms-icon,
    .kms-breadcrumbs {
        display: none;
    }

    .kms-content {
        gap: .875rem;
        padding: 0 1rem 1rem;
    }

    .kms-page-heading {
        padding-bottom: .5rem;
    }

    .kms-facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .kms-facts dd {
        margin-bottom: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kms-sidebar,
    html[data-kms-sidenav="offcanvas"] .kms-sidebar,
    .kms-tile {
        transition: none;
    }
}

/* Druck des ausgestellten Codes: nur der Bereich .kms-print-sheet auf A4 mit dem Signet in Logo-Blau oben (ohne Schriftzug),
   unabhängig vom gewählten Theme schwarz auf weiß. Alles andere (Seitenleiste, Band, Formular, Übersicht) entfällt.
   Das Ausblenden gilt nur, solange ein Code angezeigt wird (body:has(.kms-print-sheet)); jede andere Seite druckt unverändert.
   @page lässt sich nicht an einen Selektor binden. Eine benannte Seite (page: …) erzeugt in Chromium je eine leere Seite
   im Format Letter davor und danach (gemessen: 3 statt 1 Seite), deshalb gilt A4 mit 20 mm Rand für den Druck der ganzen
   Admin-Oberfläche. */
@page {
    size: A4;
    margin: 20mm;
}

@media print {
    body:has(.kms-print-sheet) .kms-sidebar,
    body:has(.kms-print-sheet) .kms-backdrop,
    body:has(.kms-print-sheet) .kms-band,
    body:has(.kms-print-sheet) .kms-topbar,
    body:has(.kms-print-sheet) .kms-page-heading,
    body:has(.kms-print-sheet) .kms-noprint {
        display: none !important;
    }

    body:has(.kms-print-sheet),
    body:has(.kms-print-sheet) .kms-shell,
    body:has(.kms-print-sheet) .kms-main,
    body:has(.kms-print-sheet) .kms-content,
    body:has(.kms-print-sheet) .kms-card,
    body:has(.kms-print-sheet) .kms-issued .kms-card-body {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: #FFFFFF !important;
        box-shadow: none;
        color: #000000 !important;
    }

    .kms-issued .kms-card-title {
        display: none;
    }

    .kms-print-only {
        display: block;
    }

    .kms-print-signet {
        margin-bottom: 8mm;
        color: #2743A0;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .kms-print-signet .kms-signet {
        color: #2743A0;
    }

    .kms-print-sheet * {
        color: #000000 !important;
    }

    .kms-print-sheet .kms-print-signet,
    .kms-print-sheet .kms-print-signet * {
        color: #2743A0 !important;
    }

    .kms-issued-main {
        flex-wrap: nowrap;
        margin: 8mm 0;
    }

    .kms-qr {
        width: 60mm;
        height: 60mm;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .kms-issued-code {
        font-size: 22pt;
    }
}

/* Standort bearbeiten: Verweise auf Termine und Dokumente, je mit „Neu“ */
.kms-link-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kms-link-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

/* Kategorien und Dokumente: Farbwahl und Formular unter der Liste */
.kms-color-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.kms-color-chosen {
    display: flex;
    align-items: center;
    gap: .5rem;
}