/*
    Modernes Design der Gutachten-Ansicht (Bericht/Stellungnahme) und der Datenaufnahmeblätter.

    Alles ist auf die Klasse ".gta" begrenzt - andere Seiten der App sind nicht betroffen:
      - Gutachten-Seite:        FCGutachten.razor setzt "gta" auf den Seiteninhalt
      - Datenaufnahmeblätter:   GutachtenStyleScopeRenderer setzt "gta" um den Dialoginhalt
      - Dialoge:                solange ein ".gta" angezeigt wird, gelten Felder, Karten, Buttons und Tabellen
                                auch in den Dialogen darüber (z.B. Kalkulationsposition, Zeitwert berechnen)
    Dialoge und Auswahllisten (Popover) werden von MudBlazor an der Seitenwurzel gerendert und deshalb über
    "body:has(.gta)" angesprochen.

    Es werden nur Theme-Farben (var(--mud-palette-*)) verwendet, damit das Design zur Marke passt.
*/

/* Variablen auch an der Seitenwurzel, damit sie in Dialogen und Auswahllisten (außerhalb von ".gta") gelten */
.gta,
body:has(.gta) {
    --gta-radius: 12px;
    --gta-border: var(--fc-border);
    --gta-shadow: var(--fc-shadow-panel);
    --gta-tint: var(--fc-primary-tint);
}

/* ============================================================ Kopfbereich (GutachtenHeader) */

.gta-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--gta-border);
    border-radius: 16px;
    background-color: var(--mud-palette-surface);
    box-shadow: var(--gta-shadow);
    margin-top: 12px;
    margin-bottom: 6px;
    border-top: 2px solid color-mix(in srgb, var(--mud-palette-primary) 28%, #fff);
}

.gta-header__top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
}

.gta-header__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-secondary)));
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.gta-header__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.gta-header__kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.gta-header__title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
}

.gta-header__title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1d2433;
}

.gta-header__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--gta-border);
    background-color: var(--mud-palette-background-gray, #f5f5f5);
}

.gta-header__status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--mud-palette-tertiary);
}

.gta-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.gta-header__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding-top: 14px;
    border-top: 1px solid var(--gta-border);
}

.gta-fact {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.gta-fact .gta-fact__icon {
    color: var(--mud-palette-primary);
    opacity: 0.85;
}

.gta-fact__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gta-fact__label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.gta-fact__value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1d2433;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

/* Kompakter Kopf: eine Zeile, "Details" klappt die Auftragsdaten auf */
.gta-header {
    gap: 0;
    padding: 10px 14px;
    margin-top: 8px;
    margin-bottom: 4px;
}

.gta-header__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.gta-header__title {
    font-size: 1.125rem;
}

.gta-header__actions {
    align-items: center;
}

.gta-header__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--gta-border);
    border-radius: 10px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: background-color 0.15s;
}

.gta-header__toggle:hover {
    background-color: var(--gta-tint);
}

/* Pinnadel: angeheftet gefüllt und in Markenfarbe, sonst leicht schräg wie eine lose Nadel */
.gta-header__pin {
    transform: rotate(35deg);
    transition: transform 0.2s;
}

.gta-header__toggle--pinned {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
    color: var(--mud-palette-primary);
    background-color: var(--gta-tint);
}

.gta-header__toggle--pinned .gta-header__pin {
    transform: none;
}

.gta-header--expanded .gta-header__facts {
    margin-top: 12px;
}

.gta-header__save.mud-button-root {
    height: 36px;
    border-radius: 10px;
    text-transform: none;
    font-weight: 600;
    box-shadow: none;
}

/* Auftragsdaten nur über "Details" (Pinnadel), dann in einer eigenen Zeile unter dem Titel */
.gta-header__titles {
    flex: 1 1 0;
    min-width: 0;
}

.gta-header__actions {
    flex-shrink: 0;
}

.gta-header .gta-header__facts {
    display: none;
    order: 10;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 10px 0;
    margin: 4px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--gta-border);
}

.gta-header--expanded .gta-header__facts {
    display: flex;
}

.gta-header .gta-header__facts .gta-fact {
    gap: 8px;
    padding: 0 18px 0 0;
}

.gta-header .gta-header__facts .gta-fact + .gta-fact {
    padding-left: 18px;
    border-left: 1px solid color-mix(in srgb, var(--gta-border) 60%, transparent);
}

.gta-header .gta-header__facts .gta-fact__value {
    max-width: 320px;
    font-size: 0.875rem;
}

/* Hinweis-Chip im Gutachten (z.B. "Bitte dokumentieren Sie Ihre Ankunftszeit ..."): langer Text bricht um,
   statt rechts abgeschnitten zu werden */
:is(.gta, body:has(.gta) .mud-dialog) .mud-chip {
    height: auto;
    min-height: 32px;
    max-width: 100%;
    padding-block: 6px;
    white-space: normal;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-chip .mud-chip-content {
    white-space: normal;
    line-height: 1.4;
}

/* ============================================================ Schritte (GutachtenWizardRenderer) */

/* breite Bildschirme: Navigation links, Inhalt rechts (breit genug für "Schadenschlusserklärung") */
.gtw {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.gtw-step__btn {
    min-width: 0;
}

.gtw-step__label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gtw-picker {
    display: none;
}

.gtw-nav {
    position: sticky;
    top: 12px;
    /* nicht höher als der Platz bis zum unteren Rand (--gtw-fit, siehe .gtw-main), sonst wird die Seite scrollbar;
       längere Navigation scrollt in sich */
    max-height: min(calc(100vh - 24px), var(--gtw-fit, calc(100vh - 24px)));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--gta-border);
    border-radius: 16px;
    background-color: var(--mud-palette-surface);
    box-shadow: var(--gta-shadow);
}

.gtw-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gtw-step__btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    color: var(--mud-palette-text-primary);
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.gtw-step__btn:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.gtw-step--active > .gtw-step__btn {
    color: var(--mud-palette-primary);
    background-color: var(--gta-tint);
}

.gtw-num {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background-color: color-mix(in srgb, var(--mud-palette-text-secondary) 70%, #fff);
}

.gtw-num--active {
    background-color: var(--mud-palette-primary);
}

/* Abschnitte des aktuellen Schritts, eingerückt mit Linie */
.gtw-sections {
    margin: 2px 0 6px 21px;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--gta-border);
}

.gtw-section {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    margin-left: -2px;
    padding: 7px 10px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--mud-palette-text-secondary);
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.gtw-section:hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.gtw-section--active {
    border-left-color: var(--mud-palette-primary);
    font-weight: 700;
    color: var(--mud-palette-primary);
    background-color: var(--gta-tint);
}

.gtw-section--active:hover {
    color: var(--mud-palette-primary);
    background-color: var(--gta-tint);
}

/* Der Inhaltsbereich reicht genau bis zum unteren Rand des sichtbaren Bereichs: Zurück/Weiter steht damit immer
   unten, egal wie kurz der Inhalt eines Schritts ist (bei langem Inhalt bleibt die Leiste unten fixiert, siehe
   .gtw-actions). Die Höhe berechnet wwwroot/js/gutachtenWizard.js (--gtw-fit) - ein fester Wert machte die Seite
   ohne Grund scrollbar, weil die Bereiche darüber je nach Seite verschieden hoch sind. */
.gtw-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: var(--gtw-fit, 0px);
}

