/*
 * NEU: Berggut_CustomerArea, gemeinsames Design des Kundenbereichs.
 * Spec: docs/superpowers/specs/2026-10-05-berggut-customerarea-grundlage-design.md
 * Regeln (Waechter-Test dev/tests/js/berggut/customerarea-markup.test.js):
 * jeder Selektor beginnt mit "body .bga", nur font-weight 400/600, kein !important.
 */

/* Grundwerte */
body .bga {
    --bga-red: #d20f23;
    --bga-red-dark: #b00d1d;
    --bga-text: #222222;
    --bga-muted: #6b665f;
    --bga-text-2: #4a463f;
    --bga-bg: #f7f5f2;
    --bga-tint: #f3efe9;
    --bga-line: #e6e2dc;
    --bga-line-soft: #efebe6;
    --bga-input-line: #d6d6d6;
    --bga-green: #2e7d32;
    --bga-radius: 12px;
    --bga-radius-sm: 8px;
    --bga-tap: 44px;
    --bga-font: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
    box-sizing: border-box;
    font-family: var(--bga-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--bga-text);
}

body .bga *,
body .bga *::before,
body .bga *::after {
    box-sizing: border-box;
}

body .bga h1,
body .bga h2,
body .bga h3,
body .bga p,
body .bga ul,
body .bga ol,
body .bga dl,
body .bga dd,
body .bga address {
    margin: 0;
    padding: 0;
    font-family: var(--bga-font);
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
}

body .bga :where(a, a:visited, a:hover) {
    color: inherit;
}

body .bga button,
body .bga input,
body .bga select,
body .bga textarea {
    font-family: var(--bga-font);
    font-size: 17px;
    line-height: 1.3;
    color: var(--bga-text);
}

body .bga a:focus-visible,
body .bga button:focus-visible,
body .bga input:focus-visible,
body .bga select:focus-visible,
body .bga textarea:focus-visible {
    outline: 2px solid var(--bga-red);
    outline-offset: 2px;
    box-shadow: none;
}

body .bga .bga-icon {
    flex: 0 0 auto;
}

body .bga .bga-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Geruest */
body .bga.bga-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px;
    margin: 0 0 40px;
    padding: 32px;
    border-radius: 16px;
    background: var(--bga-bg);
    flex: 1 1 100%;
    width: 100%;
}

body .bga .bga-nav-col {
    flex: 0 0 240px;
    max-width: 260px;
    min-width: 0;
}

body .bga .bga-main {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* Magentos Container "main" (div.column.main) liegt in bga-main */
body .bga .bga-main > .column.main {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

body .bga .bga-main .page-title-wrapper {
    margin: 0;
    padding: 0;
}

body .bga .bga-main .page-title {
    margin: 0;
    font-family: var(--bga-font);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--bga-text);
}

body .bga .bga-page-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 20px;
}

body .bga .bga-h1 {
    font-size: 34px;
    font-weight: 600;
    line-height: 1.1;
}

body .bga .bga-lead {
    font-size: 17px;
    color: var(--bga-muted);
}

body .bga .bga-muted {
    color: var(--bga-muted);
}

body .bga .bga-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 0 0 20px;
}

body .bga .bga-row > * {
    flex: 1 1 280px;
    min-width: 0;
}

body .bga .bga-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Karte */
body .bga .bga-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 20px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
}

body .bga .bga-card--tint {
    background: var(--bga-tint);
}

body .bga .bga-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
}

body .bga .bga-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

body .bga .bga-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: auto;
}

/* Knoepfe */
body .bga .bga-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

body .bga .bga-btn--primary,
body .bga .bga-btn--primary:visited {
    border-color: var(--bga-red);
    background: var(--bga-red);
    color: #ffffff;
}

body .bga .bga-btn--primary:hover {
    border-color: var(--bga-red-dark);
    background: var(--bga-red-dark);
    color: #ffffff;
}

body .bga .bga-btn--secondary {
    border-color: var(--bga-input-line);
}

body .bga .bga-btn--secondary:hover {
    border-color: var(--bga-text-2);
    color: var(--bga-text);
}

body .bga .bga-btn--outline {
    border-color: var(--bga-text);
}

body .bga .bga-btn--danger {
    border-color: var(--bga-red-dark);
    color: var(--bga-red-dark);
}

body .bga .bga-btn--text {
    min-height: var(--bga-tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bga-muted);
    font-weight: 400;
    text-decoration: underline;
}

body .bga .bga-btn--block {
    width: 100%;
}

body .bga .bga-btn[disabled],
body .bga .bga-btn.disabled {
    opacity: 0.6;
    cursor: default;
}

body .bga .bga-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body .bga .bga-actions > .bga-btn {
    flex: 1 1 auto;
}

/* Links */
body .bga .bga-link {
    color: var(--bga-muted);
    text-decoration: underline;
}

body .bga .bga-link--strong,
body .bga .bga-link--strong:visited,
body .bga .bga-link--strong:hover {
    display: inline-flex;
    align-items: center;
    min-height: var(--bga-tap);
    color: var(--bga-red);
    font-weight: 600;
    text-decoration: none;
}

body .bga .bga-back {
    color: var(--bga-muted);
    font-size: 15px;
    text-decoration: none;
}

/* Status-Chip (Zuordnung: Model\OrderStatusPresenter) */
body .bga .bga-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bga-line-soft);
    color: #5c5750;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

body .bga .bga-chip--received {
    background: #eef0f3;
    color: #3d4652;
}

body .bga .bga-chip--processing {
    background: #fdf1e3;
    color: #8a4b00;
}

body .bga .bga-chip--review {
    background: #f6ecd9;
    color: #6e4a00;
}

body .bga .bga-chip--shipped {
    background: #e7eef8;
    color: #1d4f91;
}

body .bga .bga-chip--complete {
    background: #e8f2e9;
    color: #2e5e31;
}

body .bga .bga-chip--canceled,
body .bga .bga-chip--refunded {
    background: var(--bga-line-soft);
    color: #5c5750;
}

/* Vorschaubild */
body .bga .bga-thumb {
    display: block;
    flex: 0 0 auto;
    border-radius: var(--bga-radius-sm);
    background: var(--bga-tint);
    object-fit: cover;
}

body .bga .bga-thumb--sm {
    width: 40px;
    height: 40px;
}

body .bga .bga-thumb--md {
    width: 48px;
    height: 48px;
}

body .bga .bga-thumb--lg {
    width: 80px;
    height: 80px;
}

/* Formular */
body .bga .bga-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

body .bga .bga-input-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body .bga .bga-label {
    color: var(--bga-text);
    font-size: 15px;
    font-weight: 600;
}

body .bga .bga-req {
    color: var(--bga-red);
}

body .bga .bga-input,
body .bga .bga-select,
body .bga .bga-textarea {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--bga-input-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    font-size: 17px;
}

body .bga .bga-textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
}

body .bga .bga-input:focus,
body .bga .bga-select:focus,
body .bga .bga-textarea:focus {
    border-color: var(--bga-red);
    box-shadow: none;
}

