/* Buchungs- und Widerrufsseiten verwenden den gemeinsamen Hero-Stil aus website.css. */
.buchung { --buchung-labelbreite: 11rem; --buchung-spaltenabstand: 1rem; font-size: .875rem; line-height: 1.5; }
.buchung-person { --buchung-labelbreite: 15rem; }
.buchung [hidden] { display: none !important; }
.buchung-rueckweg { display: inline-block; margin-bottom: 1rem; }

.buchung-schritte { scroll-margin-top: 7rem; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; margin: 0 0 1.25rem; }
.buchung-schritte li { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 3px solid var(--rand); color: var(--text-ruhig); }
.buchung-schritte li[aria-current] { border-color: var(--orange); color: var(--dunkelblau); font-weight: 600; }
.buchung-schritte li > span { display: grid; place-items: center; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--hintergrund); }
.buchung-schritte li[aria-current] > span { background: var(--orange); color: white; }
.buchung .kursdetail-inhalt { padding: 0; }
.buchung h3 { font-size: 1rem; margin: 1rem 0 .6rem; }
.buchung-raster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.buchung-breit { grid-column: 1/-1; }
.buchung-feld { display: grid; gap: .25rem; margin-bottom: .55rem; min-width: 0; }
.buchung-feld > span { font-size: .8125rem; }
.buchung-feld > span:has(small) { line-height: 1.2; }
.buchung-feld > span > small { display: block; line-height: 1.2; margin-top: .1rem; }
.buchung-kategorie .buchung-raster { grid-template-columns: minmax(0,1fr); }
.buchung-kategorie .buchung-feld { grid-template-columns: var(--buchung-labelbreite) minmax(0,1fr); align-items: center; column-gap: var(--buchung-spaltenabstand); }
.buchung input:not([type=checkbox]):not([type=radio]), .buchung select, .buchung textarea { min-width: 0; width: 100%; min-height: 2.25rem; padding: .35rem .6rem; font: inherit; font-size: .875rem; color: var(--text); background: white; border: 1px solid #aeb8c7; border-radius: .35rem; }
.buchung input:focus-visible, .buchung select:focus-visible, .buchung textarea:focus-visible, .buchung button:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 3px; }
.buchung input:read-only { background: var(--hintergrund); }
.buchung input[type=checkbox], .buchung input[type=radio] { width: 1rem; height: 1rem; flex: 0 0 1rem; accent-color: var(--dunkelblau); margin: .2rem 0 0; }
.buchung-auswahl { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; margin: .7rem 0 1rem; }
.buchung-auswahl legend { padding: 0; margin-bottom: .6rem; font-size: .8125rem; }
.buchung-auswahl label, .buchung-checkbox { display: flex; align-items: start; gap: .6rem; line-height: 1.5; cursor: pointer; }
.buchung-auswahl label { flex: 1; min-width: 6rem; padding: .65rem .75rem; border: 1px solid var(--rand); border-radius: var(--radius-klein); transition: border-color .15s, background .15s; }
.buchung-auswahl label:hover { border-color: var(--dunkelblau); }
.buchung-auswahl label:has(input:checked) { border-color: var(--dunkelblau); background: var(--orange-flaeche); font-weight: 600; }