.gtw-main__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.gtw-main__body {
    margin-bottom: 14px;
    animation: gts-section-in 0.28s ease-out;
}

/* Abschnitte im Wizard: die Navigation steht links im Wizard, hier nur der Inhalt */
.gts--embedded {
    display: block;
}

/* Zurück/Weiter: fest am unteren Rand */
.gtw-actions {
    position: sticky;
    bottom: 8px;
    /* über dem unsichtbaren Datei-Input der Upload-Felder (MudFileUpload, z-index 10/20), sonst öffnet ein Klick auf Weiter den Dateidialog */
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 6px 8px;
    /* deutlich vom Inhalt darunter abgesetzt: deckender Grund, kräftigerer Rahmen und Schatten nach oben */
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 22%, var(--gta-border));
    border-radius: 14px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 -6px 18px -8px rgba(16, 24, 40, 0.28), 0 4px 14px -6px rgba(16, 24, 40, 0.22);
}

.gtw-actions__position {
    flex: 1 1 auto;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.gtw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--gta-border);
    border-radius: 10px;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    cursor: pointer;
    transition: background-color 0.15s;
}

.gtw-btn:hover:not(:disabled) {
    background-color: var(--gta-tint);
}

.gtw-btn:disabled {
    cursor: default;
    opacity: 0.45;
}

.gtw-btn--primary {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

.gtw-btn--primary:hover:not(:disabled) {
    background-color: var(--mud-palette-primary-darken);
}

.gtw-btn__text {
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Den Platz am Seitenende für die Bubble (casepilot.css) braucht es mit Zurück/Weiter-Leiste nicht - die Bubble sitzt
   darüber; sonst bliebe unter der Leiste leerer, scrollbarer Raum */
body:has(.cpi) .gta:has(.gtw-actions) {
    padding-bottom: 0;
}

/* CasePilot-Bubble wie überall unten rechts, nur knapp über der Zurück/Weiter-Leiste, damit sie "Weiter" nicht verdeckt */
body:has(.gtw-actions) .cpi {
    bottom: 80px;
}

/* Werkzeuge unter den Schritten (z.B. Sprachassistent): kleine Buttons untereinander, abgesetzt durch eine Linie */
.gtw-tools {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 12px 4px 2px;
    border-top: 1px solid var(--gta-border);
}

.gtw-tools__title {
    padding: 0 6px 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* die Hülle des Framework-Aktionsbereichs ordnet die Buttons sonst nebeneinander an */
.gtw-tools *:has(> [data-def="ActionInputDefinition"]),
.gtw-tools *:has(> * > [data-def="ActionInputDefinition"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px;
    width: 100%;
    min-height: 0;
    padding: 0;
}

.gtw-tools [data-def="ActionInputDefinition"] {
    width: 100%;
    min-width: 0 !important;
    max-width: none !important;
}

.gtw-tools .mud-button-root {
    width: 100%;
    justify-content: flex-start;
    min-height: 34px;
    padding: 4px 12px;
    border-radius: 9px;
    box-shadow: none;
}

.gtw-tools .mud-button-root .mud-typography {
    font-size: 0.8125rem;
    white-space: normal;
    text-align: left;
}

.gtw-tools .mud-button-icon-start {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* Navigation als Blatt von unten (schmale Bildschirme) */
.gtw-sheet-bg {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background-color: rgba(16, 24, 40, 0.45);
    animation: gtw-fade-in 0.2s ease-out;
}

.gtw-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1301;
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    border-radius: 18px 18px 0 0;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 -12px 40px -12px rgba(16, 24, 40, 0.4);
    animation: gtw-sheet-in 0.25s ease-out;
}

.gtw-sheet__grip {
    width: 40px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 4px;
    background-color: var(--gta-border);
}

.gtw-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 14px 10px;
    border-bottom: 1px solid var(--gta-border);
    font-size: 1rem;
    font-weight: 700;
}

.gtw-sheet__body {
    overflow-y: auto;
    padding: 8px 8px max(14px, env(safe-area-inset-bottom));
}

.gtw-iconbtn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--gta-border);
    border-radius: 9px;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    cursor: pointer;
}

@keyframes gtw-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gtw-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
}

/* Breite Bildschirme: das Analyseprotokoll neben den Schritten bekommt eine feste Spalte, statt sich nach der
   Länge seiner Texte auszudehnen und die Schritte zusammenzudrücken */
@media (min-width: 1280px) {
    .gta [data-def="StackLayoutDefinition"]:has(> [data-def="GutachtenWizardDefinition"]) > [data-def="FormDefinition"] {
        flex: 0 0 400px;
        width: 400px;
        min-width: 0;
    }
}

/* Tablet und Handy: das Analyseprotokoll des Sprachassistenten (neben den Schritten, GutachtenBuilder) steht unter
   den Schritten statt daneben - nebeneinander wurden beide unbrauchbar schmal */