body .bga .bga-input[aria-invalid="true"],
body .bga .bga-input.mage-error,
body .bga .bga-select.mage-error,
body .bga .bga-textarea.mage-error {
    border: 2px solid var(--bga-red);
    background: #fff7f7;
}

body .bga .bga-hint {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-error,
body .bga div.mage-error {
    margin: 0;
    color: var(--bga-red-dark);
    font-size: 15px;
    font-weight: 600;
}

/* Auswahl */
body .bga .bga-check {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: var(--bga-tap);
    font-size: 17px;
    cursor: pointer;
}

body .bga .bga-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--bga-red);
}

body .bga .bga-switch {
    display: flex;
    flex: 0 0 56px;
    justify-content: flex-start;
    width: 56px;
    height: 32px;
    padding: 3px;
    border: 0;
    border-radius: 999px;
    background: #b5afa6;
    cursor: pointer;
}

body .bga .bga-switch[aria-checked="true"] {
    justify-content: flex-end;
    background: var(--bga-green);
}

body .bga .bga-switch::after {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Meldungen (eigene + Magentos page.messages in bga-main) */
body .bga .bga-msg,
body .bga .bga-main .messages .message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 12px;
    padding: 14px 18px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 17px;
    line-height: 1.4;
}

body .bga .bga-msg--success,
body .bga .bga-main .messages .message-success {
    border-color: #bcd9be;
    background: #f1f7f1;
}

body .bga .bga-msg--error,
body .bga .bga-main .messages .message-error {
    border-color: #efb6bc;
    background: #fff5f5;
    color: #8a0a17;
}

body .bga .bga-msg--notice,
body .bga .bga-main .messages .message-notice,
body .bga .bga-main .messages .message-warning {
    border-color: #ecd9b3;
    background: #fffaf0;
}

body .bga .bga-main .messages .message > *:first-child {
    padding: 0;
}

body .bga .bga-main .messages .message > *:first-child::before {
    display: none;
}

body .bga .bga-main .page.messages {
    margin: 0;
}

/* Blaettern */
body .bga .bga-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body .bga .bga-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    color: var(--bga-text);
    text-decoration: none;
}

body .bga .bga-pager__page--current {
    border-color: var(--bga-red);
    background: var(--bga-red);
    color: #ffffff;
    font-weight: 600;
}

/* Mengenregler (Masse wie im Warenkorb) */
body .bga .bga-qty {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--bga-input-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
}

body .bga .bga-qty__btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #f3f3f3;
    color: #333333;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

body .bga .bga-qty__btn:disabled {
    color: #bbbbbb;
    cursor: default;
}

body .bga .bga-qty__val {
    width: 52px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 600;
    text-align: center;
}

/* Leerzustand */
body .bga .bga-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    color: var(--bga-text-2);
}

/* Kontonavigation */
body .bga .bga-nav {
    overflow: hidden;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
}

body .bga .bga-nav__who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--bga-line-soft);
}

body .bga .bga-nav__avatar {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bga-red);
    color: #ffffff;
}

body .bga .bga-nav__avatar--sm {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
}

body .bga .bga-nav__who-text,
body .bga .bga-nav__toggle-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}

body .bga .bga-nav__hello,
body .bga .bga-nav__toggle-label {
    font-size: 18px;
    font-weight: 600;
}

body .bga .bga-nav__email {
    overflow: hidden;
    color: var(--bga-muted);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .bga .bga-nav__toggle {
    display: none;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    text-align: left;
    cursor: pointer;
}

body .bga .bga-nav__toggle-sub {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-nav__chevron {
    display: flex;
    margin-left: auto;
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}

body .bga .bga-nav--closed .bga-nav__chevron {
    transform: none;
}

body .bga .bga-nav__list {
    display: flex;
    flex-direction: column;
    padding: 8px 8px 10px;
}

body .bga .bga-nav__group {
    display: block;
    padding: 14px 12px 4px;
    color: var(--bga-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body .bga .bga-nav__item,
body .bga .bga-nav__item:visited {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--bga-tap);
    padding: 0 12px;
    border-radius: var(--bga-radius-sm);
    color: var(--bga-text);
    font-size: 17px;
    text-decoration: none;
}

body .bga .bga-nav__item:hover {
    background: var(--bga-bg);
    color: var(--bga-text);
}

body .bga .bga-nav__item--current,
body .bga .bga-nav__item--current:visited,
body .bga .bga-nav__item--current:hover {
    background: var(--bga-tint);
    color: var(--bga-red);
    font-weight: 600;
}

body .bga .bga-nav__item--logout,
body .bga .bga-nav__item--logout:visited {
    color: var(--bga-muted);
}

body .bga .bga-nav__sep {
    height: 1px;
    margin: 8px 4px;
    background: var(--bga-line-soft);
}

/* Dashboard */
body .bga .bga-dash-order {
    flex: 3 1 420px;
}

body .bga .bga-dash-teaser {
    flex: 2 1 260px;
    justify-content: space-between;
}

body .bga .bga-dash-order__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

body .bga .bga-dash-order__date {
    font-size: 18px;
    font-weight: 600;
}

body .bga .bga-dash-order__thumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body .bga .bga-dash-teaser__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--bga-red);
}

body .bga .bga-address {
    font-size: 17px;
    font-style: normal;
    line-height: 1.45;
}

/* Kacheln "Haeufig bestellte Produkte" */
body .bga .bga-tiles-card {
    margin: 0 0 20px;
}

body .bga .bga-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga .bga-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    margin: 0;
    padding: 0;
}

body .bga .bga-tile__photo {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: var(--bga-tint);
}

