@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 500;
    src: url("/templates/yootheme/fonts/barlowcondensed-30c0efed.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    src: url("/templates/yootheme/fonts/barlowcondensed-9f46bdbc.woff2") format("woff2");
}

:root {
    --portal-color-text: #3a3a3a;
    --portal-color-heading: #3a3a3a;
    --portal-color-accent: #389258;
    --portal-color-accent-soft: rgba(56, 146, 88, 0.12);
    /* Inline body-size text links: host's link green (#389258 fails AA at body
       size ~3:1; #2b7846 ~4.7:1). --accent stays for button/nav/focus chrome. */
    --portal-color-link: #2b7846;
    /* AA-safe green on the green-tint backgrounds (accent-soft / 10% fills); the
       brand #389258 is only ~3.4:1 there. Same value as the paid-badge precedent. */
    --portal-color-accent-strong: #256b3e;
    /* Canonical AA-safe meta/helper text (consolidates scattered greys). */
    --portal-color-muted: #5f5f5f;
    /* Small uppercase labels (eyebrows, dt) — host muted-meta idiom. */
    --portal-color-meta-label: #6c6c6c;
    --portal-color-surface: #ffffff;
    --portal-color-surface-muted: #f4f4f4;
    --portal-color-border: #d9d9d9;
    /* Perceivable input edge (>=3:1) for WCAG 1.4.11 field affordance. */
    --portal-color-border-input: #9a9a9a;
    --portal-color-border-soft: #f1f1f1;
    --portal-color-info: #f4f7f4;
    --portal-color-error: #fff4f4;
    --portal-color-error-border: #efcaca;
    --portal-color-error-text: #9f2e2e;
    --portal-color-success: #f4faf5;
    --portal-shadow-focus: 0 0 0 3px rgba(56, 146, 88, 0.12);
    --portal-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --portal-font-heading: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
}

html {
    overflow-y: auto;
    background: transparent;
}

body {
    margin: 0;
    background: transparent;
    color: var(--portal-color-text);
    font-family: var(--portal-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    overflow: visible;
}

body * {
    box-sizing: border-box;
}

a {
    color: var(--portal-color-link);
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: underline;
}

h1,
h2,
h3 {
    margin: 0 0 14px;
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.01em;
}

h1 {
    font-size: 40px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 22px;
}

p,
dl,
ul,
ol,
table {
    margin: 0;
}

.portal-app {
    width: 100%;
}

.portal-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* Full-maintenance overlay (SP9.3). Previously undefined -> rendered as bare
   stacked text. Calm muted card (NOT red) even though role="alert". */
.portal-maintenance {
    max-width: 560px;
    margin: 24px auto;
    padding: 32px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface-muted);
}

.portal-maintenance-heading {
    margin: 0 0 12px;
}

.portal-maintenance-message {
    margin: 0 0 12px;
    color: var(--portal-color-text);
}

.portal-maintenance-note {
    margin: 0 0 20px;
    color: var(--portal-color-muted);
    font-size: 14px;
}

.portal-site-return {
    background: var(--portal-color-surface);
    border-bottom: 1px solid var(--portal-color-border);
    padding: 10px 24px;
    font-size: 0.9rem;
}
.portal-site-return-link {
    color: var(--portal-color-accent-strong);
    text-decoration: none;
}
.portal-site-return-link:hover,
.portal-site-return-link:focus-visible {
    text-decoration: underline;
}

.portal-shell-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    padding: 0 0 26px;
    margin: 0 0 28px;
    border-bottom: 1px solid var(--portal-color-border-soft);
}

.portal-shell-header-copy {
    max-width: 72ch;
}

.portal-shell-kicker {
    margin: 0 0 10px;
    color: var(--portal-color-meta-label);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-shell-heading {
    margin: 0 0 12px;
    font-family: var(--portal-font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--portal-color-heading);
}

/* First-order entry: the band headline "Neukundenbereich" leads the page at
   page-title size (matches the order form's <h1>, 40px). First-order public
   shell only; every other band keeps the demoted 20px brand-band size (Phase 1A). */
.portal-public-first-order .portal-shell-heading {
    font-size: 40px;
    line-height: 1.05;
}

.portal-shell-intro {
    max-width: 68ch;
    color: var(--portal-color-muted);
}

.portal-shell-grid {
    display: grid;
    gap: 32px;
    align-items: start;
}

.portal-shell-grid-public {
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.95fr);
}