@media (max-width: 1279.98px) {
    .gta [data-def="StackLayoutDefinition"]:has(> [data-def="GutachtenWizardDefinition"]) {
        flex-direction: column !important;
    }

    .gta [data-def="StackLayoutDefinition"]:has(> [data-def="GutachtenWizardDefinition"]) > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Tablet und Handy: Knopf mit aktuellem Schritt statt Navigation links - so haben Listen (z.B. Geräte, Kalkulation)
   die volle Breite; mit Navigation links blieben auf dem Tablet für die Tabelle nur wenige Spalten sichtbar */
@media (max-width: 1279.98px) {
    .gtw {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .gtw-nav {
        display: none;
    }

    .gtw-picker {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--gta-border);
        border-radius: 14px;
        font: inherit;
        text-align: left;
        color: var(--mud-palette-text-primary);
        background-color: var(--mud-palette-surface);
        box-shadow: var(--gta-shadow);
        cursor: pointer;
    }

    .gtw-picker__text {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }

    .gtw-picker__title {
        font-size: 0.9375rem;
        font-weight: 700;
    }

    .gtw-picker__sub {
        overflow: hidden;
        font-size: 0.75rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: var(--mud-palette-text-secondary);
    }

    .gtw-picker__bars {
        display: flex;
        flex-shrink: 0;
        gap: 3px;
    }

    .gtw-picker__bars i {
        width: 6px;
        height: 16px;
        border-radius: 3px;
        background-color: var(--gta-border);
    }

    .gtw-picker__bars i.is-before {
        background-color: color-mix(in srgb, var(--mud-palette-primary) 35%, #fff);
    }

    .gtw-picker__bars i.is-active {
        background-color: var(--mud-palette-primary);
    }

    .gtw-actions {
        bottom: 0;
        margin-inline: -4px;
        border-radius: 14px 14px 0 0;
    }

    body:has(.gtw-actions) .cpi {
        bottom: 68px;
    }

    .gtw-actions__position {
        display: none;
    }

    .gtw-btn--primary {
        flex: 1 1 auto;
    }

    .gtw-btn--primary .gtw-btn__text {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .gtw-btn:not(.gtw-btn--primary) .gtw-btn__text,
    .gta-header__toggle-text,
    .gta-header__kicker {
        display: none;
    }

    .gtw-btn:not(.gtw-btn--primary) {
        width: 44px;
        padding: 0;
    }

    .gta-header__toggle {
        padding: 0 6px 0 10px;
    }

    /* Kopf auf dem Handy in einer Zeile: Icon, Titel mit Speicherstand darunter, Details und Speichern als Symbole */
    .gta-header__top {
        gap: 10px;
    }

    .gta-header .gta-header__facts .gta-fact,
    .gta-header .gta-header__facts .gta-fact + .gta-fact {
        flex: 1 1 45%;
        padding: 0;
        border-left: 0;
    }

    .gta-header__icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    .gta-header__titles {
        flex: 1 1 auto;
    }

    .gta-header__title {
        overflow: hidden;
        font-size: 1rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .gta-header__title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .gta-header__status {
        max-width: 100%;
        overflow: hidden;
        padding: 0;
        border: 0;
        font-size: 0.6875rem;
        text-overflow: ellipsis;
        background: none;
    }

    .gta-header__actions {
        flex-shrink: 0;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .gta-header__save.mud-button-root {
        min-width: 0;
        padding: 0 10px;
    }

    .gta-header__save .mud-button-label {
        font-size: 0;
    }

    .gta-header__save .mud-button-icon-start {
        margin: 0;
    }

    .gta-header__save .mud-icon-root {
        font-size: 1.25rem;
    }
}

/* ============================================================ Abschnittsnavigation (GutachtenSectionsRenderer) */

.gts {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

.gts-nav {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 236px;
    padding: 10px;
    border: 1px solid var(--gta-border);
    border-radius: 16px;
    background-color: var(--mud-palette-surface);
    box-shadow: var(--gta-shadow);
}

.gts-nav__item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    position: relative;
    padding: 10px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: left;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.gts-nav__item:hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-action-default-hover);
    transform: translateX(2px);
}

.gts-nav__item:focus {
    outline: none;
}

.gts-nav__item:focus-visible {
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.gts-nav__item--active,
.gts-nav__item--active:hover {
    color: var(--mud-palette-primary);
    background: linear-gradient(90deg, color-mix(in srgb, var(--mud-palette-primary) 14%, transparent), color-mix(in srgb, var(--mud-palette-primary) 4%, transparent));
    font-weight: 600;
    transform: none;
}

/* Akzentbalken am aktiven Abschnitt */
.gts-nav__item--active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background-color: var(--mud-palette-primary);
}

.gts-nav__icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.gts-nav__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gts-panel {
    flex: 1 1 auto;
    min-width: 0;
}

/* Sanftes Einblenden beim Wechsel des Abschnitts (der Inhalt wird pro Abschnitt neu erzeugt) */
.gts-panel__body {
    animation: gts-section-in 0.28s ease-out;
}

@keyframes gts-section-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

.gts-panel__actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* ============================================================ Eingabefelder: weiße Boxen, Label fix darüber */

:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control {
    margin-top: 2px;
    margin-bottom: 6px;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text {
    margin-top: 30px; /* Platz für das Label darüber, inkl. Fokus-Ring */
    min-height: 42px;
    padding: 0 14px;
    font-size: 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text::before,
:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text::after {
    display: none;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text:hover:not(.mud-disabled) {
    border-color: #98a2b3;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text.mud-input-error {
    border-color: var(--mud-palette-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text.mud-disabled {
    background-color: var(--mud-palette-action-disabled-background);
    box-shadow: none;
}

/* Wert vertikal mittig in der Box */
:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text input,
:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text .mud-select-input {
    padding-top: 10px;
    padding-bottom: 10px;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    transition: color 0.15s;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text:focus-within .mud-input-adornment .mud-icon-root {
    color: var(--mud-palette-primary);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input-label.mud-input-label-text {
    top: 0;
    transform: none !important;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: #344054;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control:focus-within .mud-input-label.mud-input-label-text {
    color: var(--mud-palette-primary);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control.mud-input-error .mud-input-label.mud-input-label-text,
:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control .mud-input-label.mud-input-error {
    color: var(--mud-palette-error);
}

/* Datum + Uhrzeit nebeneinander: kleiner Abstand zwischen den beiden Feldern */
:is(.gta, body:has(.gta) .mud-dialog) .ps-date-time {
    gap: 8px !important;
}

/* Mehrzeilige Felder wachsen mit dem Inhalt; Höhe begrenzen und innen scrollen */
:is(.gta, body:has(.gta) .mud-dialog) .mud-input.mud-input-text textarea {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 96px;
    max-height: 320px !important;
    overflow-y: auto !important;
    resize: vertical;
}

/* ============================================================ Auswahllisten (Popover liegt an der Seitenwurzel) */

body:has(.gta) .mud-popover.mud-popover-open:has(.mud-list) {
    margin-top: 6px;
    padding: 6px;
    border-radius: 12px !important;
    border: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 80%, transparent);
    box-shadow: 0 18px 36px -14px rgba(16, 24, 40, 0.28), 0 4px 10px rgba(16, 24, 40, 0.06) !important;
    overflow-x: hidden;
    /* nur die Liste scrollt: sie hat selbst dieselbe max-height wie das Popover (z.B. 300px), mit Innenabstand
       und Rahmen wäre das Popover sonst 14px zu hoch und hätte einen zweiten Scrollbalken */
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

body:has(.gta) .mud-popover.mud-popover-open:has(.mud-list) > .mud-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

body:has(.gta) .mud-popover.mud-popover-open .mud-list {
    padding: 0;
}

body:has(.gta) .mud-popover.mud-popover-open .mud-list-item {
    min-height: 38px;
    margin: 1px 0;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9375rem;
    transition: background-color 0.12s, color 0.12s;
}

body:has(.gta) .mud-popover.mud-popover-open .mud-list-item:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
}

body:has(.gta) .mud-popover.mud-popover-open .mud-list-item.mud-selected-item {
    font-weight: 600;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* ============================================================ Formular-Abschnitte als Karten */

/* Das Framework setzt border-color inline mit !important; deshalb wird der Rahmen über border-width
   ausgeblendet und als Schatten neu gezeichnet. */
:is(.gta, body:has(.gta) .mud-dialog) .container[style*="border"] {
    border-width: 0 !important;
    border-radius: var(--gta-radius) !important;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: inset 0 0 0 1px var(--gta-border), var(--gta-shadow);
}

/* Abschnittstitel (z.B. "Besichtigungsort") */
:is(.gta, body:has(.gta) .mud-dialog) .container .mud-primary-text.mud-typography {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Karte in der Karte (z.B. Liste der Datenaufnahmeblätter im Abschnitt): nur noch eine feine Linie */
:is(.gta, body:has(.gta) .mud-dialog) .container[style*="border"] .container[style*="border"] {
    box-shadow: inset 0 0 0 1px var(--gta-border);
}

/*
    Formular nur mit Titel (z.B. "Datenaufnahme Elektronik" am Anfang eines Datenaufnahmeblatts):
    kein leerer Kasten, sondern Kopfzeile des Blatts mit Icon. Gilt nur in Datenaufnahmeblättern (".gta--scope"),
    nicht in anderen Dialogen - dort ist ein Formular mit Titel und reinem Text ein normaler Abschnitt
    (z.B. "Eingegebener Text" im KI Text Assistenten).
*/
.gta.gta--scope [data-def="FormDefinition"]:not(:has(.component-input, .mud-input-control, .mud-table, .mud-button-root, .mud-chip, .grid-item)) > .container[style*="border"] {
    padding: 4px 2px !important;
    box-shadow: none;
    background-color: transparent !important;
}

.gta.gta--scope [data-def="FormDefinition"]:not(:has(.component-input, .mud-input-control, .mud-table, .mud-button-root, .mud-chip, .grid-item)) > .container .mud-primary-text.mud-typography {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 0 !important;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1d2433 !important;
}

.gta.gta--scope [data-def="FormDefinition"]:not(:has(.component-input, .mud-input-control, .mud-table, .mud-button-root, .mud-chip, .grid-item)) > .container .mud-primary-text.mud-typography::before {
    content: "";
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 11px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 16H5V5h2v3h10V5h2v14zM7 11h10v2H7zm0 4h7v2H7z'/%3E%3C/svg%3E") center / 22px no-repeat,
        linear-gradient(135deg, var(--mud-palette-primary), color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-secondary)));
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

/* Dialog mit Karten (Datenaufnahmeblatt, Gerät, Position): der ganze Dialog - Kopf, Inhalt und Fuß - im selben
   hellen Ton, damit sich die Karten abheben und Kopf/Fuß nicht weißer sind als der Rest */
.mud-dialog:has(.gta--scope),
body:has(.gta) .mud-dialog:has(.mud-dialog-content .container[style*="border"]) {
    background-color: var(--mud-palette-background);
}

.mud-dialog:has(.gta--scope) :is(.mud-dialog-title, .mud-dialog-actions),
body:has(.gta) .mud-dialog:has(.mud-dialog-content .container[style*="border"]) :is(.mud-dialog-title, .mud-dialog-actions) {
    background-color: transparent;
}

/* Buttons im Dialogfuß: lange Beschriftungen (z.B. "Erkannte Daten uebernehmen") nicht mit "..." abschneiden -
   der Button wird bei Bedarf breiter als die feste Standardbreite */
body:has(.gta) .mud-dialog .mud-dialog-actions [data-def="ActionInputDefinition"] {
    width: auto !important;
    max-width: none !important;
}

body:has(.gta) .mud-dialog .mud-dialog-actions .mud-button-root :is(.mud-typography, .mud-button-label) {
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
}

/* Der Scroll-Schatten aus app.css deckt mit Weiß ab und ist sehr dunkel; hier im Ton des Dialogs und dezent */
.mud-dialog:has(.gta--scope) .mud-dialog-content,
body:has(.gta) .mud-dialog .mud-dialog-content:has(.container[style*="border"]) {
    background-color: var(--mud-palette-background);
    background-image:
        linear-gradient(var(--mud-palette-background), var(--mud-palette-background)),
        linear-gradient(var(--mud-palette-background), var(--mud-palette-background)),
        linear-gradient(to bottom, rgba(16, 24, 40, 0.1), rgba(16, 24, 40, 0)),
        linear-gradient(to top, rgba(16, 24, 40, 0.1), rgba(16, 24, 40, 0));
    background-size: 100% 28px, 100% 28px, 100% 10px, 100% 10px;
}

/* Karten im Dialog: nur Rahmen, kein Schlagschatten - auf dem getönten Grund wirkt er sonst schmutzig */
.mud-dialog:has(.gta--scope) .mud-dialog-content .container[style*="border"],
body:has(.gta) .mud-dialog .mud-dialog-content .container[style*="border"] {
    box-shadow: inset 0 0 0 1px var(--gta-border);
}

/* Reiter im Dialog (z.B. Gerät: "Geräte" / "Einzelposten"): Das Raster im Reiter hat rechts und unten einen
   negativen Rand von 8px, der Reiter aber nur 6px Innenabstand - dadurch ragte der Inhalt 2px hinaus und es
   erschienen Scrollbalken, obwohl nichts zu scrollen ist. */
body:has(.gta) .mud-dialog .mud-tabs-panels > .mud-tab-panel > div {
    padding: 8px !important;
}

/* Reiter im Dialog im Stil der Gutachten-Navigation: Leiste als Karte, aktiver Reiter getönt statt Unterstrich.
   Die grauen Rahmen setzt der TabLayoutRenderer (PS.Core) mit !important - deshalb hier ebenfalls !important. */
body:has(.gta) .mud-dialog .mud-tabs {
    border: 0 !important;
    box-shadow: none;
    background: transparent;
}

body:has(.gta) .mud-dialog .mud-tabs-tabbar {
    padding: 4px;
    border: 1px solid var(--gta-border) !important;
    border-radius: var(--gta-radius);
    background-color: var(--mud-palette-surface);
}

body:has(.gta) .mud-dialog .mud-tabs-tabbar .mud-tab {
    min-height: 40px;
    padding-inline: 18px;
    border-radius: 9px;
    text-transform: none;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s, color 0.15s;
}

body:has(.gta) .mud-dialog .mud-tabs-tabbar .mud-tab:hover {
    color: var(--mud-palette-text-primary);
    background-color: var(--gta-tint);
}

body:has(.gta) .mud-dialog .mud-tabs-tabbar .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary);
    background-color: var(--gta-tint);
}

body:has(.gta) .mud-dialog .mud-tabs-tabbar .mud-tab-slider {
    display: none;
}

body:has(.gta) .mud-dialog .mud-tabs-panels {
    margin-top: 4px;
    background: transparent;
}

/* Handy: Reiter teilen sich die Breite, statt einzeln mit Pfeilen durchzublättern
   (MudTabs setzt die Mindestbreite von 160px direkt am Element, deshalb !important) */
@media (max-width: 600px) {
    body:has(.gta) .mud-dialog .mud-tabs-tabbar-wrapper {
        width: 100%;
    }

    body:has(.gta) .mud-dialog .mud-tabs-tabbar-wrapper > * {
        flex: 1 1 0;
        min-width: 0;
    }

    body:has(.gta) .mud-dialog .mud-tabs-tabbar .mud-tab {
        width: 100%;
        min-width: 0 !important;
        padding-inline: 8px;
    }
}

/* ============================================================ Wizard (Schritt-Leiste) */

/* Der Stepper selbst ist nur noch ein unsichtbarer Rahmen; Schritt-Leiste und Fußleiste sind eigene Karten */
.gta .mud-stepper {
    border: 0 !important;
    border-radius: 0;
}

.gta .mud-stepper > .mud-stepper-content {
    padding: 0;
    margin: 20px 0;
    background-color: transparent;
}

.gta .mud-stepper > .mud-stepper-nav {
    padding: 6px;
    border: 1px solid var(--gta-border);
    border-radius: 16px;
    background-color: #faf9fc;
    box-shadow: 0 2px 8px -5px rgba(51, 31, 75, 0.12);
}

.gta .mud-stepper-nav .mud-step {
    border-radius: 10px;
}

.gta .mud-stepper-nav .mud-step .mud-step-label-icon {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-background-gray, #f0f1f4);
    box-shadow: inset 0 0 0 1px var(--gta-border);
}

.gta .mud-stepper-nav .mud-step .mud-step-label-content {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.gta .mud-stepper-nav .mud-step:not(.active):not(.mud-disabled):hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

.gta .mud-stepper-nav .mud-step.active {
    background-color: var(--mud-palette-surface);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), 0 3px 8px -5px rgba(51, 31, 75, 0.2);
}

.gta .mud-stepper-nav .mud-step.active .mud-step-label-icon {
    color: #fff;
    background-color: var(--mud-palette-primary);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.gta .mud-stepper-nav .mud-step.active .mud-step-label-content {
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.gta .mud-stepper-nav .mud-stepper-nav-connector-line {
    border-color: var(--gta-border);
    opacity: 0.65;
}

/* Fußleiste des Wizards (Zurück / Weiter) */
.gta .mud-stepper > .mud-stepper-actions {
    padding: 10px 14px;
    border: 1px solid var(--gta-border);
    border-radius: 16px;
    background: linear-gradient(110deg, #faf8fc, #fff 65%);
    box-shadow: var(--fc-shadow-floating);
}

.gta .mud-stepper-actions .mud-button-root.mud-button {
    padding: 8px 18px;
}

/* "Weiter" als Hauptaktion hervorheben ("Abschließen" behält seine eigene Farbe) */
.gta .mud-stepper-actions .mud-button-root.mud-button-text-default:last-child:not(:disabled) {
    color: #fff;
    background-color: var(--mud-palette-primary);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--mud-palette-primary) 70%, transparent);
}

.gta .mud-stepper-actions .mud-button-root.mud-button-text-default:last-child:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 88%, #000);
}

/* ============================================================ Akkordeon (Abschnitte auf Tablet/Handy) */

.gta .mud-expansion-panels {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gta .mud-expansion-panels > .mud-expand-panel {
    margin: 0 !important;
    border: 1px solid var(--gta-border);
    border-radius: 14px !important;
    background-color: var(--mud-palette-surface);
    box-shadow: var(--gta-shadow);
    overflow: hidden;
}

.gta .mud-expansion-panels > .mud-expand-panel::before {
    display: none;
}

.gta .mud-expand-panel .mud-expand-panel-header {
    min-height: 52px;
    font-weight: 700;
}

.gta .mud-expand-panel .mud-expand-panel-text {
    font-size: 1rem;
    font-weight: 700;
    color: #1d2433;
}

/* ============================================================ Schalter, Kontrollkästchen, Buttons */

:is(.gta, body:has(.gta) .mud-dialog) .mud-switch,
:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox {
    font-size: 0.9375rem;
}

/*
    Kontrollkästchen: eigenes Kästchen statt des Framework-Icons (abgerundet, angehakt in der Markenfarbe).
    Das Icon bleibt im DOM (unsichtbar), damit Klickfläche und Tastaturbedienung unverändert sind.
*/
:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox > .mud-button-root {
    position: relative;
    padding: 8px;
    background-color: transparent !important;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox > .mud-button-root > .mud-icon-root {
    opacity: 0;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox > .mud-button-root::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    border: 1.5px solid #98a2b3;
    border-radius: 6px;
    background-color: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox:hover > .mud-button-root::before {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox > .mud-button-root.mud-checkbox-true::before {
    border-color: var(--mud-palette-primary);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat,
        var(--mud-palette-primary);
}

/* unbestimmt (weder Ja noch Nein): Strich statt Haken */
:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox > .mud-button-root.mud-checkbox-null::before {
    border-color: var(--mud-palette-primary);
    background:
        linear-gradient(#fff, #fff) center / 10px 2.5px no-repeat,
        var(--mud-palette-primary);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-checkbox > .mud-button-root.mud-disabled::before {
    border-color: var(--mud-palette-lines-inputs);
    background-color: var(--mud-palette-action-disabled-background);
    box-shadow: none;
}

/* Ja/Nein-Frage mit Textfeld daneben (Datenaufnahmeblätter: "Bemerkung"): Das Textfeld steht auf der Höhe der
   Auswahl statt auf der Höhe der Frage - auch wenn die Frage über zwei Zeilen läuft. */
:is(.gta, body:has(.gta) .mud-dialog) .grid-item:has(> [data-def^="SelectionDefinition"] .mud-radio-group) + .grid-item > [data-def="TextInputDefinition"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

:is(.gta, body:has(.gta) .mud-dialog) .grid-item:has(> [data-def^="SelectionDefinition"] .mud-radio-group) + .grid-item > [data-def="TextInputDefinition"] > .mud-input-control {
    flex: 0 0 auto !important;
    margin-bottom: 17px;
}

/* ... und es ist breiter: Die Frage-Spalte bekommt nur so viel Platz, wie Frage und Ja/Nein brauchen, das Textfeld
   den Rest. Das Framework setzt die Spaltenbreiten inline, deshalb !important. Stehen die Felder untereinander
   (Handy, Breite 100%), bleibt alles wie es ist. */
:is(.gta, body:has(.gta) .mud-dialog) .grid-item:not([style*="100%"]):has(> [data-def^="SelectionDefinition"] .mud-radio-group):has(+ .grid-item > [data-def="TextInputDefinition"]) {
    flex: 0 0 280px !important;
    max-width: 280px !important;
}

:is(.gta, body:has(.gta) .mud-dialog) .grid-item:not([style*="100%"]):has(> [data-def^="SelectionDefinition"] .mud-radio-group) + .grid-item:not([style*="100%"]):has(> [data-def="TextInputDefinition"]) {
    /* feste Restbreite (nicht "0"), damit weiterhin genau eine Frage mit ihrem Textfeld pro Zeile steht */
    flex: 0 0 calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
}

/* ============================================================ Listen-Einträge (z.B. Teilnehmer) */

/* Jeder Eintrag als ruhige Zeile statt mit dunkler Trennlinie darunter */
:is(.gta, body:has(.gta) .mud-dialog) .item {
    padding: 10px 14px 2px;
    border: 1px solid var(--gta-border);
    border-radius: var(--gta-radius);
    background-color: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
    transition: border-color 0.15s, box-shadow 0.15s;
}

:is(.gta, body:has(.gta) .mud-dialog) .item:hover,
:is(.gta, body:has(.gta) .mud-dialog) .item:focus-within {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 35%, var(--gta-border));
    box-shadow: 0 4px 14px -8px rgba(16, 24, 40, 0.25);
}

:is(.gta, body:has(.gta) .mud-dialog) .item + .item {
    margin-top: 10px;
}

/* Einträge, die nur aus einem Button bestehen (z.B. die Optionen im KI Text Assistenten), sind keine Karten */
:is(.gta, body:has(.gta) .mud-dialog) .item:has([data-def="ActionInputDefinition"]):not(:has(.mud-input-control)) {
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* ... und füllen die Zeile gleichmäßig: gleich breite Spalten über die ganze Breite statt fester 280px mit
   Leerraum rechts. Das Framework setzt die Breite inline, deshalb !important. */
:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px !important;
}

:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) [data-def="ActionInputDefinition"] {
    flex: 1 1 auto;
    min-width: 0 !important;
    max-width: none !important;
}

:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) [data-def="ActionInputDefinition"] .mud-button-root {
    width: 100%;
    min-width: 0;
}

/* Der Button füllt seine Spalte: der Eintrag und jede Hülle zwischen Eintrag und Button nehmen die volle Breite
   und dürfen schrumpfen. Bewusst unabhängig davon, wie viele Hüllen das Framework dazwischen rendert und ob sie
   als Zeile oder Spalte angeordnet sind. */
:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) > .item {
    min-width: 0;
}

:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) > .item :has(.mud-button-root) {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Beschriftung vollständig zeigen (bei Bedarf zweizeilig) statt mit "..." abzuschneiden, mehr Abstand zum Symbol;
   Buttons einer Zeile sind gleich hoch */
:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) [data-def="ActionInputDefinition"] {
    height: 100%;
}

:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) [data-def="ActionInputDefinition"] .mud-button-root {
    height: 100%;
    min-height: 36px;
    padding-block: 6px;
}

:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) [data-def="ActionInputDefinition"] .mud-button-root .mud-typography {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.25;
    text-align: center;
}

:is(.gta, body:has(.gta) .mud-dialog) [data-def="ItemContainerDefinition"]:has(> .item [data-def="ActionInputDefinition"]):not(:has(> .item .mud-input-control)) [data-def="ActionInputDefinition"] .mud-button-icon-start {
    margin-right: 8px !important;
    margin-left: 0 !important;
}

/* Abschnitt, dessen Inhalt mittig ausgerichtet ist (z.B. "Vorschlag der KI"): der Kasten selbst bleibt so breit
   wie die anderen Abschnitte, statt schmal in der Mitte zu stehen */
:is(.gta, body:has(.gta) .mud-dialog) [data-def="FormDefinition"][style*="align-items: center"] > .container[style*="border"] {
    align-self: stretch;
}

:is(.gta, body:has(.gta) .mud-dialog) .item .mud-divider,
:is(.gta, body:has(.gta) .mud-dialog) .item [data-def="LineDefinition"] {
    display: none;
}

/* Schalter/Kontrollkästchen: ruhige Fläche beim Überfahren, damit die Zeile klar erkennbar ist */
:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control-boolean-input {
    padding: 2px 8px;
    border-radius: 10px;
    transition: background-color 0.12s;
}

/* Nur die einzelne Auswahl wird hervorgehoben - nicht zusätzlich die ganze Ja/Nein-Gruppe darum herum */
:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control-boolean-input:not(:has(.mud-radio-group)):hover {
    background-color: var(--gta-tint);
}

/* ... und auch nicht zusätzlich der Kreis von MudBlazor um den Knopf selbst */
:is(.gta, body:has(.gta) .mud-dialog) .mud-input-control-boolean-input :is(.mud-radio, .mud-switch) .mud-button-root:hover {
    background-color: transparent !important;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-button-root.mud-button {
    border-radius: 8px;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.01em;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-button-filled {
    box-shadow: none;
}

/* ============================================================ Datei-/Foto-Upload */

/* Reihenfolge: Titel, Ablagefläche, darunter die Dateiliste */
:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-grid-item:has(> .mud-file-upload) {
    order: 1;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper {
    order: 2;
    /* nicht stauchen lassen: wegen "overflow: hidden" würde sonst die letzte Zeile abgeschnitten */
    flex-shrink: 0;
    margin-top: 10px;
    border: 1px solid var(--gta-border);
    border-radius: var(--gta-radius);
    overflow: hidden;
}

/* Ablagefläche: gestrichelter Rahmen in der Markenfarbe, Upload-Icon, leichte Tönung */
:is(.gta, body:has(.gta) .mud-dialog) .mud-file-upload .mud-file-upload-custom-content > .mud-paper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 0 !important;
    padding: 22px 16px !important;
    border: 2px dashed color-mix(in srgb, var(--mud-palette-primary) 38%, var(--mud-palette-lines-default)) !important;
    border-radius: 14px !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    transition: background-color 0.15s, border-color 0.15s;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-file-upload .mud-file-upload-custom-content > .mud-paper::before {
    content: "";
    width: 38px;
    height: 38px;
    background-color: var(--mud-palette-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3zM8 13h2.55v3h2.9v-3H16l-4-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-file-upload .mud-file-upload-custom-content > .mud-paper > p {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary) !important;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-file-upload .mud-file-upload-custom-content > .mud-paper > p:empty {
    display: none;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-file-upload:hover .mud-file-upload-custom-content > .mud-paper {
    border-color: var(--mud-palette-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, var(--mud-palette-surface));
}

/* Dateiliste */
:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper .mud-table {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper .mud-table-foot .mud-table-cell {
    padding: 10px 14px;
    border: 0;
    border-top: 1px solid var(--gta-border);
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper .mud-table-foot .mud-typography {
    margin: 0 !important;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper .mud-table-foot .mud-typography-body1 {
    font-size: 0.875rem;
    font-weight: 600;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper .mud-table-foot .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper .mud-table-foot .mud-button-root {
    padding: 4px 12px;
    font-size: 0.8125rem;
    box-shadow: none;
}

/* Noch keine Datei: nur die Hinweise (Anzahl, Größe, Formate) ohne Kasten, Tabellenkopf und "Alle Löschen" */
:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper:not(:has(.mud-table-body tr)) {
    border-color: transparent;
    background-color: transparent;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper:not(:has(.mud-table-body tr)) .mud-table {
    background-color: transparent;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper:not(:has(.mud-table-body tr)) .mud-table-head,
:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper:not(:has(.mud-table-body tr)) .mud-table-foot .mud-button-root {
    display: none;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper:not(:has(.mud-table-body tr)) .mud-table-foot .mud-table-cell {
    padding: 0 4px;
    border-top: 0;
    text-align: center !important;
}

:is(.gta, body:has(.gta) .mud-dialog) [role="group"]:has(> .mud-grid-item > .mud-file-upload) > .mud-paper:not(:has(.mud-table-body tr)) .mud-table-foot .mud-typography-body1 {
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

/* ============================================================ Listen / Tabellen (z.B. Kalkulation, Datenaufnahmeblätter) */

/* Hinweis: Die Hülle um den Inhalt eines Formulars heißt je nach Framework-Stand "component-container-layout" oder
   "container"; die Regeln unten akzeptieren beide. */

/* Liste direkt in einem umrandeten Formular: kein zweiter Kasten um die Liste (die Karte außen reicht) */
:is(.gta, body:has(.gta) .mud-dialog) .container[style*="border"] .container[style*="border"]:has(> form > :is(.component, .container) > [data-def^="GridDefinition"]),
:is(.gta, body:has(.gta) .mud-dialog) .container[style*="border"] .container[style*="border"]:has(> form > :is(.component, .container) > [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"]) {
    padding: 0 !important;
    box-shadow: none;
    background-color: transparent !important;
}

/* Tabelle mit eigenem Rahmen und runden Ecken */
:is(.gta, body:has(.gta) .mud-dialog) .mud-table {
    border: 1px solid var(--gta-border);
    border-radius: var(--gta-radius);
    box-shadow: none;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

/* Kopfzeile der Liste: Suche links in kompakter Breite */
:is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar {
    min-height: 60px;
    padding: 10px 14px;
    gap: 10px;
    border-bottom: 1px solid var(--gta-border);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar > .flex-grow-1 {
    display: none;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar > .action-container:not(:has(.mud-button-root)) {
    display: none;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar .mud-input-control {
    max-width: 340px;
    margin: 0;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar .mud-input.mud-input-text {
    margin-top: 0;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.9375rem;
    box-shadow: none;
    background-color: var(--mud-palette-background);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar .mud-input.mud-input-text:focus-within {
    background-color: var(--mud-palette-surface);
}

/* Tabellenkopf */
:is(.gta, body:has(.gta) .mud-dialog) .mud-table-head .mud-table-cell {
    padding: 11px 16px;
    font-size: 0.75rem;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
    background-color: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border-bottom: 1px solid var(--gta-border);
}

/* Zeilen */
:is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-row {
    transition: background-color 0.12s;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-cell {
    height: 50px;
    font-family: inherit;
    padding: 8px 16px;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: #1d2433;
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-lines-default) 55%, transparent);
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

:is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-row:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

/* Gewählte Zeile: Markenfarbe statt Hellblau, mit Akzentbalken links */
:is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-row.mud-selected-item,
:is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-row[style*="background"] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 9%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/*
    "Hinzufügen"-Button direkt unter einer Liste mit Suchleiste (z.B. "Position hinzufügen"):
    kompakt rechts in der Kopfzeile der Liste statt als vollbreiter Balken darunter
    (auch wenn dazwischen die Summenzeile .gsum steht).
*/
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar),
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) {
    position: relative;
}

:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]),
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + div:has(> [data-def="ActionInputDefinition"]),
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]),
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + div:has(> [data-def="ActionInputDefinition"]) {
    position: absolute;
    top: 10px;
    right: 14px;
    z-index: 1;
}

:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root,
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root,
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root,
:is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root {
    width: auto;
    min-height: 40px;
    padding: 6px 16px;
}

@media (max-width: 700px) {
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]),
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + div:has(> [data-def="ActionInputDefinition"]),
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]),
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + div:has(> [data-def="ActionInputDefinition"]) {
        position: static;
    }

    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root,
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def^="GridDefinition"] .mud-toolbar) > [data-def^="GridDefinition"] + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root,
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + .gsum + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root,
    :is(.gta, body:has(.gta) .mud-dialog) :is(.component-container-layout, .container):has(> [data-def="StackLayoutDefinition"] > [data-def^="GridDefinition"] .mud-toolbar) > [data-def="StackLayoutDefinition"] + div:has(> [data-def="ActionInputDefinition"]) .mud-button-root {
        width: 100%;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-table > .mud-toolbar .mud-input-control {
        max-width: none;
    }
}

/*
    Tablet: Tabellen mit vielen Spalten (z.B. Geräte) passen sonst nicht in die Breite - die langen Überschriften
    ("Wiederbeschaffungswert", "Entschädigungsvorschlag") dürfen an ihren Trennstellen (weiches Trennzeichen in der
    Spaltenüberschrift, z.B. ElektroGeräteBuilder) umbrechen, die Zellen rücken enger zusammen.
    Das Handy (bis 600px) hat eigene Regeln weiter unten (Tabelle wird seitlich gewischt).
*/
@media (min-width: 600.02px) and (max-width: 1279.98px) {
    :is(.gta, body:has(.gta) .mud-dialog) .mud-table-head .mud-table-cell {
        padding-inline: 8px;
        font-size: 0.75rem;
        letter-spacing: 0;
        text-transform: none;
        white-space: normal;
        hyphens: manual;
        vertical-align: bottom;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-table-body .mud-table-cell {
        padding-inline: 8px;
    }
}

/* ============================================================ Summenleiste unter Listen (GutachtenSummaryRenderer) */

.gsum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid var(--gta-border);
    border-radius: var(--gta-radius);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
}

.gsum__caption {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.gsum__items {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 10px 28px;
    margin-left: auto;
}

.gsum__item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.gsum__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.gsum__value {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.gsum__item--main .gsum__label {
    color: var(--mud-palette-primary);
}

.gsum__item--main .gsum__value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
}

.gsum__caption-count {
    margin-left: 4px;
    font-weight: 500;
}

/* unter einer Tabelle: wie eine Summenzeile, jeder Betrag genau unter seiner Spalte (links bündig wie die Zellen) */
.gsum--aligned {
    position: relative;
    display: block;
    min-height: 48px;
    margin-top: -4px;
    overflow: hidden;
}

.gsum--aligned .gsum__caption {
    display: inline-block;
    line-height: 22px;
}

.gsum--aligned .gsum__items {
    margin: 0;
}

.gsum--aligned .gsum__item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: flex-start;
    white-space: nowrap;
}

.gsum--aligned .gsum__label {
    display: none;
}

.gsum--aligned .gsum__item--main .gsum__value {
    font-size: 1rem;
}

@media (max-width: 600px) {
    .gsum__items {
        width: 100%;
        justify-content: space-between;
    }

    .gsum__item {
        align-items: flex-start;
    }
}

/* ============================================================ Schmale Bildschirme */

@media (max-width: 900px) {
    .gta-header {
        padding: 14px 16px;
    }

    .gta-header__title {
        font-size: 1.125rem;
    }

    .gta-header__facts {
        gap: 10px 18px;
    }

    .gta-fact__value {
        max-width: 220px;
    }
}

/*
    Tabellen auf dem Handy: MudBlazor stapelt unter 600px jede Zelle als eigene Zeile und setzt die Spaltenüberschrift
    aus "data-label" davor. Das Framework-Grid setzt "data-label" aber nicht - übrig bleiben Werte ohne Beschriftung
    (und leere Zeilen für leere Spalten). Deshalb bleibt die Tabelle hier eine echte Tabelle mit Kopfzeile und wird
    bei Bedarf seitlich gewischt.
*/
@media (max-width: 600px) {
    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root {
        width: max-content;
        min-width: 100%;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-head .mud-table-row,
    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-body .mud-table-row {
        display: table-row;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-foot {
        display: table-footer-group;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-cell {
        display: table-cell;
        /* eine Zeile je Eintrag; sehr lange Texte werden gekürzt (vollständig im Bearbeiten-Dialog) */
        max-width: 260px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 10px 12px;
        border-bottom: 1px solid var(--gta-border);
        vertical-align: middle;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-head .mud-table-cell {
        white-space: nowrap;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-cell::before {
        content: none;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell {
        border-bottom: 0;
    }

    :is(.gta, body:has(.gta) .mud-dialog) .mud-xs-table .mud-table-smalldevices-sortselect {
        display: none;
    }
}

/* Handy: Dialoge im Gutachten. Die Dialog-Buttons haben eine feste Breite (200px, PS.Core AddActionButton) und ragen sonst
   links aus dem Dialog ("Abbrechen" abgeschnitten). Hier teilen sie sich die Breite und brechen bei Bedarf um;
   der Dialog nutzt die Bildschirmbreite besser aus. Desktop bleibt unverändert. */
@media (max-width: 600px) {
    /* PS.Core öffnet Dialoge über MudBlazor.Extensions (ShowExAsync). Das schreibt Position und Breite beim Öffnen als
       feste Prozentwerte inline (left/width) und rechnet sie bei Größenänderung des Fensters nicht neu - ein am Desktop
       geöffneter Dialog bleibt nach dem Verkleinern schmal und verschoben. Auf dem Handy daher fest überschreiben. */
    body:has(.gta) .mud-dialog-container .mud-dialog:not(.mud-dialog-fullscreen) {
        left: 12px !important;
        right: auto !important;
        width: calc(100% - 24px) !important;
        max-width: none !important;
    }

    /* Formulare im Dialog einspaltig: das PS-Raster setzt die Spaltenbreite inline (z.B. max-width: 50%), dadurch
       standen z.B. die Schalter im Datenaufnahmeblatt zu zweit nebeneinander und die Beschriftungen überlappten */
    body:has(.gta) .mud-dialog .mud-dialog-content .grid > .grid-item {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    body:has(.gta) .mud-dialog .mud-dialog-title .mud-typography-h6 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    body:has(.gta) .mud-dialog .mud-dialog-actions {
        padding: 8px 12px 12px;
    }

    body:has(.gta) .mud-dialog .mud-dialog-actions > div,
    body:has(.gta) .mud-dialog .mud-dialog-actions .flex-row:has([data-def="ActionInputDefinition"]) {
        width: 100%;
        min-width: 0;
    }

    body:has(.gta) .mud-dialog .mud-dialog-actions .flex-row:has([data-def="ActionInputDefinition"]) {
        flex-wrap: wrap;
        gap: 8px;
    }

    body:has(.gta) .mud-dialog .mud-dialog-actions .flex-row > div:has([data-def="ActionInputDefinition"]),
    body:has(.gta) .mud-dialog .mud-dialog-actions .flex-row > [data-def="ActionInputDefinition"] {
        flex: 1 1 8rem !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* die Button-Hülle selbst hat min-/max-width: 200px inline (PS.Core FixedWidth) */
    body:has(.gta) .mud-dialog .mud-dialog-actions [data-def="ActionInputDefinition"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    body:has(.gta) .mud-dialog .mud-dialog-actions [data-def="ActionInputDefinition"] .mud-button-root {
        width: 100%;
    }

    body:has(.gta) .mud-dialog .mud-dialog-actions .mud-button-root :is(.mud-typography, .mud-button-label) {
        white-space: normal;
    }
}