body .bga .bga-tile__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .bga .bga-tile__name,
body .bga .bga-tile__name:visited {
    color: var(--bga-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
}

body .bga .bga-tile__price,
body .bga .bga-tile__price * {
    font-family: var(--bga-font);
}

body .bga .bga-tile__price {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-tile__price .price-box {
    margin: 0;
}

body .bga .bga-tile__price .price {
    color: var(--bga-text);
    font-size: 18px;
    font-weight: 600;
}

body .bga .bga-tile__last {
    color: var(--bga-muted);
    font-size: 13px;
}

body .bga .bga-tile__form {
    margin: 4px 0 0;
}

body .bga .bga-tile__unavailable {
    color: #8a4b00;
    font-size: 15px;
    font-weight: 600;
}

/* Mobil */
@media (max-width: 767px) {
    body .bga.bga-shell {
        gap: 16px;
        padding: 16px 12px;
        border-radius: 0;
    }

    body .bga .bga-nav-col {
        flex-basis: 100%;
        max-width: 100%;
    }

    body .bga .bga-main {
        flex-basis: 100%;
    }

    /* Infortis setzt unterhalb 768 px 41px Abstand fuer die alte absolute Navigation */
    body.bga-page .page-main {
        padding-top: 0;
    }

    body .bga .bga-nav__who {
        display: none;
    }

    body .bga .bga-nav__toggle {
        display: flex;
    }

    body .bga .bga-nav__list {
        border-top: 1px solid var(--bga-line-soft);
    }

    body .bga .bga-nav--closed .bga-nav__list {
        display: none;
    }

    body .bga .bga-h1,
    body .bga .bga-main .page-title {
        font-size: 30px;
    }

    body .bga .bga-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bga .bga-actions > .bga-btn {
        flex-basis: 100%;
    }

    body .bga .bga-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Anmelden, Konto erstellen, Passwort (Teilprojekt F, Spec F Abschnitt 6).
   Die Wurzel traegt .bga und .bga-auth zugleich: seitenweite Regeln deshalb als "body .bga.bga-auth". */
body .bga.bga-auth {
    flex: 1 1 100%;
    width: 100%;
    margin: 0 0 40px;
    padding: 40px 32px 56px;
    border-radius: 16px;
    background: var(--bga-bg);
}

body .bga.bga-auth--narrow {
    padding-top: 56px;
}

body .bga .bga-auth__main {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
}

body .bga.bga-auth--form .bga-auth__main {
    max-width: 760px;
}

body .bga.bga-auth--narrow .bga-auth__main {
    max-width: 520px;
}

body .bga .bga-auth__main > .column.main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

body .bga .bga-auth__page {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-auth__page > .bga-page-head {
    margin: 0;
}

body .bga.bga-auth .bga-btn {
    min-height: 50px;
    padding: 0 24px;
    font-size: 18px;
}

/* Anmelden: zwei Karten */
body .bga .bga-auth__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

body .bga .bga-auth__split > .bga-card {
    gap: 18px;
    padding: 28px;
}

body .bga .bga-auth__split .bga-card__title {
    font-size: 22px;
}

body .bga .bga-auth__form {
    gap: 18px;
}

body .bga .bga-auth__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

body .bga .bga-auth__forgot,
body .bga .bga-auth__forgot:visited,
body .bga .bga-auth__forgot:hover {
    color: var(--bga-red);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
}

/* Passwortfeld mit Knopf "Anzeigen" (Knopf ueber dem Feld, damit Fehlermeldungen darunter frei fliessen) */
body .bga .bga-pass {
    position: relative;
}

body .bga .bga-pass .bga-pass__input {
    padding-right: 112px;
}

body .bga .bga-pass__toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    display: flex;
    align-items: center;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-left: 1px solid var(--bga-line-soft);
    border-radius: 0 7px 7px 0;
    background: #faf8f5;
    box-shadow: none;
    color: var(--bga-text-2);
    font-family: var(--bga-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

body .bga .bga-pass__toggle:hover {
    background: var(--bga-tint);
    color: var(--bga-text);
}

body .bga .bga-pass__toggle[hidden] {
    display: none;
}

body .bga .bga-auth__remember {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body .bga .bga-auth__remember-note {
    padding: 0 0 0 34px;
}

/* Karte "Neu bei Berggut?" */
body .bga .bga-auth__intro,
body .bga .bga-auth__text {
    color: var(--bga-text-2);
    font-size: 17px;
}

body .bga .bga-auth__benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 17px;
}

body .bga .bga-auth__benefits li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
}

body .bga .bga-auth__benefits .bga-icon {
    margin-top: 2px;
    color: var(--bga-green);
}

body .bga .bga-auth__new > .bga-btn {
    margin-top: auto;
}

/* Einzelkarte (Passwort vergessen, Neues Passwort, Bestaetigung, Abgemeldet) */
body .bga .bga-auth__card {
    gap: 16px;
    padding: 28px;
}

body .bga .bga-auth__card .bga-h1 {
    font-size: 30px;
}

body .bga .bga-auth__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bga-tint);
    color: var(--bga-red);
}

body .bga .bga-auth__icon--ok {
    background: var(--bga-green);
    color: #ffffff;
}

/* Konto erstellen */
body .bga.bga-auth--form .bga-card {
    gap: 18px;
    padding: 24px;
}

body .bga .bga-name__prefix {
    max-width: 240px;
}

body .bga .bga-auth__widgets {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body .bga .bga-auth__consents {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body .bga .bga-auth__consents.bga-card {
    padding: 16px 24px;
}

body .bga .bga-auth__note {
    color: var(--bga-text-2);
    font-size: 15px;
}

body .bga .bga-auth__note a,
body .bga .bga-auth__note a:visited {
    color: var(--bga-text);
    text-decoration: underline;
}

/* Knopfbereich; traegt in auth/register.phtml zusaetzlich .actions-toolbar (Amasty Customer Attributes) */
body .bga .bga-auth__submit,
body .bga .bga-auth__submit.actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

body .bga .bga-auth__submit.actions-toolbar::before,
body .bga .bga-auth__submit.actions-toolbar::after {
    display: none;
    content: none;
}

body .bga .bga-auth__submit .bga-btn {
    min-width: 260px;
}

/* Passwortstaerke (Markup und Klassen password-none bis password-very-strong setzt Magentos Widget) */
body .bga #password-strength-meter-container {
    margin: 2px 0 0;
}

body .bga #password-strength-meter-container .password-strength-meter {
    position: relative;
    z-index: auto;
    height: auto;
    margin: 0;
    padding: 10px 0 0;
    background: none;
    color: var(--bga-muted);
    font-family: var(--bga-font);
    font-size: 14px;
    line-height: 1.3;
}

body .bga #password-strength-meter-container .password-strength-meter::before,
body .bga #password-strength-meter-container .password-strength-meter::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    border-radius: 2px;
}

body .bga #password-strength-meter-container .password-strength-meter::after {
    z-index: auto;
    width: 100%;
    background: var(--bga-line-soft);
}

body .bga #password-strength-meter-container .password-strength-meter::before {
    z-index: 1;
    width: 0;
    background: var(--bga-line);
}

body .bga #password-strength-meter-container.password-weak .password-strength-meter::before {
    width: 25%;
    background: var(--bga-red);
}

body .bga #password-strength-meter-container.password-medium .password-strength-meter::before {
    width: 50%;
    background: #c77700;
}

body .bga #password-strength-meter-container.password-strong .password-strength-meter::before {
    width: 75%;
    background: #5b8f2e;
}

body .bga #password-strength-meter-container.password-very-strong .password-strength-meter::before {
    width: 100%;
    background: var(--bga-green);
}

/* Fremdes Formular-Markup: form_additional_info (reCAPTCHA, Captcha, Amasty GDPR), Magentos Widgets
   (Geburtsdatum, Geschlecht, USt-ID) und die Formulare fremder Kontoseiten. Seit Teilprojekt D gemeinsam fuer die
   Seiten ohne Navigation (.bga-auth, Teilprojekt F) und die Kontoseiten (.bga-shell): jede Regel nennt beide
   Wurzeln in derselben Selektorliste, die Werte sind die aus F (Schnappschuss in customerarea-forms-layout.test.js). */
body .bga.bga-auth .field,
body .bga.bga-shell .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

body .bga.bga-auth .field > .label,
body .bga.bga-shell .field > .label {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 15px;
    font-weight: 600;
    text-align: left;
}

body .bga.bga-auth .field.required > .label::after,
body .bga.bga-shell .field.required > .label::after {
    content: " *";
    margin: 0;
    color: var(--bga-red);
    font-size: 15px;
}