/* Embedded (iframe inside the host article column): the column is too narrow
   for the two-column grid, so collapse to a single stacked column. First and
   only embed-specific style; the standalone site and the 760px breakpoint are
   left untouched. Locked by sp6_embed_layout_probe.php. */
.portal-embed-mode .portal-shell-grid-public {
    grid-template-columns: 1fr;
}

.portal-embed-mode .portal-shell-grid {
    gap: 24px;
}

/* Embedded shell centers as a comfortable reading-width column. The host iframe
   is width:100%, so without a narrower cap the collapsed single column spans the
   full iframe and its content (text 72ch, cards, 560px form) hugs the left with a
   large right gap. margin:0 auto (from .portal-shell) then centers this narrower
   column. Width verified by headless render. Locked by sp6_embed_layout_probe.php. */
.portal-embed-mode .portal-shell {
    max-width: 820px;
}

.portal-shell-main {
    min-width: 0;
}

.portal-shell-sidebar {
    display: grid;
    gap: 18px;
}

.portal-shell-panel {
    padding: 22px 24px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface);
}

.portal-shell-panel-accent {
    border-color: rgba(56, 146, 88, 0.2);
    background: linear-gradient(160deg, rgba(56, 146, 88, 0.08), rgba(255, 255, 255, 0.96));
}

/* Subtle grey highlight for the Info & Rechtliches reference panel. */
.portal-shell-panel-muted {
    background: var(--portal-color-surface-muted);
}

.portal-shell-panel-eyebrow {
    margin: 0 0 10px;
    color: var(--portal-color-meta-label);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-shell-panel-copy {
    margin: 0 0 16px;
    color: var(--portal-color-muted);
}

.portal-shell-inline-link {
    display: inline-flex;
    align-items: center;
    font-family: var(--portal-font-heading);
    font-size: 18px;
    font-weight: 600;
}

.portal-shell-link-list {
    display: grid;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.portal-shell-link-list a {
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-size: 18px;
    font-weight: 500;
}

.portal-shell-fragment {
    min-width: 240px;
    padding: 16px 18px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface-muted);
}

.portal-shell-fragment-name,
.portal-shell-fragment-email {
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-size: 19px;
    line-height: 1.1;
}

.portal-shell-fragment-email {
    margin-top: 6px;
    font-size: 16px;
    color: #555555;
    overflow-wrap: anywhere;
}

.portal-shell-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 0 0 24px;
    margin: 0 0 28px;
    border-bottom: 1px solid var(--portal-color-border-soft);
}

.portal-shell-nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.portal-shell-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface);
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
}

.portal-shell-nav-link:hover,
.portal-shell-nav-link:focus-visible {
    border-color: var(--portal-color-accent);
    text-decoration: none;
}

.portal-shell-nav-link.is-active {
    border-color: var(--portal-color-accent);
    background: var(--portal-color-accent-soft);
    color: var(--portal-color-accent-strong);
}

.portal-shell-nav-link.is-nav-locked { pointer-events: none; cursor: not-allowed; opacity: 0.5; }
.portal-shell-nav-link.is-nav-loading { cursor: progress; }

.portal-shell-toolbar-links {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.portal-shell-toolbar-link {
    color: #4c4c4c;
    font-family: var(--portal-font-heading);
    font-size: 17px;
    font-weight: 500;
}

.portal-shell-toolbar-link-muted {
    color: #666666;
}

.portal-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.portal-shortcut-grid .portal-card-span-full {
    grid-column: 1 / -1;
}

.portal-utility {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    padding: 0 0 24px;
    margin: 0 0 28px;
    border-bottom: 1px solid var(--portal-color-border-soft);
}

.portal-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.portal-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--portal-color-surface);
    color: var(--portal-color-link);
    border: 1px solid var(--portal-color-accent);
    text-decoration: none;
}

.portal-skip-link:focus {
    left: 8px;
    top: 8px;
}

