/* ==================================================================
   KUNDENKONTO — Login & Passwort vergessen
   Porto rendert auf /customer/account/login/ zwei identische schwarze
   ALL-CAPS-Bloecke (btn-v-dark): Submit "Anmelden" und den Register-
   LINK "Ein Konto erstellen" — keine Primaer/Sekundaer-Hierarchie,
   Versalien gegen die shopweite Ruecknahme. "Passwort vergessen?" ist
   zwar richtig platziert (direkt am Passwortfeld, NN/g-Empfehlung),
   aber Ink ohne Unterstrich -> nicht als Link erkennbar.
   Jetzt: Submit = gruener Primary (wie Checkout-CTA), Konto erstellen =
   Outline-Sekundaer (Vokabular der "Bereits Kunde?"-Zeile), remind als
   echter Link. /forgotpassword/: Note von #777 (AA-Fail) auf Ink,
   versteckten "Zurueck"-Link (-> Login) wieder einblenden, Submit wie
   Login-Primary. createpassword (Reset-Formular aus der Mail) teilt
   die Selektoren — der Flow bleibt durchgaengig konsistent.
   Token-basiert -> naturteil erbt seinen Akzent automatisch.
   !important gegen Porto-Utility-Klassen (btn-v-dark, py-3, text-md).
   ================================================================== */