body .bga.bga-auth .field .control,
body .bga.bga-shell .field .control {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Geburtsdatum: Widget\Dob::getFieldHtml() gibt das Eingabefeld mit class="" aus (kein input-text) */
body .bga.bga-auth .field input.input-text,
body .bga.bga-auth .field .customer-dob input[type="text"],
body .bga.bga-auth .field input._has-datepicker,
body .bga.bga-auth .field select,
body .bga.bga-shell .field input.input-text,
body .bga.bga-shell .field .customer-dob input[type="text"],
body .bga.bga-shell .field input._has-datepicker,
body .bga.bga-shell .field select {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--bga-input-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 17px;
}

body .bga.bga-auth .field input.input-text.mage-error,
body .bga.bga-auth .field .customer-dob input[type="text"].mage-error,
body .bga.bga-auth .field input._has-datepicker.mage-error,
body .bga.bga-auth .field select.mage-error,
body .bga.bga-shell .field input.input-text.mage-error,
body .bga.bga-shell .field .customer-dob input[type="text"].mage-error,
body .bga.bga-shell .field input._has-datepicker.mage-error,
body .bga.bga-shell .field select.mage-error {
    border: 2px solid var(--bga-red);
    background: #fff7f7;
}

body .bga.bga-auth .field .note,
body .bga.bga-shell .field .note {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga.bga-auth .customer-dob,
body .bga.bga-shell .customer-dob {
    position: relative;
    display: block;
    width: 100%;
}

body .bga.bga-auth .customer-dob input.input-text,
body .bga.bga-auth .customer-dob input[type="text"],
body .bga.bga-auth .customer-dob input._has-datepicker,
body .bga.bga-shell .customer-dob input.input-text,
body .bga.bga-shell .customer-dob input[type="text"],
body .bga.bga-shell .customer-dob input._has-datepicker {
    padding-right: 52px;
}

body .bga.bga-auth .customer-dob .ui-datepicker-trigger,
body .bga.bga-shell .customer-dob .ui-datepicker-trigger {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bga-muted);
    cursor: pointer;
}

/* Unsichtbares reCAPTCHA: Magentos Standard-Position ist "inline" (recaptcha_frontend/type_invisible/position),
   das Google-Badge (ca. 256 x 60 px) steht dann IM Formular. Der Wrapper bleibt deshalb im normalen Fluss, als
   eigene Zeile direkt ueber dem Knopf; nie position: absolute (dann laege das Badge ueber den Feldern) und nie
   display: none (die Sichtbarkeitspruefung von nonInlineReCaptchaRenderer wuerde das Badge sonst verstecken). */
body .bga.bga-auth .field-recaptcha,
body .bga.bga-shell .field-recaptcha {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

body .bga.bga-auth .field-recaptcha .grecaptcha-badge,
body .bga.bga-shell .field-recaptcha .grecaptcha-badge {
    max-width: 100%;
    margin: 0;
    border-radius: var(--bga-radius-sm);
}

body .bga.bga-auth .captcha-image,
body .bga.bga-shell .captcha-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 8px 0 0;
}

body .bga.bga-auth .captcha-img,
body .bga.bga-shell .captcha-img {
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius-sm);
}

body .bga.bga-auth .captcha-reload,
body .bga.bga-shell .captcha-reload {
    min-height: var(--bga-tap);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--bga-input-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 15px;
    font-weight: 600;
}

body .bga.bga-auth div.amgdpr-checkbox,
body .bga.bga-shell div.amgdpr-checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    min-height: var(--bga-tap);
    padding: 10px 0 0;
}

body .bga.bga-auth input.amgdpr-checkbox,
body .bga.bga-shell input.amgdpr-checkbox {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--bga-red);
}

body .bga.bga-auth .field > .label.amgdpr-label,
body .bga.bga-shell .field > .label.amgdpr-label {
    font-size: 17px;
    font-weight: 400;
}

/* Magentos "Remember Me"-Markup, falls ein anderes Modul unser Template ueberschreibt */
body .bga.bga-auth #remember-me-box {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    min-height: var(--bga-tap);
}

body .bga.bga-auth #remember-me-box input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--bga-red);
}

body .bga.bga-auth #remember-me-box > .label {
    font-size: 17px;
    font-weight: 400;
}

body .bga.bga-auth #remember-me-box .tooltip {
    display: none;
}

@media (max-width: 767px) {
    body .bga.bga-auth {
        padding: 20px 16px 32px;
        border-radius: 0;
    }

    body .bga .bga-auth__split {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bga .bga-auth__split > .bga-card,
    body .bga .bga-auth__card,
    body .bga.bga-auth--form .bga-card {
        padding: 20px;
    }

    body .bga .bga-auth__submit .bga-btn {
        width: 100%;
        min-width: 0;
    }

    body .bga .bga-name__prefix {
        max-width: none;
    }
}

/* Bestellungen: Liste "Meine Bestellungen" (Teilprojekt C, Spec C Abschnitt 2.13 und 2.14) */
body .bga .bga-ov {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-ov-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

body .bga .bga-ov-head > .bga-page-head {
    margin: 0;
}

body .bga .bga-ov-head > .bga-link--strong {
    gap: 8px;
    font-size: 17px;
}

body .bga .bga-ov-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    padding: 18px 20px;
}

body .bga .bga-ov-card--muted {
    opacity: 0.8;
}

body .bga .bga-ov-card__main {
    display: flex;
    flex: 999 1 300px;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

body .bga .bga-ov-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}

body .bga .bga-ov-card__meta > .bga-muted,
body .bga .bga-ov-card__thumbs > .bga-muted {
    font-size: 15px;
}

body .bga .bga-ov-card__thumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body .bga .bga-ov-card__thumbs > .bga-muted {
    margin-left: 4px;
}

body .bga .bga-ov-card__sum {
    display: flex;
    flex: 1 1 170px;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body .bga .bga-ov-card__label {
    color: var(--bga-muted);
    font-size: 13px;
}

body .bga .bga-ov-card__total {
    font-size: 20px;
    font-weight: 600;
}

body .bga .bga-ov-card__ship {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-ov-card__track,
body .bga .bga-ov-card__track:visited,
body .bga .bga-ov-card__track:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--bga-tap);
    color: var(--bga-text);
    font-size: 15px;
    text-decoration: underline;
}

body .bga .bga-ov-card__actions {
    display: flex;
    flex: 1 1 240px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

body .bga .bga-ov-card__actions > .bga-btn {
    flex: 1 1 auto;
}

body .bga .bga-ov-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body .bga .bga-ov-foot > .bga-muted {
    font-size: 15px;
}

@media (max-width: 767px) {
    body .bga .bga-ov-card__actions > .bga-btn {
        flex-basis: 100%;
    }

    body .bga .bga-ov-foot {
        justify-content: center;
    }
}

/* Bestellansicht (Teilprojekt C, Spec C Abschnitt 2). Fremdes Markup: Summenzeilen von order_totals
   (tr.grand_total, th.mark, td.amount, MwSt.-Zeilen), Zahlungsinfo und DHL-Lieferservices. */
body .bga .bga-ov-view > .bga-back {
    align-self: flex-start;
}

body .bga .bga-ov-vhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
}

body .bga .bga-ov-vhead__title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body .bga .bga-ov-vhead__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}