/* First-order flow step indicator (E4). */
.portal-step-indicator {
    margin: 0 0 28px;
}

.portal-step-indicator-list {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.portal-step-indicator-item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    text-align: center;
}

/* Connector leading into each node (skipped on the first). */
.portal-step-indicator-item::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--portal-color-border);
    z-index: 0;
}

.portal-step-indicator-item:first-child::before {
    display: none;
}

.portal-step-indicator-item.is-done::before,
.portal-step-indicator-item.is-active::before {
    background: var(--portal-color-accent);
}

.portal-step-indicator-number {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--portal-color-border);
    background: var(--portal-color-surface);
    color: var(--portal-color-muted);
    font-family: var(--portal-font-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.portal-step-indicator-label {
    font-family: var(--portal-font-heading);
    font-size: 15px;
    color: var(--portal-color-muted);
    line-height: 1.2;
}

.portal-step-indicator-item.is-done .portal-step-indicator-number {
    border-color: var(--portal-color-accent);
    background: var(--portal-color-accent-strong);
    color: #ffffff;
}

.portal-step-indicator-item.is-active .portal-step-indicator-number {
    border-color: var(--portal-color-accent);
    color: var(--portal-color-accent);
    box-shadow: 0 0 0 4px var(--portal-color-accent-soft);
}

.portal-step-indicator-item.is-active .portal-step-indicator-label {
    color: var(--portal-color-text);
    font-weight: 600;
}

@media (max-width: 600px) {
    .portal-step-indicator-label {
        font-size: 13px;
    }
}

.portal-utility-links {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.portal-utility-link {
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
}

.portal-utility-link.is-active {
    color: var(--portal-color-accent);
}

.portal-utility-link-muted {
    color: #666666;
}

.portal-page {
    padding: 0 0 8px;
}

.portal-page-header {
    padding: 0 0 20px;
    margin: 0 0 28px;
    border-bottom: 1px solid var(--portal-color-border-soft);
}

.portal-eyebrow {
    margin: 0 0 8px;
    color: var(--portal-color-meta-label);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-page-intro {
    max-width: 62ch;
    color: var(--portal-color-muted);
}

.portal-notice {
    padding: 14px 16px;
    margin: 0 0 18px;
    border: 1px solid var(--portal-color-border);
    background: var(--portal-color-info);
}

.portal-notice-success {
    border-color: #cfe3d4;
    background: var(--portal-color-success);
}

.portal-notice-error {
    border-color: var(--portal-color-error-border);
    background: var(--portal-color-error);
}

/* Explicit calm-info variant (pending/recheck/payment notices). Previously
   undefined -> fell back to the neutral base .portal-notice. Stays calm,
   never red. */
.portal-notice-info {
    border-color: var(--portal-color-border-soft);
    background: var(--portal-color-info);
}

.portal-card {
    padding: 24px 26px;
    margin: 0 0 24px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface);
}

.portal-card-muted {
    background: var(--portal-color-surface-muted);
}

.portal-card-header {
    margin: 0 0 18px;
}

.portal-card-copy {
    color: var(--portal-color-muted);
}

/* Disclosure (<details>) styled as a muted card: a quiet secondary path that
   stays in the DOM but does not compete with the primary action above it. */
.portal-disclosure {
    padding: 0;
}

.portal-disclosure-summary {
    cursor: pointer;
    padding: 18px 26px;
    font-weight: 600;
}

.portal-disclosure-body {
    padding: 0 26px 24px;
}

.portal-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
}

.portal-meta-item dt {
    margin: 0 0 4px;
    color: var(--portal-color-meta-label);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 500;
}

.portal-meta-item dd {
    margin: 0;
    color: var(--portal-color-heading);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.portal-page-profile .portal-card-copy {
    overflow-wrap: anywhere;
}

.portal-address-list {
    display: grid;
    gap: 10px;
}

.portal-address-item {
    padding: 12px 14px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface-muted);
}

.portal-address-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 6px;
}

.portal-address-title-group {
    display: grid;
    gap: 4px;
}

.portal-address-item-header h3 {
    margin: 0;
    font-size: 21px;
}