body.customer-account-login .column.main,
body.customer-account-forgotpassword .column.main,
body.customer-account-createpassword .column.main {
    --om-accent: var(--theme-color, #179c80);
    --om-accent-ink: color-mix(in srgb, var(--om-accent) 72%, black);
}

/* Primary-Submit: Anmelden / Passwort zuruecksetzen / Passwort setzen */
body.customer-account-login .column.main button.action.login,
body.customer-account-forgotpassword .column.main button.action.submit,
body.customer-account-createpassword .column.main button.action.submit {
    background: var(--om-accent) !important;
    border: 1px solid var(--om-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.customer-account-login .column.main button.action.login:hover,
body.customer-account-forgotpassword .column.main button.action.submit:hover,
body.customer-account-createpassword .column.main button.action.submit:hover {
    background: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    border-color: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    color: #fff !important;
}
body.customer-account-login .column.main button.action.login:focus-visible,
body.customer-account-forgotpassword .column.main button.action.submit:focus-visible,
body.customer-account-createpassword .column.main button.action.submit:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* "Ein Konto erstellen" ist NAVIGATION (Link zur Registrierung) ->
   Outline-Sekundaer, klar vom Primary unterscheidbar, mit Luft dazwischen */
body.customer-account-login .column.main a.action.create {
    background: #fff !important;
    border: 1px solid var(--om-accent-ink) !important;
    color: var(--om-accent-ink) !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin-top: 14px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
body.customer-account-login .column.main a.action.create:hover {
    background: color-mix(in srgb, var(--om-accent) 10%, #fff) !important;
    color: var(--om-accent-ink) !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--om-accent) 14%, transparent);
    text-decoration: none !important;
}
body.customer-account-login .column.main a.action.create:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* "Passwort vergessen?" als erkennbarer Link (war Ink ohne Unterstrich).
   Platzierung direkt unterm Passwortfeld bleibt — die ist best practice. */
body.customer-account-login .column.main a.action.remind {
    color: var(--theme-color-text, #0e7560) !important;
    font-size: 14px;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.customer-account-login .column.main a.action.remind:hover {
    color: color-mix(in srgb, var(--theme-color-text, #0e7560) 80%, black) !important;
}

/* Forgot-Password: Intro-Note von #777 (AA-Fail) auf lesbares Ink */
body.customer-account-forgotpassword .column.main .field.note {
    color: #3c4248 !important;
}

/* Porto versteckt den "Zurueck"-Link — wieder einblenden UND aufwerten
   (Template-Override Magento_Customer/form/forgotpassword.phtml): fuehrender
   ‹-Chevron als Richtungssignal, sprechender Text ("Zurueck zur Anmeldung",
   per Referrer-JS "Zurueck zur Kasse"). Optisch weiter ein Textlink (kein
   Button), aber Trefferflaeche >=48px (Touch-Hausregel) ueber vertikales
   Padding statt Hoehe. Chevron in Markenfarbe wie Konto-Sidebar/Megamenue. */
body.customer-account-forgotpassword .column.main .actions-toolbar .secondary {
    display: inline-block !important;
}
body.customer-account-forgotpassword .column.main a.action.back {
    /* Porto stylt .action.back als dunklen Button -> zum Textlink zuruecksetzen */
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: none !important;
    border: 0 !important;
    padding: 14px 0 !important; /* 2x14 + 21px Zeilenhoehe = 49px Trefferflaeche */
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    margin-top: 6px;
    color: var(--theme-color-text, #0e7560) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
/* Chevron (Inline-SVG, stroke=currentColor) in Markenfarbe, Text bleibt Ink-Gruen */
body.customer-account-forgotpassword .column.main a.action.back .action-back__chevron {
    flex: 0 0 auto;
    color: var(--theme-color, #179c80);
}
body.customer-account-forgotpassword .column.main a.action.back:hover {
    color: color-mix(in srgb, var(--theme-color-text, #0e7560) 80%, black) !important;
}

/* "* Pflichtfelder"-Hinweis: Signalrot nur fuer Fehler reservieren */
body.customer-account-login .column.main .fieldset:after,
body.customer-account-forgotpassword .column.main .fieldset:after,
body.customer-account-createpassword .column.main .fieldset:after {
    color: #6b6b6b !important;
}

@media (prefers-reduced-motion: reduce) {
    body.customer-account-login .column.main button.action.login,
    body.customer-account-login .column.main a.action.create,
    body.customer-account-forgotpassword .column.main button.action.submit,
    body.customer-account-createpassword .column.main button.action.submit {
        transition: none;
    }
}


/* ==================================================================
   KUNDENKONTO — Registrierung (/customer/account/create/)
   Befund CT123: Porto rendert die Neuanmeldung ZWEISPALTIG — links
   "Persoenliche Informationen" (nur Vorname/Nachname), rechts
   "Anmeldeinformationen" (E-Mail, Passwort, Bestaetigung, Captcha).
   Die linke Spalte ist zur Haelfte leer, und der Submit-Button schwebt
   als dunkler ALL-CAPS-Porto-Kasten (btn-v-dark, radius 0) unten in
   diesem Loch — abgekoppelt vom letzten Feld (Captcha rechts). Der
   Blick zickzackt, der Abschluss liegt unten-links statt unterm Formular.
   Labels sind #777 (4.07:1 = AA-Fail), Passwortstaerke-Text ebenso,
   der "Zurueck"-Link ist von Porto ausgeblendet.
   Jetzt: eine ruhige, EINSPALTIGE, zentrierte Form (690px, wie die
   Login-Seite gegenueber — der Nutzer toggelt per "Ein Konto erstellen"
   direkt zwischen beiden, gleiche Breite/Typo ist der Punkt). Zwei
   gestapelte Abschnitte, gruener Checkout-Primary ueber die volle
   Feldbreite (wie Login-"Anmelden"), "Zurueck" als Textlink darunter,
   Labels/Intro auf lesbares Ink, Fokus-Ring wie im Checkout.
   Der Label-/Intro-Fix greift ueber die body-Klassen AUCH auf die
   Login-Seite (dort waren Labels + "Wenn Sie ein Konto haben ..."
   ebenfalls #777). Honeypot (.field-secondary-contact, 1x1px) bleibt
   unangetastet. Token-basiert -> naturteil erbt seinen Akzent.
   ================================================================== */

/* Label-Kontrast: Porto faerbt Formular-Labels #777 (AA-Fail) -> Ink.
   Gilt fuer Login UND Registrierung (Geschwister-Konsistenz). */
body.customer-account-login .column.main .label span,
body.customer-account-create .column.main .label span {
    color: #2f2f2f !important;
}
/* Login-Intro ("Wenn Sie ein Konto haben ...") war ebenfalls #777 */
body.customer-account-login .column.main .fieldset.login > .field.note {
    color: #3c4248 !important;
}

/* Struktur: aus der unbalancierten Zweispaltigkeit eine einspaltige,
   zentrierte Form (690px = Login-Feldbreite). */
body.customer-account-create .column.main .form.create.account {
    max-width: 690px;
    margin-inline: auto;
}
body.customer-account-create .column.main .fieldset.create.info,
body.customer-account-create .column.main .fieldset.create.account {
    width: 100% !important;
    float: none !important;
    margin-bottom: 26px;
}
/* Legend wie der Login-Block-Titel: 20px, Satzschreibung, Ink */
body.customer-account-create .column.main .fieldset > .legend {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #222529 !important;
    border-bottom: 0 !important;
    margin-bottom: 12px !important;
}

/* Input-Fokus (gruener Ring, roter Ring bei Fehler) ist jetzt global in
   base-typography.css - eine Fokus-Sprache shopweit. */

/* Passwortstaerke-Text lesbar (war #777) */
body.customer-account-create .column.main .password-strength-meter {
    color: #3c4248 !important;
}

/* "* Pflichtfelder"-Hinweis muted (Signalrot nur fuer Fehler) */
body.customer-account-create .column.main .fieldset:after {
    color: #6b6b6b !important;
}

/* Actions: gruener Primary (wie Login-"Anmelden") ueber die volle
   Feldbreite, "Zurueck" als Textlink darunter. */
body.customer-account-create .column.main .form.create.account .actions-toolbar {
    width: 100% !important;
    max-width: none !important; /* Porto kappt sonst auf 50%; sein 25px-
                                   Innenabstand bleibt und deckt sich mit
                                   dem beidseitigen Feld-Inset -> Button
                                   liegt deckungsgleich ueber den Feldern */
    text-align: left;
}
body.customer-account-create .column.main .actions-toolbar > .primary,
body.customer-account-create .column.main .actions-toolbar > .secondary {
    float: none !important;
    width: 100% !important;
}
body.customer-account-create .column.main button.action.submit.primary {
    display: block;
    width: 100%;
    background: var(--theme-color, #179c80) !important;
    border: 1px solid var(--theme-color, #179c80) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 14px 26px !important;
    transition: background-color .2s ease, border-color .2s ease;
}
body.customer-account-create .column.main button.action.submit.primary:hover {
    background: color-mix(in srgb, var(--theme-color, #179c80) 88%, black) !important;
    border-color: color-mix(in srgb, var(--theme-color, #179c80) 88%, black) !important;
    color: #fff !important;
}
body.customer-account-create .column.main button.action.submit.primary:focus-visible {
    outline: 2px solid var(--theme-color, #179c80);
    outline-offset: 2px;
}
/* "Zurueck"-Link (Porto blendet ihn aus) wieder als Textlink, zentriert */
body.customer-account-create .column.main .actions-toolbar .secondary {
    margin-top: 14px;
    text-align: center;
}
body.customer-account-create .column.main .actions-toolbar .secondary a.action.back {
    display: inline-block !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    color: var(--theme-color-text, #0e7560) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.customer-account-create .column.main .actions-toolbar .secondary a.action.back:hover {
    color: color-mix(in srgb, var(--theme-color-text, #0e7560) 80%, black) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.customer-account-create .column.main button.action.submit.primary {
        transition: none;
    }
}


/* ==================================================================
   KUNDENKONTO — Eingeloggter Bereich (Dashboard & alle Unterseiten)
   Befund CT123: graue ALL-CAPS-Boxkoepfe (#f5f5f5-Balken, gegen die
   shopweite Versalien-Ruecknahme), Sidebar als Hairline-Liste mit
   14px/#777-Links (AA-grenzwertig), Seitentitel 20px/400 in Gruen
   (Akzent als Deko), orange Porto-CAPS-Buttons (SPEICHERN, NEUE
   ADRESSE HINZUFUEGEN) statt des gruenen Checkout-Primaries, halbleeres
   Dashboard-Layout (Newsletter-Box entfaellt -> Loch rechts).
   Jetzt: Produkt-Register (feste Skala, Restrained, earned familiarity)
   mit Marken-DNA — Sidebar im Megamenue-/LN-Vokabular (›-Chevron,
   translateX(4px), aktiv fett+Akzent), Boxen als ruhige Karten
   (1px Border, 8px Radius, Titel normal geschrieben), Buttons im
   Checkout-Gruen, Tabellen mit klaren Koepfen + sanftem Row-Hover,
   Status als Pille. Scope body.account trifft NUR eingeloggte Seiten
   (Login/Forgot haben die Klasse nicht, s. Login-Sektion weiter oben).
   Token-basiert -> naturteil erbt seinen Akzent automatisch.
   !important nur wo Porto-Utilities oder Inline-Styles dagegenhalten.
   ================================================================== */
body.account .page-main {
    --om-accent: var(--theme-color, #179c80);
    --om-accent-ink: color-mix(in srgb, var(--om-accent) 72%, black);
    --om-ink: #222529;
    --om-line: #e3e6e9;
}

/* --- Seitentitel: Ink statt Gruen-Deko, klare Hierarchie ueber allem --- */
body.account .page-title-wrapper .page-title {
    color: var(--om-ink) !important;
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    text-transform: none !important;
}
body.account .page-title-wrapper .order-date {
    color: #6b7177;
    font-size: 14px;
    margin-top: 4px;
}
body.account .page-title-wrapper .order-date .label {
    font-weight: 400;
}

/* Bestellstatus als ruhige Marken-Pille statt grauem CAPS-Rahmen */
body.account .page-title-wrapper .order-status {
    display: inline-block;
    border: 0 !important;
    border-radius: 999px;
    background: color-mix(in srgb, var(--om-accent) 12%, #fff);
    color: var(--om-accent-ink);
    font-size: 13px;
    font-weight: 600;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 4px 12px;
    vertical-align: middle;
}

/* --- Sidebar-Navigation: Megamenue-/LN-Paritaet ---------------------
   Gleiche Sprache wie linke Kategorie-Nav: ›-Chevron als Bullet,
   Hover = 4px nach rechts + Akzent, aktiv = fett + Akzent-Tint.
   Hairlines zwischen jedem Eintrag raus (Hairline-Suppe). */
body.account .block-collapsible-nav .item {
    border: 0 !important;
    margin: 2px 0;
}
body.account .block-collapsible-nav .item a,
body.account .block-collapsible-nav .item.current > strong {
    position: relative;
    display: block;
    padding: 9px 10px 9px 28px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--om-ink, #222529) !important;
    font-weight: 400;
    border: 0 !important;
    border-radius: 8px;
    transition: transform 0.15s ease, color 0.15s ease,
                background-color 0.15s ease;
}
/* Porto-Icon-Dreieck durch den ›-Chevron des Megamenues ersetzen */
body.account .block-collapsible-nav .item a::before,
body.account .block-collapsible-nav .item.current > strong::before {
    content: "\203A" !important;
    font-family: inherit !important;
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--om-accent);
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
}
body.account .block-collapsible-nav .item a:hover {
    transform: translateX(4px);
    color: var(--om-accent-ink) !important;
    background: color-mix(in srgb, var(--om-accent) 7%, #fff);
    text-decoration: none !important;
}
body.account .block-collapsible-nav .item a:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}
body.account .block-collapsible-nav .item.current > strong {
    color: var(--om-accent-ink) !important;
    font-weight: 700;
    background: color-mix(in srgb, var(--om-accent) 10%, #fff);
}
/* Gruppen-Trenner: eine bewusste Linie statt Hairline pro Eintrag */
body.account .block-collapsible-nav .item .delimiter {
    display: block;
    height: 1px;
    background: #e8ebee;
    border: 0 !important;
    margin: 8px 10px;
}

/* --- Blocks & Boxen: ruhige Karten statt grauer CAPS-Balken --------- */
body.account .column.main .block:not(.widget) {
    margin-bottom: 36px;
}
body.account .column.main .block:not(.widget) > .block-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 14px;
}
body.account .column.main .block:not(.widget) > .block-title > strong {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--om-ink) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
body.account .column.main .block:not(.widget) > .block-title .action {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-accent-ink) !important;
}
body.account .column.main .block:not(.widget) > .block-title .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Portos Deko-Pseudos am Block-Titel (zentrieren ihn mobil) abschalten —
   der Titel steht links, der Verwalten-Link rechts (space-between) */
body.account .column.main .block:not(.widget) > .block-title::before,
body.account .column.main .block:not(.widget) > .block-title::after {
    content: none !important;
}

/* Boxen nebeneinander ohne Float-Loecher: Grid schliesst das halbleere
   Dashboard (Kontaktinfo-Box spannt allein die volle Breite auf) */
body.account .column.main .block:not(.widget) > .block-content:has(> .box) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
/* Magentos Clearfix-Pseudos (display:table) wuerden im Grid selbst zu
   Grid-Items und belegen Zelle 1 -> Boxen ruecken nach rechts. Weg damit.
   :has(> .box)-Scope: Block-Contents ohne Boxen (z. B. Adressliste mit
   Tabelle + Toolbar) bleiben im Normalfluss, sonst teilen sich Tabelle
   und "Anzeigen"-Limiter zwei Grid-Spalten und ueberlappen. */
body.account .column.main .block:not(.widget) > .block-content:has(> .box)::before,
body.account .column.main .block:not(.widget) > .block-content:has(> .box)::after {
    content: none !important;
}
/* Bestelldetail: 4 kompakte Info-Boxen duerfen enger nebeneinander */
body.account .column.main .block-order-details-view > .block-content {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* Zahlungsart spannt die volle Breite: sie faellt als 4. Box allein in
   Reihe 2 und wuerde dort auf 1/3-Breite mit den Vorkasse-Bankdaten
   (IBAN, Kontoinhaber) unlesbar hoch umbrechen. */
body.account .column.main .block-order-details-view .box-order-billing-method {
    grid-column: 1 / -1;
}
body.account .column.main .block-order-details-view .box-order-billing-method .box-content {
    max-width: 68ch; /* Zeilenlaenge des Hinweistexts trotz voller Boxbreite deckeln */
}

body.account .column.main .box {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--om-line);
    border-radius: 8px;
    padding: 18px 20px;
}
body.account .column.main .box .box-title {
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--om-ink) !important;
    padding: 0 0 10px !important;
    margin: 0 !important;
    display: block;
}
body.account .column.main .box .box-content {
    padding: 0 !important;
    background: transparent !important; /* Porto legt #fbfbfb-Innenflaeche an */
    min-height: 0 !important;           /* Porto: 135px -> Leerraum unter Text */
    border: 0 !important;
    font-size: 15px;
    line-height: 1.65;
    color: #3c4248;
    flex: 1 1 auto;
}
body.account .column.main .box .box-actions {
    background: transparent !important;
    padding: 12px 0 0 !important;
    margin-top: 14px;
    border: 0 !important; /* Porto zeichnet sonst ein eigenes Rechteck */
    border-top: 1px solid #eef0f2 !important;
}
body.account .column.main .box .box-actions .action {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-accent-ink) !important;
}
body.account .column.main .box .box-actions .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Buttons: gruener Checkout-Primary statt Porto-Orange-CAPS ------ */
body.account .column.main button.action.primary,
body.account .column.main button.action.save,
body.account .column.main .actions-toolbar .primary .action {
    background: var(--om-accent) !important;
    border: 1px solid var(--om-accent) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: 12px 26px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
body.account .column.main button.action.primary:hover,
body.account .column.main button.action.save:hover,
body.account .column.main .actions-toolbar .primary .action:hover {
    background: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    border-color: color-mix(in srgb, var(--om-accent) 88%, black) !important;
    color: #fff !important;
}
body.account .column.main button.action.primary:focus-visible,
body.account .column.main button.action.save:focus-visible,
body.account .column.main .actions-toolbar .primary .action:focus-visible {
    outline: 2px solid var(--om-accent);
    outline-offset: 2px;
}

/* "Zurueck"-Links in Toolbars: Textlink statt dunkler Porto-Button
   (gleiche Behandlung wie auf /forgotpassword/, s. Login-Sektion) */
body.account .column.main .actions-toolbar .secondary a.action.back {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    color: var(--theme-color-text, #0e7560) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}
body.account .column.main .actions-toolbar .secondary a.action.back:hover {
    color: color-mix(in srgb, var(--theme-color-text, #0e7560) 80%, black) !important;
}

/* --- Tabellen (Bestellungen, Bewertungen, weitere Adressen) --------- */
body.account .column.main .table-wrapper table > thead > tr > th {
    font-size: 14px;
    font-weight: 600;
    color: var(--om-ink);
    text-transform: none !important;
    border-bottom: 1px solid #d9dde1 !important;
    padding: 10px 12px;
}
body.account .column.main .table-wrapper table > tbody > tr > td {
    font-size: 15px;
    color: #3c4248;
    padding: 14px 12px;
    vertical-align: middle;
}
/* Sanfter Row-Hover nur auf Listen-Tabellen (nicht im Bestelldetail) */
body.account .table-wrapper.orders-history tbody tr:hover td,
body.account .table-wrapper.reviews tbody tr:hover td,
body.account .table-wrapper.additional-addresses tbody tr:hover td {
    background: color-mix(in srgb, var(--om-accent) 4%, #fff);
}
/* Aktions-Links in Tabellen: Akzent-Ink, Hover unterstrichen */
body.account .column.main .table-wrapper .action {
    color: var(--om-accent-ink) !important;
    font-weight: 600;
}
body.account .column.main .table-wrapper .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Loeschen bleibt destruktiv-rot — bewusst NICHT gruen */
body.account .column.main .table-wrapper .action.delete {
    color: #b3283e !important;
}
body.account .column.main .table-wrapper .action.delete:hover {
    color: color-mix(in srgb, #b3283e 80%, black) !important;
}

/* --- Bestelldetail --------------------------------------------------- */
/* Reorder/Drucken oben: als klare Textaktionen */
body.account .order-actions-toolbar .action {
    color: var(--om-accent-ink) !important;
    font-weight: 600;
}
body.account .order-actions-toolbar .action:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Tab-Leiste (Bestellte Artikel / Lieferungen / Rechnungen): moderne
   Unterstrich-Tabs statt Porto-Rahmenkaesten, normal geschrieben */
body.account .items.order-links {
    border-bottom: 1px solid var(--om-line);
}
body.account .items.order-links .item strong,
body.account .items.order-links .item a {
    display: inline-block;
    padding: 10px 14px;
    font-size: 15px;
    text-transform: none !important;
    border: 0 !important;
    background: transparent !important;
}
body.account .items.order-links .item.current strong {
    color: var(--om-ink) !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--om-accent);
}
body.account .items.order-links .item a {
    color: #55595e !important;
}
body.account .items.order-links .item a:hover {
    color: var(--om-accent-ink) !important;
    text-decoration: none;
}
/* Preise in Artikelzeilen: Porto skaliert .price auf ~1.4em (20.8px) —
   vier laute Preise pro Zeile gegen 15px-Restzellen. Auf Zeilengroesse
   harmonisieren; nur die Zeilen-Zwischensumme traegt sanfte Betonung,
   die grosse Zahl bleibt der Gesamtsumme (16px/700) vorbehalten. */
body.account .table-order-items tbody .price {
    font-size: 15px !important;
    font-weight: 400;
    color: #3c4248;
}
body.account .table-order-items tbody .col.subtotal .price {
    font-weight: 600;
    color: var(--om-ink);
}

/* Artikel-Container buendig unter die Tabs, Karte wie die Boxen */
body.account .order-details-items {
    border: 1px solid var(--om-line) !important;
    border-top: 0 !important;
    border-radius: 0 0 8px 8px;
    padding: 18px 20px;
    margin-bottom: 36px;
}

/* --- Formulare (Kontoinformationen, Adresse) ------------------------ */
body.account .column.main .fieldset > .legend {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--om-ink) !important;
    border-bottom: 0 !important;
}
/* "* Pflichtfelder": Signalrot nur fuer Fehler reservieren */
body.account .column.main .fieldset:after {
    color: #6b6b6b !important;
}
/* Input-Fokus (gruener/roter Ring) ist jetzt global in base-typography.css */

/* Label "Adresszusatz (optional)" sichtbar machen: der Core versteckt
   Labels zusaetzlicher Strassenzeilen per abs-visually-hidden
   (position:absolute/1px/clip). Analog zum Checkout-Pendant
   (.checkout-index-index .field.street .field.additional > .label in
   checkout.css), hier auf das Konto-Adressformular gescoped.
   !important, weil das kompilierte Porto-/Blank-CSS spaeter laedt. */
.form-address-edit .field.street .field.additional > .label {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    clip: auto !important;
    overflow: visible !important;
    display: block;
}

/* --- Mobil + Tablet: Konto-Navigation VOR den Inhalt ----------------
   Porto rendert die Sidebar im DOM nach der Hauptspalte -> das
   "Mein Konto"-Akkordeon landet unsichtbar am Seitenende. Nutzer
   brauchen die Bereichs-Navigation oben (Luma-Standardverhalten).
   Bis 991px, nicht 767px: Porto stellt die Sidebar erst ab 992px
   neben den Inhalt - dazwischen (Tablet hochkant) stand das Menue
   sonst voll aufgeklappt UNTER dem Inhalt. */
@media (max-width: 991px) {
    body.account .columns {
        display: flex;
        flex-direction: column;
    }
    body.account .columns .sidebar-main {
        order: 0;
    }
    body.account .columns .column.main {
        order: 1;
    }
    /* Magento setzt die Nav mobil absolute top:0 (Luma-Muster) und
       ueberdeckt damit den Seitentitel -> zurueck in den Normalfluss,
       die Flex-Order oben regelt die Platzierung. */
    body.account .sidebar-main .block-collapsible-nav {
        position: static !important;
        margin-bottom: 16px;
    }
    /* Akkordeon-Kopf als klar erkennbarer Toggle */
    body.account .block-collapsible-nav-title {
        border: 1px solid var(--om-line, #e3e6e9);
        border-radius: 8px;
        padding: 12px 14px !important;
        font-size: 15px;
        margin-bottom: 6px;
    }
    body.account .block-collapsible-nav-title strong {
        font-weight: 600;
        color: #222529;
        text-transform: none;
    }
    /* Auf-/Zu-Pfeil wie die Bestellzeilen (gezeichneter Chevron, mittig)
       statt Portos kleinem, oben klebendem Icon-Glyph. */
    body.account .block-collapsible-nav-title::after {
        content: "" !important;
        font-family: inherit !important;
        position: absolute;
        top: 50% !important;
        right: 18px !important;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-right: 2px solid #6b6b6b;
        border-bottom: 2px solid #6b6b6b;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s ease-out;
    }
    body.account .block-collapsible-nav-title.active::after {
        transform: translateY(2px) rotate(-135deg);
    }
}

/* Tablet (768-991px): Magento/Porto schalten das Akkordeon nur bis 767px
   (styles-m) und blenden den Titel ab 768px aus (styles-l,
   abs-visually-hidden-desktop) - hier beides fuer die Luecke nachziehen.
   Das Auf-/Zuklappen (Klasse .active) setzt Magentos JS breitenunabhaengig. */
@media (min-width: 768px) and (max-width: 991px) {
    /* styles-l teilt Konto-Seiten ab 768px in 22.3% Sidebar + 77.7% Inhalt -
       untereinander gestapelt beide volle Breite. */
    body.account .columns .sidebar-main,
    body.account .columns .column.main {
        width: 100%;
    }
    body.account .block-collapsible-nav .title {
        position: relative !important;
        width: auto !important;
        height: auto !important;
        margin: 0 0 6px !important;
        overflow: visible !important;
        clip: auto !important;
        cursor: pointer;
    }
    body.account .block-collapsible-nav .content {
        display: none;
    }
    body.account .block-collapsible-nav .content.active {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.account .block-collapsible-nav .item a,
    body.account .column.main button.action.primary,
    body.account .column.main button.action.save,
    body.account .column.main .actions-toolbar .primary .action {
        transition: none;
    }
    body.account .block-collapsible-nav .item a:hover {
        transform: none;
    }
    body.account .block-collapsible-nav-title::after {
        transition: none;
    }
}