body .bga .bga-ov-vhead__line > .bga-h1 {
    font-size: 32px;
}

body .bga .bga-ov-vhead__line > .bga-chip {
    font-size: 14px;
}

body .bga .bga-ov-vhead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

body .bga .bga-ov-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga .bga-ov-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

body .bga .bga-ov-step__bar {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--bga-line);
}

body .bga .bga-ov-step--done .bga-ov-step__bar {
    background: var(--bga-green);
}

body .bga .bga-ov-step__label {
    color: var(--bga-muted);
    font-size: 16px;
    font-weight: 600;
}

body .bga .bga-ov-step--done .bga-ov-step__label {
    color: var(--bga-text);
}

body .bga .bga-ov-step__date {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-ov-ship {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}

body .bga .bga-ov-steps + .bga-ov-ship {
    padding-top: 16px;
    border-top: 1px solid var(--bga-line-soft);
}

body .bga .bga-ov-ship__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga .bga-ov-ship__entry {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

body .bga .bga-ov-ship__carrier {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-ov-ship__number {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}

body .bga .bga-ov-items {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

body .bga .bga-ov-items__title {
    padding: 18px 20px;
}

body .bga .bga-ov-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga .bga-ov-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 0;
    padding: 14px 20px;
    border-top: 1px solid var(--bga-line-soft);
}

body .bga .bga-ov-line__product {
    display: flex;
    flex: 999 1 300px;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

body .bga .bga-ov-line__img {
    width: 64px;
    height: 64px;
    border-radius: 10px;
}

body .bga .bga-ov-line__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

body .bga .bga-ov-line__name,
body .bga .bga-ov-line__name:visited {
    color: var(--bga-text);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
}

body .bga a.bga-ov-line__name:hover {
    text-decoration: underline;
}

body .bga .bga-ov-line__meta {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-ov-line__price {
    display: flex;
    flex: 1 1 200px;
    justify-content: space-between;
    gap: 16px;
}

body .bga .bga-ov-line__total {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

body .bga .bga-ov-items__totals {
    display: flex;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid var(--bga-line);
    background: #faf8f5;
}

body .bga .bga-ov-totals {
    width: 100%;
    max-width: 340px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

body .bga .bga-ov-totals th,
body .bga .bga-ov-totals td {
    padding: 3px 0;
    border: 0;
    background: transparent;
    color: var(--bga-text-2);
    font-family: var(--bga-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    vertical-align: top;
}

body .bga .bga-ov-totals td {
    padding-left: 20px;
    color: var(--bga-text);
    text-align: right;
    white-space: nowrap;
}

body .bga .bga-ov-totals td.mark {
    padding-left: 0;
    color: var(--bga-text-2);
    text-align: left;
    white-space: normal;
}

body .bga .bga-ov-totals strong,
body .bga .bga-ov-totals .price {
    font-family: var(--bga-font);
    font-size: inherit;
    font-weight: 400;
}

body .bga .bga-ov-totals .grand_total th,
body .bga .bga-ov-totals .grand_total td,
body .bga .bga-ov-totals .grand_total_incl th,
body .bga .bga-ov-totals .grand_total_incl td {
    padding-top: 8px;
    border-top: 1px solid var(--bga-line);
    color: var(--bga-text);
    font-size: 19px;
    font-weight: 600;
}

body .bga .bga-ov-totals .grand_total strong,
body .bga .bga-ov-totals .grand_total .price,
body .bga .bga-ov-totals .grand_total_incl strong,
body .bga .bga-ov-totals .grand_total_incl .price {
    font-weight: 600;
}

body .bga .bga-ov-totals .ua-tax-percent td,
body .bga .bga-ov-totals .totals-tax th,
body .bga .bga-ov-totals .totals-tax td,
body .bga .bga-ov-totals .totals-tax-summary th,
body .bga .bga-ov-totals .totals-tax-summary td,
body .bga .bga-ov-totals .details td {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-ov-note {
    overflow-wrap: anywhere;
}

body .bga .bga-ov-comments {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga .bga-ov-comment {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
}

body .bga .bga-ov-comment__date {
    color: var(--bga-muted);
    font-size: 14px;
}

body .bga .bga-ov-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body .bga .bga-ov-info > .bga-card {
    gap: 8px;
}

body .bga .bga-ov-info .bga-card__title {
    font-size: 18px;
}

body .bga .bga-ov-ship-method {
    color: var(--bga-text);
}

body .bga .bga-ov-services,
body .bga .bga-ov-delivery,
body .bga .bga-ov-payment {
    color: var(--bga-text-2);
    font-size: 16px;
    line-height: 1.45;
}

body .bga .bga-ov-services *,
body .bga .bga-ov-delivery *,
body .bga .bga-ov-payment * {
    font-family: var(--bga-font);
}

body .bga .bga-ov-delivery {
    margin: 6px 0 0;
}

body .bga .bga-ov-delivery .block,
body .bga .bga-ov-delivery .box,
body .bga .bga-ov-delivery .box-content {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body .bga .bga-ov-delivery .block-title,
body .bga .bga-ov-delivery .box-title {
    margin: 0 0 4px;
}

body .bga .bga-ov-services strong,
body .bga .bga-ov-services b,
body .bga .bga-ov-services h3,
body .bga .bga-ov-services h4,
body .bga .bga-ov-services .title,
body .bga .bga-ov-delivery strong,
body .bga .bga-ov-delivery b,
body .bga .bga-ov-delivery h3,
body .bga .bga-ov-delivery h4,
body .bga .bga-ov-delivery .title,
body .bga .bga-ov-payment strong,
body .bga .bga-ov-payment b,
body .bga .bga-ov-payment h3,
body .bga .bga-ov-payment h4,
body .bga .bga-ov-payment .title {
    font-weight: 600;
}

body .bga .bga-ov-services dt,
body .bga .bga-ov-services th,
body .bga .bga-ov-payment dt,
body .bga .bga-ov-payment th {
    margin: 0;
    padding: 0;
    font-weight: 400;
    text-align: left;
}

body .bga .bga-ov-services table,
body .bga .bga-ov-payment table {
    margin: 6px 0 0;
    border: 0;
    border-collapse: collapse;
    background: transparent;
}

body .bga .bga-ov-services th,
body .bga .bga-ov-services td,
body .bga .bga-ov-payment th,
body .bga .bga-ov-payment td {
    padding: 2px 12px 2px 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    vertical-align: top;
}

body .bga .bga-ov-docs {
    scroll-margin-top: 24px;
}

body .bga .bga-ov-doc,
body .bga .bga-ov-doc:visited,
body .bga .bga-ov-doc:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--bga-tap);
    color: var(--bga-text);
    text-decoration: underline;
}

@media (max-width: 767px) {
    body .bga .bga-ov-vhead__line > .bga-h1 {
        font-size: 28px;
    }

    body .bga .bga-ov-vhead__actions,
    body .bga .bga-ov-vhead__actions > .bga-btn,
    body .bga .bga-ov-ship > .bga-btn {
        width: 100%;
    }

    body .bga .bga-ov-steps {
        gap: 8px;
    }

    body .bga .bga-ov-info {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bga .bga-ov-line__price {
        padding-left: 78px;
    }

    body .bga .bga-ov-totals {
        max-width: none;
    }
}

/* Sendung verfolgen (Popup shipping_tracking_popup, Teilprojekt C, Spec C Abschnitt 8).
   Die Wurzel traegt .bga und .bga-track zugleich: seitenweite Regeln als "body .bga.bga-track". */
/* Breite wie die uebrigen Shopseiten: hoechstens 1170 px, zentriert (Layout empty hat keinen Seitencontainer,
   Wunsch des Users 2026-10-07); mobil volle Breite */
body .bga.bga-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto 40px;
    padding: 32px;
    border-radius: 16px;
    background: var(--bga-bg);
}

@media (max-width: 767px) {
    body .bga.bga-track {
        gap: 16px;
        margin: 0 0 40px;
        padding: 16px 12px;
        border-radius: 0;
    }
}

body .bga .bga-track__head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body .bga .bga-track__card {
    gap: 16px;
}

body .bga .bga-track__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body .bga .bga-track__carrier {
    color: var(--bga-muted);
    font-size: 15px;
}

body .bga .bga-track__number {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
    user-select: all;
}

body .bga .bga-track__now {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 16px 18px;
    border-left: 6px solid var(--bga-muted);
    border-radius: var(--bga-radius-sm);
    background: var(--bga-tint);
}

body .bga .bga-track__now--delivered {
    border-left-color: var(--bga-green);
    background: #e8f2e9;
}

body .bga .bga-track__now--problem {
    border-left-color: var(--bga-red);
    background: #fff5f5;
}

body .bga .bga-track__now-label {
    color: var(--bga-muted);
    font-size: 14px;
    font-weight: 600;
}

body .bga .bga-track__now-text {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
}

body .bga .bga-track__now--delivered .bga-track__now-text {
    color: #2e5e31;
}

body .bga .bga-track__now--problem .bga-track__now-text {
    color: #8a0a17;
}

body .bga .bga-track__now-meta {
    color: var(--bga-text-2);
    font-size: 16px;
}

body .bga .bga-track__delivery {
    font-size: 17px;
    font-weight: 600;
}

body .bga .bga-track__history-title {
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 600;
}

body .bga .bga-track__timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga .bga-track__event {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0 0 18px 30px;
    break-inside: avoid;
}

body .bga .bga-track__event:last-child {
    padding-bottom: 0;
}

body .bga .bga-track__event::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: -8px;
    left: 7px;
    width: 2px;
    background: var(--bga-line);
}

body .bga .bga-track__event:last-child::before {
    display: none;
}

body .bga .bga-track__event::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 1px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--bga-muted);
    border-radius: 50%;
    background: #ffffff;
}

body .bga .bga-track__event--latest::after {
    border-color: var(--bga-text);
    background: var(--bga-text);
}

body .bga .bga-track__when {
    color: var(--bga-muted);
    font-size: 14px;
    font-weight: 600;
}

body .bga .bga-track__text {
    font-size: 17px;
    line-height: 1.35;
}

body .bga .bga-track__where {
    color: var(--bga-muted);
    font-size: 15px;
}

body .bga .bga-track__foot {
    display: flex;
    justify-content: center;
}

body .bga .bga-track__close[hidden] {
    display: none;
}

@media (max-width: 767px) {
    body .bga.bga-track {
        padding: 20px 16px 32px;
    }

    body .bga .bga-track__now-text {
        font-size: 20px;
    }
}

@media print {
    body .bga.bga-track {
        max-width: none;
        padding: 0;
        background: #ffffff;
    }

    body .bga .bga-track__card {
        border-color: #999999;
    }

    body .bga.bga-track .bga-btn {
        display: none;
    }

    body .bga .bga-track__event::before,
    body .bga .bga-track__event::after {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Adressbuch (Teilprojekt D, Spec D Abschnitt 3) */
body .bga .bga-addr-book {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-addr-book--more {
    margin: 28px 0 0;
}

body .bga .bga-addr-book__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

body .bga .bga-addr-book__intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body .bga .bga-addr-book__title {
    margin: 8px 0 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

body .bga .bga-addr-book__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body .bga .bga-addr-card {
    gap: 10px;
}

body .bga .bga-addr-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body .bga .bga-addr-card__chip {
    background: var(--bga-tint);
    color: var(--bga-text-2);
}

body .bga .bga-addr-card__phone {
    color: var(--bga-muted);
}

body .bga .bga-addr-card .bga-card__links {
    align-items: center;
    gap: 4px 18px;
}

body .bga .bga-addr-card .bga-btn--text {
    font-size: 16px;
}

body .bga .bga-addr-book .bga-pager {
    justify-content: flex-start;
}

@media (max-width: 767px) {
    body .bga .bga-addr-book__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bga .bga-addr-book__head > .bga-btn {
        width: 100%;
    }
}

/* Adresse bearbeiten (Teilprojekt D, Spec D Abschnitt 4) */
body .bga .bga-addr {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-addr > .bga-page-head {
    margin: 0;
}

body .bga .bga-addr .bga-card {
    gap: 18px;
    padding: 24px;
}

body .bga .bga-label .bga-muted {
    font-weight: 400;
}

body .bga .bga-addr__place {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 16px 20px;
}

body .bga .bga-addr__country {
    max-width: 420px;
}

/* Laenderauswahl aus Magentos getCountryHtmlSelect() (select#country mit leerer Klasse) */
body .bga .bga-addr__country select {
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--bga-input-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 17px;
}

body .bga.bga-shell .field select:focus,
body .bga .bga-addr__country select:focus {
    border-color: var(--bga-red);
}

body .bga .bga-addr__country select.mage-error {
    border: 2px solid var(--bga-red);
    background: #fff7f7;
}

body .bga .bga-addr__control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Der Region-Updater setzt "required" an die Zeilen Region und PLZ (div.field), der Stern folgt dem */
body .bga .bga-addr .field.required > .bga-label::after {
    content: " *";
    color: var(--bga-red);
}

/* PLZ-Hinweis von addressValidation (zipInput.next()); Magento zeigt und verbirgt ihn per jQuery show/hide */
body .bga .bga-addr__zip-warning {
    display: none;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #ecd9b3;
    border-radius: var(--bga-radius-sm);
    background: #fffaf0;
    color: var(--bga-text);
    font-size: 15px;
}

body .bga .bga-addr__defaults {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0 0;
    border-top: 1px solid var(--bga-line-soft);
}

body .bga .bga-addr__default {
    display: flex;
    align-items: center;
    min-height: var(--bga-tap);
    margin: 0;
}

body .bga .bga-addr__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

body .bga .bga-addr__submit .bga-btn {
    flex: 0 1 260px;
    min-height: 50px;
    padding: 0 24px;
    font-size: 18px;
}

body .bga .bga-addr__submit .bga-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bga-tap);
    padding: 0 12px;
}

@media (max-width: 767px) {
    body .bga .bga-addr .bga-card {
        padding: 20px;
    }

    body .bga .bga-addr__place {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bga .bga-addr__country {
        max-width: none;
    }

    body .bga .bga-addr__submit .bga-btn {
        flex-basis: 100%;
    }
}

/* Kontoinformationen (Teilprojekt D, Spec D Abschnitt 5). Passwortstaerke und "Anzeigen" nutzen die
   globalen Regeln aus Teilprojekt F. */
body .bga .bga-account {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-account > .bga-page-head {
    margin: 0;
}

body .bga .bga-account .bga-card {
    gap: 18px;
    padding: 24px;
}

body .bga .bga-account__widgets {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body .bga .bga-account__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
}

/* fieldset-Element: Browser-Rahmen und -Abstaende weg; ein- und ausgeblendet von changeEmailPassword */
body .bga .bga-account__change {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* ohne JavaScript bleibt das Fieldset sichtbar; mit JavaScript blendet changeEmailPassword es erst nach dem Laden
   aus, deshalb hier schon vorab verstecken, solange keine der beiden Auswahlen gesetzt ist (kein Aufblitzen) */
body .bga .bga-account__form:not(:has([data-role="change-email"]:checked, [data-role="change-password"]:checked)) .bga-account__change {
    display: none;
}

body .bga .bga-account__narrow {
    max-width: 520px;
}

body .bga .bga-account__additional {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Knopfbereich; traegt zusaetzlich .actions-toolbar (Amasty Customer Attributes) */
body .bga .bga-account__submit,
body .bga .bga-account__submit.actions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
}

body .bga .bga-account__submit.actions-toolbar::before,
body .bga .bga-account__submit.actions-toolbar::after {
    display: none;
    content: none;
}

body .bga .bga-account__submit .bga-btn {
    flex: 0 1 260px;
    min-height: 50px;
    padding: 0 24px;
    font-size: 18px;
}

@media (max-width: 767px) {
    body .bga .bga-account .bga-card {
        padding: 20px;
    }

    body .bga .bga-account__narrow {
        max-width: none;
    }

    body .bga .bga-account__submit .bga-btn {
        flex-basis: 100%;
    }
}

/* Privatsphaere (Teilprojekt D, Spec D Abschnitt 7) */
body .bga .bga-gdpr {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

body .bga .bga-gdpr > .bga-page-head {
    margin: 0;
}

body .bga .bga-consents {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

body .bga .bga-consents__head {
    padding: 20px 24px 6px;
}

body .bga .bga-consents__form {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* Zeile Newsletter: Text links, Knopf zum Rabatt-Modal rechts; bricht auf schmalen Bildschirmen um */
body .bga .bga-consent {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 24px;
    border-top: 1px solid var(--bga-line-soft);
}

body .bga .bga-consent__text {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    min-width: 0;
}

body .bga .bga-consent__title {
    font-size: 17px;
    font-weight: 600;
}

body .bga .bga-consent__desc {
    color: var(--bga-muted);
    font-size: 15px;
}

body .bga .bga-consent > .bga-btn {
    flex: 0 0 auto;
}

/* Versteckt, bis newsletter-modal.js das Rabatt-Modal findet (display: flex der Bausteine schlaegt sonst hidden) */
body .bga .bga-consents[hidden],
body .bga .bga-consent[hidden] {
    display: none;
}

body .bga .bga-consent__save {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px 16px;
}

body .bga .bga-consent__save[hidden] {
    display: none;
}

/* Amastys Einwilligungs-Haekchen (fremdes Markup, Block opting_consents_block) als Schalter: per appearance: none
   gezeichnet. Der Knopf ist ein radialer Verlauf statt ::before, weil Firefox auf input-Elementen keine
   Pseudo-Elemente zeichnet. */
body .bga .bga-consents input.amgdpr-checkbox[type="checkbox"] {
    position: relative;
    top: 0;
    flex: 0 0 56px;
    width: 56px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: #b5afa6;
    background-image: radial-gradient(circle at 16px 50%, #ffffff 12px, transparent 13px);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

body .bga .bga-consents input.amgdpr-checkbox[type="checkbox"]:checked {
    background-color: var(--bga-green);
    background-image: radial-gradient(circle at 40px 50%, #ffffff 12px, transparent 13px);
}

/* Teilprojekt E: Schalter "Erinnerung an Nachbestellungen" (Berggut_Reorder::reminder/consent.phtml), gleiche Optik
   wie Amastys Haekchen; eigene Regeln statt Selektorliste, damit die eingefrorenen Bausteine von D gleich bleiben */
body .bga .bga-consents input.bga-consent__switch[type="checkbox"] {
    position: relative;
    top: 0;
    flex: 0 0 56px;
    width: 56px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: #b5afa6;
    background-image: radial-gradient(circle at 16px 50%, #ffffff 12px, transparent 13px);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

body .bga .bga-consents input.bga-consent__switch[type="checkbox"]:checked {
    background-color: var(--bga-green);
    background-image: radial-gradient(circle at 40px 50%, #ffffff 12px, transparent 13px);
}

body .bga .bga-consents input.bga-consent__switch[type="checkbox"]:focus-visible {
    outline: 2px solid var(--bga-text);
    outline-offset: 2px;
}

body .bga .bga-consents .bga-reminder-consent .bga-consent__text {
    cursor: pointer;
}

/* Amastys Einwilligungen (div.amgdpr-checkbox: verstecktes Feld, Haekchen, Label): Text links, Schalter rechts */
body .bga .bga-consents div.amgdpr-checkbox {
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 0;
    margin: 0;
    padding: 14px 24px;
    border-top: 1px solid var(--bga-line-soft);
}

body .bga .bga-consents .amgdpr-label a,
body .bga .bga-consents .amgdpr-label a:visited {
    color: var(--bga-text);
    text-decoration: underline;
}

body .bga .bga-gdpr__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body .bga .bga-gdpr__card {
    gap: 12px;
    padding: 24px;
}

body .bga .bga-gdpr__text {
    color: var(--bga-text-2);
}

body .bga .bga-gdpr__form {
    gap: 14px;
    margin-top: auto;
}

body .bga .bga-gdpr__form > .bga-btn {
    align-self: flex-start;
}

body .bga .bga-gdpr__info {
    gap: 10px;
    padding: 20px 24px;
    font-size: 15px;
}

body .bga .bga-gdpr__info a,
body .bga .bga-gdpr__info a:visited {
    color: var(--bga-text);
    text-decoration: underline;
}

/* Mail-Link im DSB-Text von Amasty (a.action.primary.amgdpr-mail, fremdes Markup) */
body .bga .bga-gdpr__dpo .action.primary {
    display: inline-flex;
    align-items: center;
    min-height: var(--bga-tap);
    margin: 8px 0 0;
    padding: 0 18px;
    border: 1px solid var(--bga-text);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 767px) {
    body .bga .bga-gdpr__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body .bga .bga-consent,
    body .bga .bga-consents div.amgdpr-checkbox {
        padding: 14px 20px;
    }

    body .bga .bga-consents__head {
        padding: 20px 20px 6px;
    }

    body .bga .bga-consent__save {
        padding: 0 20px 16px;
    }

    body .bga .bga-gdpr__card {
        padding: 20px;
    }
}

/* Fremde Kontoseiten (Teilprojekt D, Spec D Abschnitt 9): Stripe-Zahlungsmethoden und -Abos, gespeicherte Karten
   (Vault), Ruecksendeetiketten (Netresearch), Bewertungen, Downloads, PayPal-Vereinbarungen. Kein eigenes Template:
   das Markup der Module in Magentos column.main bekommt Schrift, Abstaende, Rahmen und Knopf-Optik.
   Jeder Selektor fremder Klassen endet mit :not(.column.main [class*="bga-"] *): nichts innerhalb unserer eigenen
   Bausteine wird getroffen (z. B. die Lieferservice-Box in der Bestellansicht aus C, die Mail-Schaltflaeche im
   DSB-Text der Privatsphaere). .actions-toolbar zusaetzlich nur ohne bga-Klasse (Ausnahmen in register.phtml und
   account/edit.phtml haben eigene Regeln). Waechter: customerarea-forms-layout.test.js. */
body .bga.bga-shell .bga-main .column.main .table-wrapper:not(.column.main [class*="bga-"] *) {
    margin: 0 0 20px;
    overflow-x: auto;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
}

body .bga.bga-shell .bga-main .column.main table.data.table:not(.column.main [class*="bga-"] *) {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    background: #ffffff;
    font-family: var(--bga-font);
    font-size: 16px;
}

body .bga.bga-shell .bga-main .column.main table.data.table th:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main table.data.table td:not(.column.main [class*="bga-"] *) {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--bga-line-soft);
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    vertical-align: middle;
}

body .bga.bga-shell .bga-main .column.main table.data.table thead th:not(.column.main [class*="bga-"] *) {
    color: var(--bga-muted);
    font-size: 14px;
    font-weight: 600;
}

body .bga.bga-shell .bga-main .column.main table.data.table tbody tr:last-child td:not(.column.main [class*="bga-"] *) {
    border-bottom: 0;
}

body .bga.bga-shell .bga-main .column.main table.data.table td a:not(.column.main [class*="bga-"] *) {
    color: var(--bga-red-dark);
    text-decoration: underline;
}

body .bga.bga-shell .bga-main .column.main .action.primary:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .action.primary:not(.column.main [class*="bga-"] *):visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 0 18px;
    border: 1px solid var(--bga-red);
    border-radius: var(--bga-radius-sm);
    background: var(--bga-red);
    box-shadow: none;
    color: #ffffff;
    font-family: var(--bga-font);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

body .bga.bga-shell .bga-main .column.main .action.primary:not(.column.main [class*="bga-"] *):hover {
    border-color: var(--bga-red-dark);
    background: var(--bga-red-dark);
    color: #ffffff;
}

body .bga.bga-shell .bga-main .column.main button.action:not(.primary):not(.column.main [class*="bga-"] *) {
    min-height: var(--bga-tap);
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--bga-input-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    box-shadow: none;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

body .bga.bga-shell .bga-main .column.main a.action:not(.primary):not(.column.main [class*="bga-"] *) {
    color: var(--bga-red);
    font-weight: 600;
    text-decoration: none;
}

body .bga.bga-shell .bga-main .column.main .actions-toolbar:not([class*="bga-"]):not(.column.main [class*="bga-"] *) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
}

body .bga.bga-shell .bga-main .column.main .actions-toolbar:not([class*="bga-"]) > .primary:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .actions-toolbar:not([class*="bga-"]) > .secondary:not(.column.main [class*="bga-"] *) {
    float: none;
    margin: 0;
}

body .bga.bga-shell .bga-main .column.main .message:not(.column.main [class*="bga-"] *) {
    margin: 0 0 16px;
    padding: 14px 18px;
    border: 1px solid #ecd9b3;
    border-radius: var(--bga-radius);
    background: #fffaf0;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 17px;
}

body .bga.bga-shell .bga-main .column.main .message.error:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .message-error:not(.column.main [class*="bga-"] *) {
    border-color: #efb6bc;
    background: #fff5f5;
    color: #8a0a17;
}

body .bga.bga-shell .bga-main .column.main .message.success:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .message-success:not(.column.main [class*="bga-"] *) {
    border-color: #bcd9be;
    background: #f1f7f1;
}

body .bga.bga-shell .bga-main .column.main .message:not(.column.main [class*="bga-"] *) > *:first-child::before {
    display: none;
}

body .bga.bga-shell .bga-main .column.main .fieldset:not(.column.main [class*="bga-"] *) {
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
}

body .bga.bga-shell .bga-main .column.main .legend:not(.column.main [class*="bga-"] *) {
    float: none;
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

body .bga.bga-shell .bga-main .column.main .fieldset > .field + .field:not(.column.main [class*="bga-"] *) {
    margin-top: 16px;
}

body .bga.bga-shell .bga-main .column.main .block:not(.column.main [class*="bga-"] *) {
    margin: 0 0 20px;
}

body .bga.bga-shell .bga-main .column.main .block-title:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .box-title:not(.column.main [class*="bga-"] *) {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 20px;
    font-weight: 600;
}

body .bga.bga-shell .bga-main .column.main .block-title strong:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .box-title span:not(.column.main [class*="bga-"] *) {
    font-size: inherit;
    font-weight: 600;
}

body .bga.bga-shell .bga-main .column.main .box:not(.column.main [class*="bga-"] *) {
    float: none;
    width: auto;
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
}

body .bga.bga-shell .bga-main .column.main .pages .items:not(.column.main [class*="bga-"] *) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body .bga.bga-shell .bga-main .column.main .pages .item:not(.column.main [class*="bga-"] *) {
    margin: 0;
}

body .bga.bga-shell .bga-main .column.main .pages .item a:not(.column.main [class*="bga-"] *),
body .bga.bga-shell .bga-main .column.main .pages .item strong:not(.column.main [class*="bga-"] *) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius-sm);
    background: #ffffff;
    color: var(--bga-text);
    font-family: var(--bga-font);
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

body .bga.bga-shell .bga-main .column.main .pages .item.current strong:not(.column.main [class*="bga-"] *) {
    border-color: var(--bga-red);
    background: var(--bga-red);
    color: #ffffff;
    font-weight: 600;
}

/* Stripe-Zahlungsmethoden (KO-Template setup_element.html): Klassen und ID gibt es nur bei Stripe */
body .bga.bga-shell .bga-main #stripe-setup-element {
    margin: 0 0 16px;
    padding: 16px;
    border: 1px solid var(--bga-line);
    border-radius: var(--bga-radius);
    background: #ffffff;
}

body .bga.bga-shell .bga-main .add-new-payment-method {
    margin: 24px 0 0;
}

body .bga.bga-shell .bga-main .saved-payment-method-icon {
    margin: 0 10px 0 0;
    vertical-align: middle;
}

@media (max-width: 767px) {
    body .bga.bga-shell .bga-main .column.main table.data.table th:not(.column.main [class*="bga-"] *),
    body .bga.bga-shell .bga-main .column.main table.data.table td:not(.column.main [class*="bga-"] *) {
        padding: 10px 12px;
    }
}