.portal-address-category {
    color: #666666;
    font-family: var(--portal-font-heading);
    font-size: 16px;
    font-weight: 500;
}

.portal-address-role-notice {
    margin: 0 0 16px;
}

.portal-address-role-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.portal-address-role-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(56, 146, 88, 0.2);
    background: rgba(56, 146, 88, 0.1);
    color: var(--portal-color-accent-strong);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.portal-address-role-form {
    display: grid;
    gap: 18px;
    max-width: 520px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--portal-color-border-soft);
}

.portal-address-actions {
    margin: 0 0 18px;
}

.portal-address-item-actions {
    margin-top: 8px;
}

.portal-address-delete-hint {
    margin-top: 12px;
}

.portal-address-editor {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--portal-color-border-soft);
}

.portal-address-editor-form {
    display: grid;
    gap: 18px;
}

.portal-address-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
}

.portal-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.portal-field label {
    color: var(--portal-color-text);
    font-family: var(--portal-font-heading);
    font-size: 18px;
    font-weight: 500;
}

/* Consent / checkbox rows (AGB, Lizenzbestimmungen). Previously undefined -> the
   checkbox + wrapping sentence inherited the column-stacked .portal-field layout
   and the Barlow heading label font. Lay the box inline-left of body-font copy. */
.portal-field-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: var(--portal-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.portal-field-checkbox input[type="checkbox"] {
    margin-top: 4px;
    flex: none;
    width: 18px;
    height: 18px;
}

.portal-input,
.portal-select {
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--portal-color-border-input);
    border-radius: 0;
    background: #ffffff;
    color: var(--portal-color-heading);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.portal-input:focus,
.portal-select:focus {
    outline: none;
    border-color: var(--portal-color-accent);
    /* Solid >=2px green perimeter (1px border + 1px ring) plus the soft glow,
       so the unfocused->focused change clears 3:1 (WCAG 2.4.13). */
    box-shadow: 0 0 0 1px var(--portal-color-accent), var(--portal-shadow-focus);
}

.portal-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    /* AA fix: white text on the brand #389258 fill is only 3.87:1 (fails the
       4.5:1 normal-text minimum). accent-strong (#256b3e, ~6.46:1) is the
       same AA-safe swap already used for the nav-link/badge precedent. */
    border: 1px solid var(--portal-color-accent-strong);
    border-radius: 0;
    background: var(--portal-color-accent-strong);
    color: #ffffff;
    font-family: var(--portal-font-heading);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.portal-button:hover,
.portal-button:focus-visible {
    /* Lighter-on-hover: #2f7d4a is still AA-safe for white text (~5.06:1). */
    background: #2f7d4a;
    border-color: #2f7d4a;
    text-decoration: none;
}

.portal-button:focus-visible {
    outline: none;
    /* Solid white+accent-strong double ring: white leg reads >=3:1 against
       the #2f7d4a hover/focus fill (~5.06:1), accent-strong leg reads
       >=3:1 against the white page background (~6.46:1) — a real shape
       change, not just the alpha glow, per WCAG 2.4.11/2.4.13. Soft glow
       kept appended for the existing visual treatment. */
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--portal-color-accent-strong), var(--portal-shadow-focus);
}