.buchung-checkbox { margin: .6rem 0 .9rem; font-size: .8125rem; }
.buchung-email { margin-top: 1rem; }
.buchung-zusatz { font-size: .8125rem; color: var(--text-ruhig); }
.buchung-personenaktionen, .buchung-navigation { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.buchung-personenaktionen { justify-content: flex-end; }
.buchung-navigation { margin-top: 1.25rem; }
#buchung-weiter { margin-left: auto; }
.buchung-textbutton { font: inherit; color: var(--dunkelblau); background: transparent; border: 0; text-decoration: underline; text-underline-offset: .2em; padding: .5rem 0; cursor: pointer; }
.buchung-uebersicht-person { padding: 1.5rem 0; border-bottom: 1px solid var(--rand); overflow-wrap: anywhere; }
.buchung-uebersicht-person:first-child { padding-top: 0; }
.buchung-uebersicht-person h4 { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; }
.buchung .kontaktliste { grid-template-columns: var(--buchung-labelbreite) minmax(0,1fr); gap: .75rem var(--buchung-spaltenabstand); }
.buchung .kontaktliste dt { font-size: .8125rem; color: var(--text-ruhig); }
.buchung .kontaktliste dd { overflow-wrap: anywhere; }
.buchung [data-schritt="2"] .buchung-feld { margin-bottom: .6rem; }

.buchung-abschluss { width: 100%; margin-top: 1rem; }
.buchung-layout { display: grid; grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.75fr); gap: 2.5rem; align-items: start; }
.buchung-arbeitsbereich { min-width: 0; }
.buchung-kurs { position: sticky; top: 7rem; padding: 2rem; border-radius: var(--radius); background: var(--dunkelblau); color: white; box-shadow: var(--schatten-dunkle-kachel); border-top: 4px solid var(--orange); }
.buchung .buchung-ueberzeile { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .65rem; color: var(--orange-dunkel); }
.buchung-kurs .buchung-ueberzeile { color: #ffb46d; }
.buchung-kurs h2 { font-size: 1.3rem; line-height: 1.35; color: white; margin: 0 0 1.25rem; }
.buchung .buchung-kurs .kontaktliste { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: .8rem 1rem; margin: 0; }
.buchung .buchung-kurs .kontaktliste dt { font-size: .8rem; color: #cbd4e3; margin: 0; }
.buchung-kursfakten dd { margin: 0; font-weight: 600; }
.buchung-kurspreis { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid #526077; }
.buchung-kurspreis strong { display: block; font-size: 1.5rem; font-weight: 600; }
.buchung-kurspreis span { display: block; font-size: .8rem; color: #cbd4e3; }
.buchung .buchung-kursnotiz { color: #e0e6ef; font-size: .8125rem; line-height: 1.5; margin: 1rem 0 0; }
.buchung-schrittkopf h2 { font-size: 1.6rem; margin: 0 0 .5rem; line-height: 1.25; }
.buchung-schritt > .kursdetail-inhalt > p:first-child { margin: 0 0 1.15rem; color: var(--text-ruhig); }
.buchung-kategorie { margin: 0 0 1.5rem; }
.buchung-kategorie-inhalt { padding: 1.75rem; }
.buchung-kategorie > header { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.75rem; }
.buchung-kategorie h3 { font-family: inherit; font-size: 1rem; margin: 0; }
.buchung-kategorie header p { font-size: .8125rem; color: var(--text-ruhig); margin: .2rem 0 0; }
.buchung-kategorie-symbol { display: grid; place-items: center; flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, .65); color: var(--dunkelblau); }
.buchung-kategorie-symbol svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.buchung-kategorie-inhalt > :last-child { margin-bottom: 0; }
@media(max-width: 950px) {
 .buchung-layout { grid-template-columns: minmax(0,1fr); gap: 2rem; }
 .buchung-kurs { position: static; padding: 1.5rem; }
 .buchung-kurs h2 { margin-bottom: 1rem; }
 .buchung-kurspreis { margin-top: 1rem; padding-top: 1rem; }
 .buchung .buchung-kursnotiz { margin-top: 1rem; }
}
@media(max-width: 600px) {
 .buchung-kategorie .buchung-feld { grid-template-columns: minmax(0,1fr); }
 .buchung input:not([type=checkbox]):not([type=radio]), .buchung select, .buchung textarea { font-size: 1rem; }
 .buchung-auswahl label { min-width: 0; padding: .75rem .5rem; gap: .4rem; white-space: nowrap; }
 .buchung-raster { grid-template-columns: minmax(0,1fr); gap: .3rem; }
 .buchung-kategorie-inhalt { padding: 1.1rem; }
 .buchung-kategorie > header { padding: .85rem 1.1rem; }
 .buchung-schritte { gap: .5rem; }
 .buchung-schritte li { flex-direction: column; align-items: flex-start; gap: .4rem; font-size: .85rem; }
 .buchung .kontaktliste { grid-template-columns: minmax(0,1fr); row-gap: .25rem; }
 .buchung .kontaktliste > div + div > dt { margin-top: .5rem; }
 .buchung-navigation .button { flex: 1; }
}

.buchung-feldfehler { display: block; color: #a51d24; font-size: .8125rem; line-height: 1.4; }
.buchung-feld > .buchung-feldfehler { grid-column: 2; }
.buchung-auswahl > .buchung-feldfehler { flex-basis: 100%; }
.buchung .buchung-feld [aria-invalid="true"] { border-color: #a51d24; }
@media(max-width: 600px) {
 .buchung-feld > .buchung-feldfehler { grid-column: 1; }
}

.buchung-preistabelle-rahmen { overflow-x: auto; }
.buchung-preistabelle-rahmen:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: 3px; }
.buchung-preisspalte-datum { width: 5.5rem; }
.buchung-preistabelle thead th, .buchung-preistabelle tbody td:nth-child(2) { white-space: nowrap; }
.buchung-preistabelle { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.buchung-preistabelle th, .buchung-preistabelle td { padding: .5rem .6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rand); }
.buchung-preistabelle th:first-child, .buchung-preistabelle td:first-child { padding-left: 0; }
.buchung-preistabelle th:last-child, .buchung-preistabelle td:last-child { padding-right: 0; }
.buchung-preistabelle th:nth-child(n+3), .buchung-preistabelle td:nth-child(n+3), .buchung-preistabelle tfoot td { text-align: right; white-space: nowrap; }
.buchung-preistabelle tbody td:first-child { min-width: 10rem; }
.buchung-preistabelle td strong, .buchung-preistabelle td span { display: block; }
.buchung-preistabelle td span { margin-top: .3rem; color: var(--text-ruhig); font-size: .75rem; }
.buchung-preistabelle thead th:nth-child(n+3), .buchung-preistabelle tbody td:nth-child(n+3) { width: 1%; }
.buchung-preistabelle th:nth-child(2), .buchung-preistabelle tbody td:nth-child(2) { padding-right: 0; }
.buchung-preistabelle th:nth-child(3), .buchung-preistabelle td:nth-child(3) { padding-left: 2px; padding-right: 0; }
.buchung-preistabelle th:nth-child(4), .buchung-preistabelle td:nth-child(4) { padding-left: 2px; }
.buchung-preistabelle tfoot td { width: 1%; min-width: 0; }
.buchung-preistabelle tfoot th, .buchung-preistabelle tfoot td { padding-top: 1rem; border-bottom: 0; font-size: 1rem; font-weight: 600; }
@media (max-width: 600px) {
 .buchung-preistabelle { font-size: .75rem; table-layout: fixed; }
 .buchung-preisspalte-datum { width: 4.5rem; }
 .buchung-preisspalte-einzel { width: 4.75rem; }
 .buchung-preisspalte-gesamt { width: 5rem; }
 .buchung-preistabelle th, .buchung-preistabelle td { padding-left: .25rem; padding-right: .25rem; }
 .buchung-preistabelle th:nth-child(n+3), .buchung-preistabelle td:nth-child(n+3) { width: 1%; }
 .buchung-preistabelle tbody td:first-child { min-width: 0; overflow: hidden; }
 .buchung-preistabelle tbody td:first-child strong, .buchung-preistabelle .buchung-preiskurs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .buchung-preistabelle th:nth-child(2), .buchung-preistabelle tbody td:nth-child(2) { padding-right: 0; }
 .buchung-preistabelle th:nth-child(3), .buchung-preistabelle td:nth-child(3) { padding-left: 2px; padding-right: 0; }
 .buchung-preistabelle th:nth-child(4), .buchung-preistabelle td:nth-child(4) { padding-left: 2px; }
 .buchung-preistabelle tfoot th, .buchung-preistabelle tfoot td { font-size: .875rem; }
}

.buchung [data-schritt="2"] { --buchung-labelbreite: 11rem; --buchung-spaltenabstand: .375rem; }
.buchung [data-schritt="2"] .kontaktliste { display: block; }
.buchung [data-schritt="2"] .kontaktliste > div { display: grid; grid-template-columns: var(--buchung-labelbreite) minmax(0, 1fr); column-gap: var(--buchung-spaltenabstand); }
.buchung [data-schritt="2"] .kontaktliste > div + div { border-top: 1px solid var(--rand); margin-top: .35rem; padding-top: .35rem; }
.buchung [data-schritt="2"] .buchung-feld + .buchung-feld { border-top: 1px solid var(--rand); padding-top: .5rem; }
@media (max-width: 600px) {
 .buchung [data-schritt="2"] { --buchung-labelbreite: 11rem; }
 .buchung [data-schritt="2"] .kontaktliste > div + div > dt { margin-top: 0; }
}
@media (max-width: 340px) {
 .buchung [data-schritt="2"] .kontaktliste > div { grid-template-columns: minmax(0, 1fr); row-gap: .25rem; }
}

/* Spaltenauswahl für Paketkurse; native Quelle bleibt für Prüfung und Übertragung. */
.kursauswahl-original { position: absolute; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip-path: inset(50%); }
.kursauswahl-ausloeser { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-width: 0; width: 100%; min-height: 2.25rem; padding: .35rem .6rem; font: inherit; font-size: .875rem; text-align: left; color: var(--text); background: #fff; border: 1px solid #aeb8c7; border-radius: .35rem; cursor: pointer; }
.kursauswahl-ausloeser::after { content: ''; flex-shrink: 0; width: 1rem; height: 1rem; background: url('../bilder/auswahl-pfeil.svg?v=20261019-dreieck') center / contain no-repeat; }
.kursauswahl-popup { box-sizing: border-box; width: min(64rem, calc(100vw - 2rem)); max-height: min(25rem, calc(100vh - 2rem)); margin: auto; padding: 0; border: 1px solid var(--rand); border-radius: .5rem; box-shadow: 0 8px 24px rgba(23,35,63,.2); background: #fff; color: var(--text); overflow: auto; font-family: inherit; font-size: .8125rem; line-height: 1.5; }
.kursauswahl-kopf, .kursauswahl-option { display: grid; grid-template-columns: minmax(12rem, 1fr) 6.5rem 10rem 7rem 6.5rem; column-gap: 1rem; align-items: start; padding: .65rem .9rem; }
.kursauswahl-kopf { position: sticky; top: 0; z-index: 1; background: #e5e1da; border-bottom: 2px solid var(--orange); font-weight: 600; }
.kursauswahl-option { width: 100%; margin: 0; font: inherit; text-align: left; background: #fff; color: inherit; border: 0; border-bottom: 1px solid var(--rand); cursor: pointer; }
.kursauswahl-option > span { min-width: 0; overflow-wrap: anywhere; }
.kursauswahl-option .kursauswahl-spalte-4, .kursauswahl-kopf > :last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kursauswahl-option:hover, .kursauswahl-option[aria-selected="true"] { background: var(--orange-flaeche); }
.kursauswahl-option:disabled { background: #fff; color: #777; cursor: not-allowed; }
.kursauswahl-option:focus-visible { outline: 3px solid var(--dunkelblau); outline-offset: -3px; background: var(--orange-flaeche); }
.kursauswahl-ausloeser[aria-invalid="true"] { border-color: #a51d24; }
@supports (position-anchor: --kursauswahl) {
 .kursauswahl-ausloeser.ist-geoeffnet { anchor-name: --kursauswahl; }
 .kursauswahl-popup { position-anchor: --kursauswahl; inset: auto; top: anchor(bottom); left: clamp(1rem, anchor(left), max(1rem, calc(100vw - 64rem - 1rem))); margin: .2rem 0 0; position-try-fallbacks: flip-block; }
}
@media (max-width: 850px) {
 .kursauswahl-kopf { display: none; }
 .kursauswahl-option { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem 1rem; }
 .kursauswahl-option .kursauswahl-spalte-0 { grid-column: 1 / -1; }
 .kursauswahl-option > span:empty { display: none; }
 .kursauswahl-option > span:not(.kursauswahl-spalte-0)::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--text-ruhig); }
 .kursauswahl-option .kursauswahl-spalte-4 { text-align: left; }
}

.kursauswahl-kategorie { padding: .75rem .9rem; font-weight: 700; color: #fff; background: var(--dunkelblau); border-left: 4px solid var(--orange); }
.kursauswahl-liste > [role="group"] + [role="group"] { margin-top: .65rem; }
.kursauswahl-option .kursauswahl-spalte-0 { font-weight: 400; }
.kursauswahl-kopf { color: var(--text-ruhig); background: #f4f5f7; font-size: .75rem; }

.buchung-uebersicht-person .kontaktliste dd { font-size: .8125rem; }
/* Kurszeilen verwenden dieselbe Labelspalte wie die Teilnehmerdaten. */
.buchung-kurswerte { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 8rem; column-gap: .75rem; align-items: start; padding-right: 8px; }
.buchung-kurswerte > span { min-width: 0; overflow-wrap: anywhere; }
.buchung-kurswert-label { color: var(--text-ruhig); font-weight: 400; }
.buchung-kurswerte > span:nth-child(n+2) { text-align: right; }
@media (min-width: 851px) {
 .buchung-kurswerte { grid-template-columns: minmax(0, 1fr) 8rem calc(8rem - 30px); }
}
@media (max-width: 850px) {
 .buchung-kurswerte { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .35rem .375rem; padding-right: 0; }
 .buchung-kurswerte > span:first-child { flex-basis: 100%; }
 .buchung-kurswerte > span:nth-child(n+2) { text-align: left; }
}

/* Geschützte Buchungsverwaltung: eigenständige Personenkarten mit zugeordneten Kursen. */
.buchungsverwaltung { --buchung-labelbreite: 10rem; --buchung-spaltenabstand: .75rem; }
.buchungsverwaltung .kursdetail-karte { margin-bottom: 1.5rem; }
.buchungsverwaltung .kursdetail-inhalt { padding: 1.25rem 1.5rem; }
.buchungsverwaltung .kursdetail-inhalt > :first-child { margin-top: 0; }
.buchungsverwaltung .kursdetail-inhalt > :last-child { margin-bottom: 0; }
#verwaltung-kurse { display: grid; gap: 1.75rem; margin-top: 1rem; }
.buchungsverwaltung .verwaltung-person { min-width: 0; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; box-shadow: 0 4px 14px rgba(23, 35, 63, .07); }
.verwaltung-person-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1.25rem; border-radius: var(--radius) var(--radius) 0 0; }
.buchungsverwaltung .verwaltung-person h3 { margin: 0; color: inherit; font-size: 1.125rem; overflow-wrap: anywhere; }
.verwaltung-person-anzahl { font-size: .8125rem; }
.verwaltung-person-hinweise { padding: .8rem 1.25rem; background: var(--hero-hintergrund); border-top: 1px solid var(--rand); border-radius: 0 0 var(--radius) var(--radius); }
.buchungsverwaltung .kontaktliste { display: block; margin: .65rem 0; font-size: .8125rem; }
.buchungsverwaltung .kontaktliste > div { display: grid; grid-template-columns: var(--buchung-labelbreite) minmax(0, 1fr); gap: .25rem var(--buchung-spaltenabstand); align-items: start; }
.buchungsverwaltung .kontaktliste > div + div { border-top: 1px solid var(--rand); margin-top: .35rem; padding-top: .35rem; }
.buchungsverwaltung .kontaktliste dt, .buchungsverwaltung .kontaktliste dd { margin: 0; }
.buchungsverwaltung .verwaltung-kursliste { margin: 0; }
.buchungsverwaltung .verwaltung-kursliste > div { padding: 1.1rem 1.25rem; grid-template-columns: 7.5rem minmax(0, 1fr); }
.buchungsverwaltung .verwaltung-kursliste dt { padding-top: .1rem; color: var(--text-ruhig); }
.buchungsverwaltung .verwaltung-kursliste > div:nth-child(even) { background: var(--hero-hintergrund); }
.buchungsverwaltung .verwaltung-kursliste > div + div { border-top: 1px solid var(--rand); margin-top: 0; }
.verwaltung-kurswerte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: start; }
.verwaltung-kursname { min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; font-weight: 600; color: var(--dunkelblau); }
.verwaltung-termin { display: flex; flex-wrap: wrap; gap: .25rem .75rem; color: var(--text-ruhig); font-variant-numeric: tabular-nums; }
.verwaltung-termin > span { white-space: nowrap; }
.verwaltung-aktionen { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin-top: .2rem; }
.verwaltung-aktionen .buchung-textbutton { padding: .4rem 0; text-align: left; font-size: .8125rem; }
.verwaltung-paketaktionen { padding-top: .35rem; }
.buchungsverwaltung .verwaltung-frist { font-size: .8125rem; color: var(--text-ruhig); margin: .45rem 0; overflow-wrap: anywhere; }
.buchungsverwaltung .formular-hinweisbox { margin: 1rem 0; }
/* Nicht interaktiver Live-Hinweis: Hinweisfläche statt orangefarbenem Fokusrahmen. */
.buchungsverwaltung #verwaltung-status:focus { outline: none; }
.buchungsverwaltung .buchung-feld { display: grid; grid-template-columns: var(--buchung-labelbreite) minmax(0, 1fr); column-gap: var(--buchung-spaltenabstand); align-items: start; }
.buchungsverwaltung .buchung-feld > span { padding-top: .45rem; color: var(--text-ruhig); }
.buchungsverwaltung .buchung-navigation { gap: .6rem; }
.buchungsverwaltung .website-dialog-inhalt .kontaktliste { --buchung-labelbreite: 14rem; }
.buchungsverwaltung [id="verwaltung-fehler"]:empty, .buchungsverwaltung [id="verwaltung-dialogstatus"]:empty { display: none; }
.verwaltung-auswahl-popup .kursauswahl-kopf, .verwaltung-auswahl-popup .kursauswahl-option { grid-template-columns: minmax(12rem, 1fr) 6rem 5rem 7rem 6rem; column-gap: .65rem; }
@media (max-width: 850px) {
 .verwaltung-kurswerte { grid-template-columns: minmax(0, 1fr); }
 .verwaltung-auswahl-popup .kursauswahl-option { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .65rem; }
}
@media (max-width: 600px) {
 .verwaltung-person-kopf, .verwaltung-person-hinweise { padding: 1rem; }
 .buchungsverwaltung .verwaltung-kursliste > div { padding: 1rem; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
 .buchungsverwaltung { --buchung-labelbreite: 8.5rem; --buchung-spaltenabstand: .5rem; }
 .buchungsverwaltung .kursdetail-inhalt { padding: 1rem; }
 .buchungsverwaltung .kontaktliste > div + div > dt { margin-top: 0; }
 .buchungsverwaltung .buchung-feld { grid-template-columns: minmax(0, 1fr); }
 .buchungsverwaltung .buchung-feld > span { padding-top: 0; }
 .buchungsverwaltung .buchung-navigation { align-items: stretch; }
 .buchungsverwaltung .buchung-navigation .button { flex: 1 1 auto; }
}
@media (max-width: 380px) {
 .buchungsverwaltung .kontaktliste > div { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
 .buchungsverwaltung *, .verwaltung-auswahl-popup * { scroll-behavior: auto; transition: none; animation: none; }
}
.buchung-feld[for="buchungsbedingungen-akzeptiert"] > span:last-child { padding-top: 0; font-size: .8125rem; line-height: 1.5; }
.buchung-feld[for="buchungsbedingungen-akzeptiert"] input[type="checkbox"] { vertical-align: middle; margin: 0 .35rem 0 0; }


.buchungsverwaltung .buchung-feld[hidden] { display: none; }

/* Lange Begründungsbeschriftung über dem Eingabefeld im Stornodialog. */
.buchungsverwaltung #verwaltung-grundfeld { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
.buchungsverwaltung #verwaltung-grundfeld > span { padding-top: 0; }

.buchungsverwaltung #verwaltung-dialogdetails { margin-bottom: 1.25rem; }
.buchungsverwaltung #verwaltung-dialogzahlung:not(:empty) { margin-bottom: 1.25rem; }
.buchungsverwaltung #verwaltung-preisfeld:not([hidden]) { display: grid; grid-template-columns: 1rem minmax(0, 1fr); column-gap: .5rem; align-items: start; }
.buchungsverwaltung #verwaltung-preisfeld > input { width: 1rem; height: 1rem; margin: .2rem 0 0; }
.buchungsverwaltung #verwaltung-preistext { min-width: 0; }

/* Kursdaten und Stornoauswahl verwenden dieselbe kompakte Wertespalte. */
.buchungsverwaltung #verwaltung-bisher,
.buchungsverwaltung #verwaltung-stornoauswahl { --buchung-labelbreite: 4rem; }
.buchungsverwaltung #verwaltung-bisher > div,
.buchungsverwaltung #verwaltung-stornoauswahl .buchung-feld { grid-template-columns: var(--buchung-labelbreite) minmax(0, 1fr); }
.buchungsverwaltung #verwaltung-stornokurse { margin-top: 1.25rem; margin-inline: 0; padding-inline: 0; border: 0; min-width: 0; }
.buchungsverwaltung #verwaltung-stornokurse > legend { padding-inline: 0; }
.buchungsverwaltung #verwaltung-stornoauswahl .buchung-feld > span { padding-top: 0; }
.buchungsverwaltung #verwaltung-stornoauswahl input[type="checkbox"] { width: 1rem; height: 1rem; margin: .15rem 0 0; justify-self: start; }

.buchungsverwaltung #verwaltung-stornoauswahl { overflow-x: auto; }
.buchungsverwaltung .verwaltung-stornotabelle { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.buchungsverwaltung .verwaltung-stornotabelle th { background: var(--hero-hintergrund); font-weight: 400; text-align: left; }
.buchungsverwaltung .verwaltung-stornotabelle th, .buchungsverwaltung .verwaltung-stornotabelle td { padding: .65rem .75rem; vertical-align: middle; }
.buchungsverwaltung .verwaltung-stornotabelle th:first-child, .buchungsverwaltung .verwaltung-stornotabelle td:first-child { width: 4rem; padding-left: 0; }
.buchungsverwaltung .verwaltung-stornotabelle th:nth-child(n+3), .buchungsverwaltung .verwaltung-stornotabelle td:nth-child(n+3) { width: 8rem; white-space: nowrap; }
.buchungsverwaltung .verwaltung-stornotabelle td { border-bottom: 1px solid var(--rand); }
.buchungsverwaltung #verwaltung-stornoauswahl .verwaltung-stornotabelle input[type="checkbox"] { margin: 0; vertical-align: middle; }

.buchungsverwaltung .verwaltung-dokumentrahmen { overflow-x: auto; }
.buchungsverwaltung .verwaltung-dokumenttabelle { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.buchungsverwaltung .verwaltung-dokumenttabelle th { background: var(--hero-hintergrund); font-weight: 400; text-align: left; }
.buchungsverwaltung .verwaltung-dokumenttabelle th, .buchungsverwaltung .verwaltung-dokumenttabelle td { padding: .65rem .75rem; vertical-align: middle; }
.buchungsverwaltung .verwaltung-dokumenttabelle td { border-bottom: 1px solid var(--rand); }
.buchungsverwaltung .verwaltung-dokumenttabelle th:nth-child(2), .buchungsverwaltung .verwaltung-dokumenttabelle td:nth-child(2) { width: 8rem; text-align: center; white-space: nowrap; }
.buchungsverwaltung .verwaltung-dokumenttabelle th:last-child, .buchungsverwaltung .verwaltung-dokumenttabelle td:last-child { width: 11rem; text-align: right; white-space: nowrap; }
.buchungsverwaltung .verwaltung-dokumentname { overflow-wrap: anywhere; }

.buchungsverwaltung #verwaltung-ersatzangebot { margin-top: 1.5rem; }
.buchungsverwaltung .verwaltung-entscheidungen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.buchungsverwaltung .verwaltung-entscheidung { padding: 1.25rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--hero-hintergrund); display: flex; flex-direction: column; align-items: flex-start; }
.buchungsverwaltung .verwaltung-entscheidung h3 { margin: 0 0 .5rem; font-size: 1rem; }
.buchungsverwaltung .verwaltung-entscheidung p { margin: 0 0 1.25rem; }
.buchungsverwaltung .verwaltung-entscheidung > button, .buchungsverwaltung #verwaltung-ersatzaktionen { margin-top: auto; }
.buchungsverwaltung #verwaltung-ersatzaktionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.buchungsverwaltung .verwaltung-entscheidung .button { font-size: .8125rem; }
@media(max-width: 600px) { .buchungsverwaltung .verwaltung-entscheidungen { grid-template-columns: minmax(0, 1fr); } }

.buchungsverwaltung #verwaltung-ersatzaktionen { display: block; overflow-x: auto; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:first-child,
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:first-child { width: auto; padding-left: .75rem; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:nth-child(2),
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:nth-child(2) { width: 8rem; white-space: nowrap; }
.buchungsverwaltung .verwaltung-ohne-ersatz { margin-top: 1.25rem; }

.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:last-child,
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:last-child { width: 17rem; text-align: right; }

/* Kompakte Aktionsbuttons passend zu den Tabellen der Buchungsverwaltung. */
.buchungsverwaltung .button {
    min-height: 2rem;
    padding: .3rem .65rem;
    font-size: .8125rem;
    line-height: 1.25;
}

.verwaltung-fussaktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.buchungsverwaltung .verwaltung-ersatzgruppe { border: 1px solid var(--rand); border-radius: .45rem; overflow: hidden; }
.buchungsverwaltung .verwaltung-ersatzgruppe + .verwaltung-ersatzgruppe { margin-top: 2rem; }
.buchungsverwaltung .verwaltung-ersatzgruppe-kopf { background: var(--hintergrund); border-bottom: 1px solid var(--rand); padding: .85rem .75rem; }
.buchungsverwaltung .verwaltung-ersatzgruppe-kopf h3 { margin: 0; font-size: .9375rem; }
.buchungsverwaltung .verwaltung-ersatzgruppe-kopf p { margin: .3rem 0 0; font-size: .8125rem; color: var(--text-ruhig); }

.buchungsverwaltung .verwaltung-ohne-ersatz { display: flex; flex-wrap: wrap; gap: .5rem; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th,
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td { padding: .4rem .75rem; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:first-child,
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:first-child { width: 4rem; text-align: center; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:nth-child(2),
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:nth-child(2) { width: auto; white-space: normal; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:nth-child(3),
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:nth-child(3),
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:last-child,
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle td:last-child { width: 8rem; text-align: left; white-space: nowrap; }
.buchungsverwaltung #verwaltung-ersatzaktionen input[type=radio] { margin: 0; vertical-align: middle; }
.buchungsverwaltung #verwaltung-ersatzaktionen label { cursor: pointer; }
.buchungsverwaltung #verwaltung-ersatzaktionen .verwaltung-stornotabelle th:first-child { white-space: nowrap; width: 4.75rem; }

/* Ruhige, kompakte Kursübersicht je Person. */
.buchungsverwaltung .verwaltung-person-kopf { justify-content: flex-start; gap: .75rem; padding: .85rem 1rem; }
.buchungsverwaltung .verwaltung-person-kopf h3 { color: var(--dunkelblau); font-size: 1rem; margin: 0; }
.buchungsverwaltung .verwaltung-person-anzahl { color: var(--text-ruhig); font-size: .8125rem; margin-left: auto; text-align: right; }
.verwaltung-person-tabellenrahmen { overflow-x: auto; }
.verwaltung-person-tabelle { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.verwaltung-person-tabelle th { background: var(--hero-hintergrund); text-align: left; font-weight: 400; }
.verwaltung-person-tabelle th, .verwaltung-person-tabelle td { padding: .65rem 1rem; vertical-align: top; border-bottom: 1px solid var(--rand); }
.verwaltung-person-tabelle th:nth-child(2), .verwaltung-person-tabelle td:nth-child(2), .verwaltung-person-tabelle th:nth-child(3), .verwaltung-person-tabelle td:nth-child(3) { width: 7rem; white-space: nowrap; }
.verwaltung-person-tabelle th:last-child, .verwaltung-person-tabelle td:last-child { width: 17rem; }
.verwaltung-person-tabelle .verwaltung-kursname { font-size: .875rem; font-weight: 400; }
.buchungsverwaltung .verwaltung-person-tabelle .verwaltung-frist { margin: .25rem 0 0; font-size: .75rem; }
.verwaltung-person-tabelle .verwaltung-aktionen { margin: 0; gap: .3rem .8rem; }
.verwaltung-person-tabelle .verwaltung-aktionen .buchung-textbutton { padding: 0; }
.buchungsverwaltung .verwaltung-person-hinweise { padding: .75rem 1rem; }

/* Kurswechsel: Namen und Starttermine stehen in gemeinsamen Spalten. */
.buchungsverwaltung .verwaltung-dialog-wechsel { width: calc(100% - 2rem); max-width: 54rem; }
#verwaltung-wechselvergleich { margin: 1rem 0 1.5rem; overflow-x: auto; }
.verwaltung-wechsel-tabelle { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; line-height: 1.5; text-align: left; }
.verwaltung-wechsel-tabelle th, .verwaltung-wechsel-tabelle td { padding: .65rem .75rem; vertical-align: top; font-weight: 400; }
.verwaltung-wechsel-tabelle tbody th, .verwaltung-wechsel-tabelle tbody td { background: #f5f4f1; background-clip: padding-box; }
.verwaltung-wechsel-tabelle tbody tr:first-child > * { border-top: .85rem solid transparent; padding-top: .85rem; padding-bottom: .4rem; }
.verwaltung-wechsel-tabelle tbody tr:last-child > * { padding-top: .4rem; padding-bottom: .85rem; }
.verwaltung-wechsel-tabelle tbody tr:last-child > :first-child { border-bottom-left-radius: .45rem; }
.verwaltung-wechsel-tabelle tbody tr:last-child > :last-child { border-bottom-right-radius: .45rem; }
.verwaltung-wechsel-tabelle tbody th { color: #53627b; }
.verwaltung-wechsel-tabelle th:first-child { width: 4rem; }
.verwaltung-wechsel-tabelle th:nth-child(n+3), .verwaltung-wechsel-tabelle td:nth-child(n+3) { width: 1%; white-space: nowrap; }
@media (max-width: 40rem) {
 .verwaltung-wechsel-tabelle th, .verwaltung-wechsel-tabelle td { padding: .5rem .4rem; }
 .verwaltung-wechsel-tabelle { min-width: 30rem; }
}

.verwaltung-wechsel-neu { display: inline-block; padding: .05rem .4rem; margin-left: -.4rem; color: var(--orange-dunkel); background: var(--orange-flaeche); border-left: 3px solid var(--orange); border-radius: .15rem; }
.verwaltung-wechsel-tabelle thead { background: var(--hero-hintergrund); color: var(--text-ruhig); }
.verwaltung-wechsel-tabelle thead th { padding-top: .65rem; padding-bottom: .65rem; }

.verwaltung-storno-tabelle th:first-child { width: 8rem; white-space: nowrap; }
.verwaltung-storno-tabelle tbody tr + tr > * { border-top: 1px solid #e5e1da; }
.verwaltung-storno-tabelle tbody tr:first-child > * { padding-bottom: .65rem; }
.verwaltung-storno-tabelle tbody tr:last-child > * { padding-top: .65rem; }

/* Geldbeträge immer mit gemeinsamer rechter Kante und gleich breiten Ziffern. */
.buchung-betrag, .buchung-preistabelle th:nth-child(n+3), .buchung-preistabelle td:nth-child(n+3), .buchung-preistabelle tfoot td {
 text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Betragsspalte bleibt beim Label; die gemeinsame rechte Kante liegt nicht am Dialogrand. */
.buchungsverwaltung .kontaktliste dd.buchung-betrag { width: 7rem; max-width: 100%; justify-self: start; }
.buchungsverwaltung #verwaltung-preisfeld:not([hidden]) { margin-top: 1.25rem; }
/* Stornierungsliste wie die Kursauswahl: weiße Zeilen unter hellem Tabellenkopf. */
.verwaltung-storno-tabelle tbody th, .verwaltung-storno-tabelle tbody td { background: #fff; }
.verwaltung-storno-tabelle tbody tr:first-child > * { border-top: 0; }
.verwaltung-storno-tabelle tbody tr + tr > * { border-top-color: var(--rand); }

.buchungsverwaltung .verwaltung-dialog-person .kontaktliste { --buchung-labelbreite: 11rem; }
.verwaltung-dialog-person #verwaltung-dialogzahlung { white-space: pre-line; }

/* Storno-Abrechnung: gemeinsame, ungekürzte Labelspalte vor den Beträgen. */
.buchungsverwaltung .verwaltung-dialog-storno #verwaltung-dialogdetails {
 display: grid;
 grid-template-columns: max-content 7rem;
 gap: .5rem var(--buchung-spaltenabstand);
 max-width: 100%;
 overflow-x: auto;
}
.buchungsverwaltung .verwaltung-dialog-storno #verwaltung-dialogdetails > div { display: contents; }
.buchungsverwaltung .verwaltung-dialog-storno #verwaltung-dialogdetails dt { white-space: nowrap; }

.buchungsverwaltung #verwaltung-dialogdetails[hidden], .buchungsverwaltung #verwaltung-stornoabrechnung[hidden] { display: none; }

.verwaltung-abrechnungsvergleich { overflow-x: auto; margin: 1rem 0; }
.verwaltung-abrechnungstabelle { width: 100%; border-collapse: collapse; font-size: .8125rem; line-height: 1.5; text-align: left; }
.verwaltung-abrechnungstabelle caption { text-align: left; color: var(--dunkelblau); margin-bottom: .65rem; }
.verwaltung-abrechnungstabelle th, .verwaltung-abrechnungstabelle td { padding: .65rem .75rem; font-weight: 400; vertical-align: top; }
.verwaltung-abrechnungstabelle thead { background: var(--hero-hintergrund); color: var(--text-ruhig); }
.verwaltung-abrechnungstabelle thead th:not(:first-child) { text-align: right; min-width: 8rem; }
.verwaltung-abrechnungstabelle tbody th { color: #53627b; white-space: nowrap; }
.verwaltung-abrechnungstabelle tbody td { color: var(--dunkelblau); }
.verwaltung-abrechnungstabelle tbody tr + tr > * { border-top: 1px solid var(--rand); }
.verwaltung-abrechnungstabelle .verwaltung-abrechnung-summe > * { padding-top: .9rem; padding-bottom: .9rem; background: var(--hero-hintergrund); color: var(--dunkelblau); font-weight: 600; }

/* Einheitliche Fließtexte im Bestätigungsdialog. */
.buchungsverwaltung #verwaltung-bestaetigungsdialog .website-dialog-inhalt p,
.buchungsverwaltung #verwaltung-bestaetigungsdialog #verwaltung-grundfeld > span,
.buchungsverwaltung #verwaltung-bestaetigungsdialog #verwaltung-preistext {
 font-size: .9375rem;
 line-height: 1.58;
 color: var(--text);
 font-weight: 400;
}

/* Stornierungsprüfung: gleiche Inhaltsschrift wie die Kursnamen, kompakte Tabellen. */
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno .website-dialog-inhalt,
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno .website-dialog-inhalt :is(p, label, label > span, table, th, td, caption, textarea, button) {
 font-size: .8125rem;
 line-height: 1.5;
 color: var(--text);
}
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno :is(.verwaltung-wechsel-tabelle, .verwaltung-abrechnungstabelle) :is(th, td) {
 padding-top: .35rem;
 padding-bottom: .35rem;
}
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno .website-dialog-inhalt p { margin-top: .65rem; margin-bottom: .65rem; }
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno #verwaltung-wechselvergleich { margin-bottom: .85rem; }
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno .verwaltung-abrechnungsvergleich { margin: .75rem 0; }

/* Dezente Tabellenbeschriftungen bei unveränderter kompakter Schriftgröße. */
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno :is(.verwaltung-wechsel-tabelle, .verwaltung-abrechnungstabelle) thead th { color: var(--text-ruhig); }
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno :is(.verwaltung-wechsel-tabelle, .verwaltung-abrechnungstabelle) tbody th { color: #53627b; }
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno .verwaltung-abrechnungstabelle .verwaltung-abrechnung-summe > * { color: var(--dunkelblau); }

.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno #verwaltung-grundfeld > span,
.buchungsverwaltung #verwaltung-bestaetigungsdialog.verwaltung-dialog-storno #verwaltung-preistext {
 font-size: .8125rem;
 line-height: 1.5;
}

/* Die sichtbare Pflichtkennzeichnung folgt denselben Attributen wie die Formularprüfung. */
.buchung-feld:has(input[required]:not(:disabled), select[required]:not(:disabled), textarea[required]:not(:disabled)) > span:first-child::after,
.buchung-auswahl:has(input[required]:not(:disabled)) > legend::after {
    content: " *";
    color: #b42318;
}
.buchung-pflichtinfo { color: var(--text-ruhig); font-size: .75rem; margin: 0 0 .75rem; }
.buchung-pflichtinfo > span { color: #b42318; }

/* Gleicher rechter Symbolabstand wie beim Datumsfeld. */
.buchung select {
    appearance: none;
    background-image: url('../bilder/auswahl-pfeil.svg?v=20261019-dreieck');
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem 1rem;
    padding-right: 2.25rem;
}

/* Preise gehören zur jeweiligen Kurszeile; Datum und Preis rechtsbündig. */
.buchung-preistabelle { min-width: 28rem; table-layout: auto; }
.buchung-preistabelle th:nth-child(n+2),
.buchung-preistabelle td:nth-child(n+2) { padding-left: 1.25rem; padding-right: 0; }
.buchung-preistabelle thead th:nth-child(2),
.buchung-preistabelle .buchung-preiskurszeile td:nth-child(2) { text-align: right; }
.buchung-preistabelle thead th:nth-child(3),
.buchung-preistabelle .buchung-preiskurszeile td:nth-child(3) { padding-left: 2rem; }
.buchung-preistabelle .buchung-preisperson th { padding-bottom: .15rem; border-bottom: 0; }
.buchung-preistabelle .buchung-preiskurszeile td { padding-top: .3rem; }
.buchung-preistabelle .buchung-preiskurszeile td:first-child { white-space: normal; overflow: visible; }
.buchung-feld > .buchung-bedingungen-auswahl { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .5rem; align-items: start; }
.buchung-feld[for="buchungsbedingungen-akzeptiert"] input[type="checkbox"] { margin: .15rem 0 0; }
.buchung-feld[for="buchungsbedingungen-akzeptiert"] { align-items: start; }
.buchung-feld[for="buchungsbedingungen-akzeptiert"] > span:first-child { white-space: nowrap; line-height: 1.5; }
@media (max-width: 600px) {
    .buchung [data-schritt="2"] .buchung-feld { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
}

/* Beschriftung an der ersten Eingabezeile statt mittig am Textfeld. */
.buchung-feld[for="mitteilung"] { align-items: start; }
.buchung-feld[for="mitteilung"] > span:first-child { padding-top: .5rem; }
@media (max-width: 600px) {
    .buchung-feld[for="mitteilung"] > span:first-child { padding-top: 0; }
}

.buchung-telefon { white-space: nowrap; }

.verwaltung-dialog-person .kontaktliste > .verwaltung-person-abstand { margin-top: 1rem; }

.buchungsverwaltung .verwaltung-ersatzperson { margin-top: 1.5rem; }
/* Gleiche Label- und Wertespalten in Bestand und Ersatzperson. */
.verwaltung-personraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
.buchungsverwaltung .verwaltung-personraster .buchung-feld { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--buchung-spaltenabstand); align-items: center; margin: 0; }
.buchungsverwaltung .verwaltung-personraster .buchung-feld > span { padding-top: 0; }
.buchungsverwaltung #verwaltung-bisher { --buchung-labelbreite: 11rem; margin: 0; }
@media (max-width: 600px) {
    .buchungsverwaltung .verwaltung-personraster .buchung-feld,
    .buchungsverwaltung #verwaltung-bisher > div { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
}

/* Teilnehmerübersicht: warme Website-Flächen statt bläulicher Tabellenflächen. */
.buchungsverwaltung .verwaltung-person { border-color: #e5e1da; background: var(--flaeche); }
.verwaltung-person-tabelle th, .verwaltung-person-tabelle td, .verwaltung-person-hinweise { border-color: #e5e1da; }

.buchungsverwaltung { --hintergrund: var(--hero-hintergrund); --rand: #e5e1da; }
.buchungsverwaltung .kursauswahl-kategorie, .verwaltung-auswahl-popup .kursauswahl-kategorie { background: #e5e1da; color: var(--dunkelblau); }
.buchungsverwaltung .kursauswahl-kopf, .verwaltung-auswahl-popup .kursauswahl-kopf { background: var(--hero-hintergrund); }

.buchungsverwaltung .verwaltung-personraster .buchung-feld + .buchung-feld { border-top: 1px solid var(--rand); padding-top: .5rem; }

.buchungsverwaltung .verwaltung-kontakt { background: var(--flaeche); }
.verwaltung-kontakt > summary { cursor: pointer; font-size: 1rem; }
.buchungsverwaltung .verwaltung-kontakt .buchung-feld { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; margin: 0; }
.buchungsverwaltung .verwaltung-kontakt .buchung-feld > span { padding-top: 0; }
.verwaltung-kontakt .buchung-feld + .buchung-feld { border-top: 1px solid var(--rand); margin-top: .8rem; padding-top: .8rem; }
.verwaltung-kontakt-fuss { display: flex; justify-content: flex-end; background: var(--hero-hintergrund); }
@media (max-width: 600px) {
    .buchungsverwaltung .verwaltung-kontakt .buchung-feld { grid-template-columns: minmax(0, 1fr); row-gap: .4rem; }
}

/* Buchungsverwaltung: Übersicht und geführte Änderungen in getrennten Bereichen. */
.rechtliches-hero.verwaltung-hero { min-height: 0; }
.verwaltung-hero .rechtliches-hero-inhalt { padding-top: 2rem; padding-bottom: 2rem; min-height: 0; }
.verwaltung-hero h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.verwaltung-register { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; border-bottom: 2px solid var(--orange); padding-bottom: .5rem; }
.verwaltung-register button { padding: .8rem 1.1rem; border: 1px solid var(--rand); border-radius: .4rem .4rem 0 0; background: var(--hero-hintergrund); color: var(--dunkelblau); font: inherit; cursor: pointer; }
.verwaltung-register button[aria-current] { background: #e5e1da; box-shadow: inset 0 -3px var(--orange); font-weight: 600; }
.verwaltung-register button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
#verwaltung-uebersichtliste { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
#verwaltung-uebersichtliste .verwaltung-person-tabelle th:last-child,
#verwaltung-uebersichtliste .verwaltung-person-tabelle td:last-child { width: 7rem; }
#verwaltung-kontaktbereich > p, #verwaltung-aendern > p, #verwaltung-uebersicht > p { margin: 0 0 1rem; }
.buchungsverwaltung [hidden] { display: none !important; }
@media(max-width:600px) { .verwaltung-register { display: grid; grid-template-columns: 1fr 1fr; } .verwaltung-register button { padding: .75rem .4rem; } }

.verwaltung-hero .rechtliches-hero-bild { max-height: 10rem; aspect-ratio: auto; }
#verwaltung-aendern .verwaltung-person-tabelle th:last-child,
#verwaltung-aendern .verwaltung-person-tabelle td:last-child:not([colspan]) { width: 0; padding: 0; }
#verwaltung-aendern .verwaltung-person-tabelle th:last-child { font-size: 0; }
.verwaltung-auswahlreihe .verwaltung-aktionen { display: flex; flex-wrap: wrap; gap: .75rem; padding: .25rem 0; }

.buchungsverwaltung .kursauswahl-ausloeser::after { content: ''; width: 1rem; height: 1rem; background: url('../bilder/auswahl-pfeil.svg?v=20261019-dreieck') center / contain no-repeat; }

.buchungsverwaltung .verwaltung-assistent-fuss { margin-top: 0; background: var(--hero-hintergrund); border-radius: 0 0 var(--radius) var(--radius); }

#verwaltung-status:empty { margin: 0; }
#verwaltung-buchungstitel { overflow-wrap: anywhere; }

.verwaltung-buchungskopf { display: block; }

.buchungsverwaltung #verwaltung-kopfdaten { margin: .65rem 0 0; font-size: .875rem; }
.buchungsverwaltung #verwaltung-kopfdaten > div { grid-template-columns: 9rem minmax(0,1fr); }
@media(max-width:600px) { .verwaltung-kopftrenner { display: none; } .buchungsverwaltung #verwaltung-kopfdaten { flex-basis: 100%; } }

.buchungsverwaltung #verwaltung-kopfdaten > div + div { border-top: 0; margin-top: .25rem; padding-top: 0; }

.verwaltung-kopftitelzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .35rem 1rem; }
.buchungsverwaltung .verwaltung-kopftitelzeile .verwaltung-frist { margin: 0; font-weight: 400; }

/* Gleicher Abstand vom Kartenkopf zum Hinweis und vom Hinweis zu den Registern. */
.buchungsverwaltung > .kursdetail-karte > .kursdetail-inhalt { padding-top: 1.25rem; }
.buchungsverwaltung #verwaltung-widerrufsbox { margin-top: 0; margin-bottom: 1.25rem; }

/* Ersatzbuchung verwendet dieselben Karten und Labelspalten wie Buchung verwalten. */
.ersatzbuchung { --buchung-labelbreite: 11rem; }
.ersatzbuchung .kontaktliste { margin: 0; }
.ersatzbuchung .formular-hinweisbox { margin: 0 0 1.25rem; }
.ersatzbuchung .kursdetail-inhalt > .kursdetail-karte:last-child { margin-bottom: 0; }
.ersatzbuchung .ersatz-abschluss { display: grid; gap: 1rem; }
.ersatz-pruefung { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; }
.ersatz-pruefung input { flex: 0 0 auto; margin: .2rem 0 0; }
.ersatz-aktionen { display: flex; justify-content: flex-end; }
.ersatzbuchung #ersatz-geburtsdatum { max-width: 13rem; }
@media (max-width: 600px) {
    .ersatz-aktionen .button { width: 100%; white-space: normal; }
}

.ersatz-kursauswahl .kursauswahl-kopf, .ersatz-kursauswahl .kursauswahl-option { grid-template-columns: minmax(12rem, 1fr) 7rem 8rem; }
.ersatz-kursauswahl .kursauswahl-spalte-1 { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ersatz-kursauswahl .kursauswahl-kopf > :last-child { text-align: left; }
@media (max-width: 600px) {
 .ersatz-kursauswahl .kursauswahl-option { grid-template-columns: minmax(0, 1fr) 7rem; }
}