.portal-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Phase 2 — explicit primary marker. The filled green IS the primary look
   (same accent-strong fill as the base .portal-button, AA-fixed from the
   original #389258); this named class documents the one intended primary
   per screen. Two visual tiers only — dominance comes from being the sole
   filled button + isolation, not a darker shade. */
.portal-button-primary {
    background: var(--portal-color-accent-strong);
    border-color: var(--portal-color-accent-strong);
    color: #ffffff;
}

.portal-button-secondary {
    border-color: var(--portal-color-border);
    background: #ffffff;
    color: var(--portal-color-heading);
}

.portal-button-secondary:hover,
.portal-button-secondary:focus-visible {
    border-color: var(--portal-color-accent);
    background: #ffffff;
    color: var(--portal-color-accent-strong);
}

.portal-button-danger {
    border-color: #9f2e2e;
    background: #9f2e2e;
    color: #ffffff;
}

.portal-button-danger:hover,
.portal-button-danger:focus-visible {
    border-color: #7f2323;
    background: #7f2323;
    color: #ffffff;
}

.portal-button-small {
    min-height: 40px;
    padding: 0 14px;
    font-size: 16px;
}

.portal-order-form {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(180px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.portal-order-form .portal-field {
    margin: 0;
}

.portal-order-form .portal-input {
    max-width: 150px;
}

/* Night-audit UI fix: keep the pricing-preview CTA on one line. The grid's
   third track is `auto`; without this the button label ("Preisvorschau
   erstellen") wraps to two lines in the narrower public first-order shell
   despite ample free width. Scoped to the order form only. */
.portal-order-form .portal-button {
    white-space: nowrap;
}

.portal-order-form .portal-helper-text {
    padding-bottom: 10px;
}

.portal-first-order-capture-form { display: grid; gap: 18px; max-width: 560px; }

.portal-fieldset { border: 0; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.portal-fieldset:last-of-type { margin-bottom: 0; }
.portal-fieldset-legend { font-family: var(--portal-font-heading); font-size: 20px; font-weight: 600; color: var(--portal-color-heading); padding: 0 0 6px; margin: 0 0 6px; border-bottom: 1px solid var(--portal-color-border-soft); width: 100%; }

.portal-preview-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 18px;
}

.portal-preview-table th,
.portal-preview-table td {
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-color-border-soft);
    vertical-align: top;
}

.portal-preview-table th {
    padding-top: 0;
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-size: 17px;
    font-weight: 600;
    text-align: left;
}

.portal-preview-table .portal-table-number {
    padding-left: 6px;
    text-align: right;
    white-space: nowrap;
}

/* Order-history (Bestellhistorie) list table. Previously undefined -> the whole
   list rendered as a raw default browser table. */
.portal-history-table {
    width: 100%;
    border-collapse: collapse;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: normal;
}

.portal-history-table th,
.portal-history-table td {
    padding: 12px 8px;
    border-bottom: 1px solid var(--portal-color-border-soft);
    text-align: left;
    vertical-align: middle;
}

.portal-history-table td:first-child,
.portal-history-table td:nth-child(3),
.portal-history-table .portal-button {
    white-space: nowrap;
}

.portal-history-table th {
    padding-top: 0;
    color: var(--portal-color-meta-label);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portal-history-table th:first-child,
.portal-history-table td:first-child {
    padding-left: 0;
}

.portal-history-table th:last-child,
.portal-history-table td:last-child {
    padding-right: 0;
    text-align: right;
}

/* Payment status badge. Previously undefined -> badges rendered as plain inline
   text. Paid vs open differ by border + tint AND the text label (never colour
   alone, WCAG 1.4.1). */
.portal-payment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--portal-color-border);
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.portal-payment-badge-paid {
    border-color: rgba(56, 146, 88, 0.4);
    background: rgba(56, 146, 88, 0.1);
    /* Darker than the brand fill so the label clears AA on the green tint
       (the accent #389258 is only ~3.45:1 there). */
    color: var(--portal-color-accent-strong);
}

.portal-payment-badge-open {
    border-color: var(--portal-color-border-input);
    background: var(--portal-color-surface-muted);
    color: var(--portal-color-muted);
}

.portal-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-top: 6px;
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
}

.portal-total-row strong {
    font-size: 24px;
    font-weight: 600;
}

/* Gross/binding total: the amount the customer actually pays. Set apart with a
   divider and given the largest figure so it reads as the climax of the totals
   block, distinct from the netto/USt rows above it. Previously undefined ->
   the brutto row looked identical to netto/USt. */
.portal-total-row-gross {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--portal-color-border-soft);
}

.portal-total-row-gross strong {
    font-size: 28px;
}

/* Net/USt footnote under a totals block (used in first_order/update/zusatzlizenz).
   Previously undefined -> rendered as unstyled body text (go-live item S8). */
.portal-total-note {
    margin: 8px 0 0;
    color: var(--portal-color-muted);
    font-size: 14px;
}

.portal-composition-panel {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--portal-color-border-soft);
}

.portal-summary-address {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--portal-color-border-soft);
}

.portal-composition-panel h3 {
    margin-bottom: 10px;
    font-size: 20px;
}

.portal-explanation-list {
    display: grid;
    gap: 8px;
    padding-left: 18px;
    color: #5f5f5f;
}

.portal-explanation-list li {
    margin: 0;
}

.portal-muted-note {
    color: var(--portal-color-muted);
    font-size: 14px;
}

.portal-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.portal-submit-area {
    margin-top: 20px;
}

.portal-page-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 20px;
    margin-top: 6px;
    border-top: 1px solid var(--portal-color-border-soft);
}

.portal-login-form {
    display: grid;
    gap: 18px;
    max-width: 460px;
}

.portal-login-actions {
    padding-top: 6px;
}

.portal-done-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.portal-done-stat {
    padding: 16px 18px;
    border: 1px solid var(--portal-color-border-soft);
    background: var(--portal-color-surface-muted);
}

.portal-done-stat-label {
    margin: 0 0 4px;
    color: #666666;
    font-family: var(--portal-font-heading);
    font-size: 15px;
}

.portal-done-stat-value {
    color: var(--portal-color-heading);
    font-family: var(--portal-font-heading);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.portal-field-label {
    margin: 0 0 4px;
    font-family: var(--portal-font-heading);
    font-size: 15px;
    font-weight: 600;
    color: var(--portal-color-heading);
}

.portal-helper-text {
    color: var(--portal-color-muted);
    font-size: 14px;
}

/* Required-field marker: a text '*' (never colour alone, WCAG 1.4.1) appended
   to required labels, plus a one-line legend above each form. */
.portal-required {
    margin-left: 2px;
    color: var(--portal-color-error-text);
    font-weight: 600;
}

.portal-required-legend {
    margin: 0 0 16px;
    color: var(--portal-color-muted);
    font-size: 14px;
}

@media (max-width: 760px) {
    .portal-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    h1 {
        font-size: 34px;
    }

    h2 {
        font-size: 24px;
    }

    .portal-shell-header,
    .portal-shell-toolbar,
    .portal-utility {
        flex-direction: column;
        align-items: stretch;
    }

    .portal-shell-grid-public,
    .portal-shortcut-grid,
    .portal-order-form,
    .portal-address-editor-grid,
    .portal-meta-grid,
    .portal-done-summary {
        grid-template-columns: 1fr;
    }

    .portal-address-item-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .portal-address-role-badges {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    /* Keep consent sentences in reading order, including inline legal links. */
    .portal-order-page .portal-field-checkbox label {
        display: block;
        position: relative;
        padding-left: 26px;
    }

    .portal-order-page .portal-field-checkbox input[type="checkbox"] {
        position: absolute;
        left: 0;
        margin-left: 0;
    }

    .portal-order-page .portal-submit-area > form {
        min-width: 0;
        max-width: 100%;
    }

    .portal-card {
        padding: 20px 18px;
    }

    .portal-shell-panel,
    .portal-shell-fragment {
        padding: 18px;
    }

    .portal-actions,
    .portal-page-links {
        align-items: stretch;
    }

    .portal-button,
    .portal-button-small {
        width: 100%;
    }
}

/* Phase 1B — existing-customer order chooser (route=order_select) */
.portal-order-select-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 8px;
}
.portal-order-select-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.portal-order-select-card .portal-button {
    margin-top: auto;
    align-self: flex-start;
}
.portal-order-select-note {
    margin-top: 24px;
}
@media (max-width: 760px) {
    .portal-order-select-grid {
        grid-template-columns: 1fr;
    }
}

/* Phase 2 · Sub-slice 4 — narrow-iframe responsive data tables + totals (S4) */
@media (max-width: 760px) {
    .portal-history-table,
    .portal-preview-table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
    .portal-total-row {
        flex-wrap: wrap;
    }
}

/* Phase 2 · Sub-slice 4 — print stylesheet for invoice-like surfaces (S3) */
@media print {
    body {
        background: #fff;
        color: #000;
    }
    .portal-skip-link,
    .portal-shell-header,
    .portal-shell-toolbar,
    .portal-shell-sidebar,
    .portal-step-indicator,
    .portal-actions,
    .portal-submit-area,
    .portal-page-links,
    .portal-card-muted {
        display: none !important;
    }
    .portal-card {
        border: none;
        padding: 0;
        box-shadow: none;
    }
}

/* Slice D2 — status-pages restyle (done.php + first_order_pending.php).
   One wayfinding device: a green left bar marks the success / next-step
   surface. Scoped to the two pages — the global .portal-notice-success and
   .portal-card rules stay untouched so no other page changes. */
.portal-page-done .portal-notice-success {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border-left: 4px solid var(--portal-color-accent);
}

/* Icon inherits the AA-safe dark green (same precedent as the paid badge);
   the bar itself is decorative (non-text), so the brand green is fine there. */
.portal-notice-icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--portal-color-accent-strong);
}

/* Divider between the stat tiles and the netto/USt/brutto rows inside the
   done Übersicht card. */
.portal-done-totals {
    margin-top: 18px;
    padding-top: 8px;
    border-top: 1px solid var(--portal-color-border-soft);
}

/* Pending: the confirm-email card is the ONE primary next step on the page
   (two-tier rule, see .portal-button-primary note above). The resend card is
   the quiet secondary path: its button uses the documented secondary tier
   and its heading steps down to the h3 scale. */
.portal-card-primary {
    border-left: 4px solid var(--portal-color-accent);
}

.portal-card-primary .portal-card-header h2 {
    color: var(--portal-color-accent-strong);
}

.portal-first-order-pending .portal-card-muted h2 {
    font-size: 22px;
}

@media print {
    .portal-card-primary {
        border-left: 0;
    }
}

/* UI V2: three destinations, one task area, deliberate narrow-screen composition. */
body[class*="portal-"] {
    --portal-color-text: #3a3a3a;
    --portal-color-heading: #3a3a3a;
    --portal-color-muted: #5f5f5f;
    --portal-color-border-input: #6c7d71;
    --portal-font-heading: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400;
    overflow-wrap: anywhere;
}
.portal-shell { max-width: 1060px; padding: 20px 28px 32px; }
.portal-shell h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.portal-shell h2 { font-size: 22px; line-height: 1.35; }
.portal-shell h3 { font-size: 19px; line-height: 1.4; }
.portal-shell-main { max-width: 840px; width: 100%; margin: 28px auto 0; min-width: 0; }
.portal-brand-header { display: flex; align-items: center; gap: 24px; padding: 4px 0 20px; }
.portal-brand { font: 600 26px/1.3 var(--portal-font-heading); letter-spacing: 0; }
.portal-customer-identity { margin-left: auto; text-align: right; overflow-wrap: anywhere; }
.portal-logout { font: inherit; color: var(--portal-color-link); background: transparent; border: 1px solid #6c7d71; border-radius: 4px; padding: 10px 14px; cursor: pointer; }
.portal-shell-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border-block: 1px solid #d0dcd3; }
.portal-shell-nav-link { min-width: 0; text-align: center; padding: 16px 10px; border: 0; border-bottom: 3px solid transparent; font: inherit; color: #526359; white-space: normal; }
.portal-shell-nav-link[aria-current="page"] { color: #205d38; border-bottom-color: #205d38; background: #f1f6f2; font-weight: 650; }
.portal-account-nav { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border-bottom: 1px solid #d0dcd3; padding-bottom: 12px; }
.portal-account-link { padding: 10px 14px; min-height: 44px; text-align: center; }
.portal-account-link[aria-current="page"] { color: #205d38; background: #f1f6f2; border-radius: 4px; font-weight: 650; }
.portal-access-task { padding: 24px; background: #f1f6f2; border-left: 4px solid #205d38; display: grid; gap: 20px; }
.portal-access-task .portal-meta-grid { margin: 0; }
.portal-access-help summary, .portal-edit-details summary { cursor: pointer; min-height: 44px; padding-block: 10px; color: #205d38; }
.portal-edit-details[open] summary { margin-bottom: 20px; }
.portal-access-task .portal-notice { margin: 0; }
.portal-card { border-radius: 6px; }
.portal-button { border-radius: 5px; white-space: normal; min-height: 48px; line-height: 1.4; }
.portal-submit-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.portal-shell input, .portal-shell select, .portal-shell textarea { max-width: 100%; min-width: 0; }
.portal-shell :focus-visible { outline: 2px solid #205d38; outline-offset: 3px; }
.portal-legal-links { display: flex; gap: 12px 24px; flex-wrap: wrap; border-top: 1px solid #d0dcd3; margin-top: 32px; padding-top: 16px; }
.portal-legal-links a { padding-block: 6px; min-height: 32px; }
.portal-feedback { position: sticky; top: 0; z-index: 10; padding: 12px 24px; background: #f1f6f2; border-bottom: 1px solid #6c7d71; color: #24382d; }
.portal-feedback[hidden] { display: none; }
.portal-feedback progress { display: block; width: 100%; height: 6px; accent-color: #205d38; margin-top: 6px; }
.is-nav-loading { cursor: progress; }
.portal-is-busy .portal-app { opacity: .65; cursor: progress; transition: opacity .18s ease; }
.portal-feedback { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 24px)); box-shadow: 0 4px 18px #0002; border-radius: 4px; }
.portal-feedback progress { appearance: none; border: 0; background: #d0dcd3; overflow: hidden; }
.portal-feedback progress::-webkit-progress-bar { background: #d0dcd3; }
.portal-feedback .portal-progress { display: block; height: 5px; background: #d0dcd3; overflow: hidden; margin-top: 8px; }
.portal-feedback .portal-progress::after { content: ''; display: block; height: 100%; width: 35%; background: #205d38; animation: portal-slide 1.4s ease-in-out infinite alternate; }
@keyframes portal-slide { from { transform: translateX(-10%); } to { transform: translateX(210%); } }
@media (prefers-reduced-motion: reduce) { .portal-feedback .portal-progress::after { animation: none; transform: none; width: 100%; } .portal-is-busy .portal-app { transition: none; } }
.portal-order-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; border-bottom: 1px solid #d0dcd3; margin-bottom: 12px; }
.portal-order-form { display: grid; grid-template-columns: minmax(0,1fr); align-items: start; gap: 16px; }
.portal-order-form > * { min-width: 0; }
.portal-order-form .portal-field { max-width: 420px; }
.portal-order-form [hidden] { display: none; }
.portal-tax-details, .portal-composition-panel { width: 100%; }
.portal-tax-details summary, .portal-composition-panel summary { cursor: pointer; min-height: 44px; padding: 10px 0; color: var(--portal-color-link); }
.portal-tax-details .portal-field { padding-top: 12px; }
.portal-preview-status { min-height: 24px; margin: -8px 0 20px; color: var(--portal-color-muted); }
.portal-preview-status.is-calculating::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid #d0dcd3; border-top-color: #205d38; border-radius: 50%; margin-right: 8px; animation: portal-spin .9s linear infinite; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .portal-preview-status.is-calculating::before { animation: none; } }
.portal-address-editor { scroll-margin-top: 24px; border-left: 3px solid #205d38; padding: 20px; }
@media (max-width: 600px) {
    .portal-shell { padding: 16px; }
    .portal-shell h1 { font-size: 28px; }
    .portal-brand-header { flex-wrap: wrap; gap: 12px; }
    .portal-customer-identity { margin: 0; text-align: left; flex-basis: 100%; }
    .portal-shell-nav, .portal-account-nav { grid-template-columns: 1fr; gap: 0; }
    .portal-shell-nav-link { text-align: center; min-height: 44px; padding: 10px 12px; border-bottom: 0; border-left: 3px solid transparent; }
    .portal-shell-nav-link[aria-current="page"] { border-left-color: #205d38; }
    .portal-account-link { text-align: left; }
    .portal-access-task { padding: 18px 16px; }
    .portal-order-select-grid, .portal-meta-grid, .portal-main-contact-grid { grid-template-columns: 1fr; }
    .portal-feedback { padding: 12px 16px; }
    .portal-total-row { flex-wrap: wrap; gap: 8px; }
}

.portal-address-summary { margin: 4px 0; color: var(--portal-color-muted); font-size: 14px; }
.portal-address-title-group h3 a { color: inherit; text-decoration: none; }
.portal-address-title-group h3 a:hover { text-decoration: underline; }