/* V2: semantic house tokens -> Bootstrap, then shell and component families.
   Loaded after the existing light/dark adapters. Core variants and state hooks
   remain in place; no prices, permissions or transaction behaviour live here. */
.hw-v2 {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-border-color: var(--border);
  --bs-heading-color: var(--fg-strong);
}
body:has(.hw-v2) { --hw-site-header-height: 0px; background: var(--bg); color: var(--fg); padding: 0; }
.hw-v2 { --hw-v2-error: color-mix(in srgb, var(--status-error) 70%, var(--fg-strong)); display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "head head" "side notes" "side main" "side foot"; min-height: calc(100vh - var(--hw-site-header-height)); min-height: calc(100svh - var(--hw-site-header-height)); font-family: var(--font-sans); }
.hw-v2--focused { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "notes" "main" "foot"; }
.hw-v2 [hidden] { display: none !important; }
.hw-v2 :is(button, input, select, textarea) { font-family: var(--font-sans) !important; }
.hw-v2 a { text-underline-offset: 3px; }
.hw-v2 :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--hw-brand-yellow) 55%, transparent); }
.hw-v2-skip { position: absolute; top: -100px; left: 16px; z-index: 1100; padding: 12px 18px; color: var(--accent-fg); background: var(--accent); }
.hw-v2-skip:focus { top: 12px; outline: 2px solid var(--border-focus); outline-offset: 3px; }
.hw-v2-header { grid-area: head; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; padding: 8px 40px; border-bottom: 1px solid var(--border); background: var(--bg); }
.hw-v2-header-brand { display: none; }
.hw-v2--focused .hw-v2-header-brand { display: block; }
.hw-v2--focused .hw-v2-context { display: block; }
.hw-v2-context { font-size: 14px; color: var(--fg-muted); }
.hw-v2-brand { display: inline-flex; align-items: center; min-height: 44px; }
.hw-v2-brand img { width: 180px; height: auto; }
.hw-v2-logo-dark { display: none; }
.dark-mode .hw-v2-logo-light { display: none; }
.dark-mode .hw-v2-logo-dark { display: block; }
.hw-v2-controls { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; min-width: 0; }
.hw-v2-controls a, .hw-v2-controls summary, .hw-v2-controls button { color: var(--fg-strong); font-size: 14px; }
.hw-v2-website { display: inline-flex; align-items: center; min-height: 44px; }
.hw-v2-icon-button { display: inline-grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: transparent; width: 44px; height: 44px; padding: 0; }
.hw-v2-icon-button:hover, .hw-v2-controls summary:hover { background: var(--bg-muted); }
.hw-v2-cart { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; gap: 8px; }
.hw-v2-account, .hw-v2-language { position: relative; }
.hw-v2-account > summary, .hw-v2-language > summary { list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 8px; border-radius: var(--r-sm); }
.hw-v2-account > summary::-webkit-details-marker, .hw-v2-language > summary::-webkit-details-marker { display: none; }
.hw-v2-account-panel, .hw-v2-language .hw-rail-lang { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1040; min-width: 220px; max-width: min(340px, calc(100vw - 40px)); padding: 12px; margin: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); color: var(--fg); box-shadow: var(--shadow-md); }
.hw-v2-account-panel strong { display: block; padding: 10px; overflow-wrap: anywhere; color: var(--fg-strong); }
.hw-v2-account-panel a, .hw-v2-account-panel button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 10px; text-align: left; background: transparent; border: 0; border-radius: var(--r-sm); white-space: normal; }
.hw-v2-account-panel a:hover, .hw-v2-account-panel button:hover { background: var(--bg-muted); }
.hw-v2-language .hw-rail-lang { display: flex; flex-direction: column; align-items: stretch; min-width: 150px; gap: 4px; }
.hw-v2-language .hw-rail-lang-item { color: var(--fg-strong); display: flex; align-items: center; min-height: 44px; padding: 8px 10px; width: 100%; gap: 8px; border-radius: var(--r-sm); }
.hw-v2-language .hw-rail-lang-item.is-current { color: var(--fg-muted); }
.hw-v2-language button.hw-rail-lang-item:hover { background: var(--bg-muted); color: var(--fg-strong); }
.hw-v2-sidebar { grid-area: side; position: sticky; top: var(--hw-site-header-height); align-self: start; max-height: calc(100vh - var(--hw-site-header-height)); max-height: calc(100svh - var(--hw-site-header-height)); overflow-y: auto; border-right: 1px solid var(--border); padding: 22px 18px; background: var(--bg); }
.hw-v2-sidebar-brand { margin: 0 6px 26px; }
.hw-v2-menu > summary { display: none; }
.hw-v2-nav-list { list-style: none; margin: 0; padding: 0; }
.hw-v2-nav-list li { margin: 3px 0; min-width: 0; }
.hw-v2-nav-list a, .hw-v2-nav-list summary, .hw-v2-extra > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 46px; border-radius: var(--r-sm); color: var(--fg-muted); font-size: 14px; line-height: 1.4; text-decoration: none; list-style: none; cursor: pointer; overflow-wrap: anywhere; }
.hw-v2-nav-list a:hover, .hw-v2-nav-list summary:hover, .hw-v2-extra > summary:hover { color: var(--fg-strong); background: var(--bg-muted); }
.hw-v2-nav-list a[aria-current], .hw-v2-nav-list summary.is-active { position: relative; background: var(--bg-elevated); color: var(--fg-strong); font-weight: 600; }
.hw-v2-primary a[aria-current]::before { content: ""; width: 3px; position: absolute; left: 0; top: 12px; bottom: 12px; background: var(--accent); border-radius: 4px; }
.hw-v2-nav-list a > i, .hw-v2-nav-list summary > i { width: 18px; flex-shrink: 0; text-align: center; }
.hw-v2-nav-list a > .badge { margin-left: auto; flex-shrink: 0; }
.hw-v2-nav-list summary > i:last-child { margin-left: auto; }
.hw-v2-nav-list summary::-webkit-details-marker { display: none; }
.hw-v2-nav-group > ul { padding-left: 12px; }
.hw-v2-nav-label { display: block; padding: 18px 12px 8px; color: var(--fg-muted); font-size: 12px; }
.hw-v2-extra { margin-top: 16px; }
.hw-v2-extra > summary { border-top: 1px solid var(--border); border-radius: 0; }
.hw-v2-account-links { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.hw-v2-promotions { grid-area: notes; min-width: 0; }
.hw-v2 > :is(.hw-main, .page-main, .hw-center-main, .cms-page-main) { grid-area: main; display: block; min-width: 0; width: 100%; max-width: none; margin: 0; padding: 0; }
.hw-v2 .hw-container { width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 40px; }
.hw-v2 .hw-header-section { padding: 44px 0 28px; background: transparent; border: 0; }
.hw-v2 .hw-page-header { display: flex; gap: 24px; align-items: flex-start; min-width: 0; }
.hw-v2 .hw-page-title { flex: 1; min-width: 0; }
.hw-v2 .hw-page-title h1 { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1.15; letter-spacing: var(--tr-heading); color: var(--fg-strong); margin: 0; overflow-wrap: anywhere; }
.hw-v2 .hw-page-title h1 > i { display: none; }
.hw-v2 .hw-subtitle { margin: 14px 0 0; color: var(--fg-muted); font-size: 16px; overflow-wrap: anywhere; }
.hw-v2 .hw-back-btn { display: grid; place-items: center; min-width: 44px; height: 44px; color: var(--fg-strong); border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: transparent; }
.hw-v2-page-actions, .hw-v2 .hw-page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hw-v2 .hw-content-section { padding: 0 0 48px; background: transparent; }
.hw-v2 .hw-tabs { margin: 0 0 28px; padding: 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; box-shadow: none; border-radius: 0; gap: 16px; }
.hw-v2 .hw-tabs-list { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; }
.hw-v2 .hw-tab { border: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 48px; padding: 12px 0; color: var(--fg-muted); }
.hw-v2 .hw-tab.is-active { border-bottom: 3px solid var(--accent); color: var(--fg-strong); background: transparent; }
.hw-v2 .hw-tabs-action { margin: 0 0 10px auto; }
.hw-v2 .card { --bs-card-bg: var(--bg-elevated); --bs-card-border-color: var(--border); --bs-card-color: var(--fg); background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: none; min-width: 0; }
.hw-v2 .card::before, .hw-v2 .card::after { content: none; }
.hw-v2 .card-header { padding: 22px 24px; background: transparent; border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0; color: var(--fg-strong); }
.hw-v2 .card-header :is(h2,h3,h4,h5) { color: var(--fg-strong); font-size: 20px; line-height: 1.35; margin: 0; }
.hw-v2 .card-body { padding: 24px; }
.hw-v2 .card-footer { padding: 18px 24px; background: transparent; border-top: 1px solid var(--border); }
.hw-v2 .card-table { overflow: visible; }
.hw-v2 .table { --bs-table-bg: transparent; --bs-table-color: var(--fg); --bs-table-border-color: var(--border); margin: 0; font-size: 14px; }
.hw-v2 .table > :not(caption) > * > * { padding: 16px 20px; border-bottom-color: var(--border); vertical-align: middle; }
.hw-v2 .table th { color: var(--fg-muted); background: var(--bg-muted); font-weight: 500; font-size: 13px; }
.hw-v2 :is(.table-responsive, .card-table > div[style*="overflow-x"]) { max-width: 100%; overflow-x: auto; border-radius: inherit; }
.hw-v2 .table a { overflow-wrap: anywhere; }
.hw-v2 :is(.form-control, .form-select) { font-size: 16px; min-height: 48px; border: 1.5px solid var(--fg-muted); background-color: var(--bg-elevated); color: var(--fg-strong); border-radius: var(--r-sm); padding: 10px 12px; }
.hw-v2 .form-select { appearance: auto; background-image: none; }
.dark-mode .hw-v2 { color-scheme: dark; }
.hw-v2 .form-control:focus, .hw-v2 .form-select:focus { background-color: var(--bg-elevated); color: var(--fg-strong); border-color: var(--fg-strong); }
.hw-v2 label { color: var(--fg-strong); font-size: 14px; }
.hw-v2 .form-group { margin-bottom: 22px; }
.hw-v2 .form-check-input { width: 20px; height: 20px; margin-right: 8px; }
.hw-v2 :is(.form-control, .form-select):is(.is-invalid,[aria-invalid="true"]), .hw-v2 .was-validated :is(.form-control,.form-select):invalid { border: 2px solid var(--hw-v2-error); }
.hw-v2 :is(.invalid-feedback,.invalid-tooltip) { color: var(--hw-v2-error); font-size: 13px; line-height: 1.5; font-weight: 600; }
.hw-v2 .invalid-tooltip { background: var(--bg-elevated); border: 1px solid var(--hw-v2-error); }
.hw-v2 .btn { min-height: 44px; font-size: 14px; white-space: normal; border-radius: var(--r-pill); box-shadow: none; }
.hw-v2 .alert { border-radius: var(--r-md); box-shadow: none; border-width: 1px; padding: 18px 20px; }
.hw-v2 .alert-danger { color: var(--hw-v2-error); background: var(--bg-elevated); border-color: var(--hw-v2-error); }
.hw-v2 .alert-danger .alert-text { color: inherit; }
.hw-v2 .modal-content { background: var(--bg-elevated); color: var(--fg); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }
.hw-v2 .modal-header, .hw-v2 .modal-footer { border-color: var(--border); }
.hw-v2 .hw-db { max-width: none; }
.hw-v2 .hw-db__lage { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--border); background: transparent; border-radius: 0; }
.hw-v2 .hw-db__tun { margin-bottom: 32px; }
.hw-v2 .hw-db__abschnitt { margin: 0 0 32px; }
.hw-v2 .hw-db__kopf { margin-bottom: 18px; }
.hw-v2 .hw-db__kopf h2 { font-size: 22px; }
.hw-v2 .hw-db__gitter { display: block; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); overflow: hidden; }
.hw-v2 .hw-db__karte { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 24px; padding: 24px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; background: transparent; }
.hw-v2 .hw-db__karte:last-child { border-bottom: 0; }
.hw-v2 .hw-db__karte-kopf { grid-column: 1; min-width: 0; padding: 0; }
.hw-v2 .hw-db__karte-titel { min-width: 0; }
.hw-v2 .hw-db__karte-titel :is(b,span) { overflow-wrap: anywhere; }
.hw-v2 .hw-db__karte-datum { grid-column: 1; padding: 0 0 0 48px; margin: 0; border: 0; }
.hw-v2 .hw-db__karte-fuss { grid-column: 2; grid-row: 1/3; display: flex; align-items: center; border: 0; margin: 0; padding: 0; }
.hw-v2 .hw-db__mini { min-height: 44px; display: inline-flex; align-items: center; }
.hw-v2 .hw-db__leer, .hw-v2 .hw-db__kachel, .hw-v2 .hw-db__hilfe, .hw-v2 .hw-db__zahlart { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); box-shadow: none; }
.hw-v2 .hw-db__neben { gap: 16px; }
.hw-v2 .hw-db__hilfe { padding: 24px; }
.hw-v2 .hw-db__knopf { min-height: 44px; }
/* Dashboard structure follows the V2 preview; values and actions stay in Twig. */
.hw-v2 .hw-db__greeting { display: block; margin-bottom: 12px; color: var(--fg-muted); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: normal; }
.hw-v2 .hw-db__summary { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--border); }
.hw-v2 .hw-db__summary a { display: flex; align-items: center; gap: 8px; min-height: 44px; color: var(--fg-muted); font-size: 14px; text-decoration: none; }
.hw-v2 .hw-db__summary strong { font-size: 22px; color: var(--fg-strong); }
.hw-v2 .hw-db__summary a:hover { text-decoration: underline; }
.hw-v2 .hw-db__layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; grid-template-areas: "content tasks" "content context"; gap: 0 32px; }
.hw-v2 .hw-db__content { grid-area: content; min-width: 0; }
.hw-v2 .hw-db__tasks { grid-area: tasks; min-width: 0; border-top: 3px solid var(--accent); padding-top: 20px; }
.hw-v2 .hw-db__tasks > h2 { margin: 0 0 14px; font-size: 20px; }
.hw-v2 .hw-db__context { grid-area: context; min-width: 0; }
.hw-v2 .hw-db--v2 .hw-db__lage { padding: 0; margin-bottom: 18px; border: 0; font-size: 14px; }
.hw-v2 .hw-db--v2 .hw-db__nr { width: 100%; margin-left: 0; overflow-wrap: anywhere; }
.hw-v2 .hw-db--v2 .hw-db__tun { margin-bottom: 24px; }
.hw-v2 .hw-db__tasks .alert { margin-block: 12px 0 !important; }
.hw-v2 .hw-db__tasks .hw-db__zahlart { display: block; padding: 16px; margin-top: 12px; }
.hw-v2 .hw-db__tasks .hw-db__zahlart-txt { margin-bottom: 12px; }
.hw-v2 .hw-db--v2 .hw-db__panel { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); overflow: hidden; }
.hw-v2 .hw-db__panel > .hw-db__kopf { padding: 22px 24px; margin: 0; flex-wrap: wrap; align-items: center; }
.hw-v2 .hw-db__panel .hw-db__kopf h2 { font-size: 20px; }
.hw-v2 .hw-db__panel .hw-db__gitter { margin: 0 24px 8px; border: 0; border-radius: 0; }
.hw-v2 .hw-db__panel .hw-db__karte { padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 0; gap: 6px 16px; }
.hw-v2 .hw-db__panel .hw-db__karte-datum { padding-left: 52px; }
.hw-v2 .hw-db--v2 .hw-db__marke { background: var(--bg-muted); color: var(--fg-strong); }
.hw-v2 .hw-db__panel .hw-db__kachel--breit { max-width: none; margin: 0 24px 24px; border: 0; padding: 0; }
.hw-v2 .hw-db__panel .hw-db__kachel-txt b { overflow-wrap: anywhere; }
.hw-v2 .hw-db__panel .hw-db__leer { border: 0; border-radius: 0; padding-top: 0; }
.hw-v2 .hw-db__context .hw-db__abschnitt { border-top: 1px solid var(--border); padding-top: 24px; margin-bottom: 24px; }
.hw-v2 .hw-db__context .hw-db__kopf h2 { font-size: 18px; }
.hw-v2 .hw-db__context .hw-db__neben { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.hw-v2 .hw-db__context .hw-db__kachel { border: 0; background: transparent; padding: 10px 0; }
.hw-v2 .hw-db__context .hw-db__kachel-txt b { font-size: 14px; }
.hw-v2 .hw-db__context .hw-db__hilfe { display: block; margin: 0; padding: 24px 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; }
.hw-v2 .hw-db__context .hw-db__hilfe-txt { margin-bottom: 16px; }
.hw-v2 .hw-db__context .hw-db__hilfe .hw-db__knopf { margin: 0 0 12px; }
.hw-v2 .hw-db--v2 .hw-db__knopf { white-space: normal; max-width: 100%; }
@media (max-width: 1250px) and (min-width: 901px) {
  .hw-v2 .hw-db__layout { grid-template-columns: minmax(0, 1fr) 240px; column-gap: 24px; }
}
@media (max-width: 1100px) {
  .hw-v2 .hw-db__panel .hw-db__karte { grid-template-columns: minmax(0, 1fr); }
  .hw-v2 .hw-db__panel .hw-db__karte-fuss { grid-column: 1; grid-row: auto; padding-left: 52px; }
  .hw-v2 .hw-db__panel .hw-db__karte-kopf { flex-wrap: wrap; }
  .hw-v2 .hw-db__panel .hw-db__karte-titel { flex-basis: calc(100% - 52px); }
  .hw-v2 .hw-db__panel .hw-db__ampel { margin-left: 52px; }
}
@media (max-width: 760px) {
  .hw-v2 .hw-db__layout { display: flex; flex-direction: column; }
  .hw-v2 .hw-db__summary { gap: 12px 20px; margin-bottom: 24px; padding-bottom: 16px; }
  .hw-v2 .hw-db__summary a { display: block; font-size: 12px; }
  .hw-v2 .hw-db__summary strong { display: block; font-size: 20px; }
  .hw-v2 .hw-db__panel > .hw-db__kopf { padding: 20px; }
  .hw-v2 .hw-db__panel .hw-db__gitter { margin-inline: 20px; }
  .hw-v2 .hw-db__panel .hw-db__kachel--breit { margin-inline: 20px; }
}
.hw-v2 .hw-center-main { align-self: stretch; }
.hw-v2 .hw-center-main:not(:has(.hw-auth-v2)) { padding: 40px 20px; }
.hw-v2 .hw-center-main .card-wrapper { max-width: min(100%, 640px); margin-inline: auto; }
.hw-v2 .hw-auth-v2 { min-height: 0; height: 100%; background: transparent; }
.hw-v2 .hw-auth-v2-layout { margin-block: auto; }
.hw-v2 .hw-auth-form .card-wrapper { max-width: none; }
.hw-v2 .hw-auth-form .card-header { border: 0; }
.hw-v2 .hw-auth-form .card-body { padding-top: 0; }
.hw-v2 .hw-auth-form .hw-rail-lang { position: static; }
.hw-v2-footer { grid-area: foot; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 24px; margin: 0 40px; padding: 22px 0; border-top: 1px solid var(--border); font-size: 12px; color: var(--fg-muted); min-width: 0; }
.hw-v2-footer > p { width: auto; max-width: 100%; font-size: 12px; }
.hw-v2-footer > ul { width: auto; }
.hw-v2-footer > nav { display: flex; flex-wrap: wrap; gap: 0 20px; flex-basis: 100%; }
.hw-v2-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-muted); font-size: 12px; text-decoration: underline; }
.hw-v2 .payment-method-selection .custom-radio { border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: none; background: var(--bg-elevated); }
.hw-v2 .payment-method-selection .custom-radio:has(:checked) { border-color: var(--fg-strong); background: var(--bg-muted); }
.hw-v2 .payment-method-selection .custom-radio.is--disabled { cursor: not-allowed; }
.hw-v2 .hw-payment-restriction { font-size: 13px; line-height: 1.5; }
@media(max-width:1200px) {
  .hw-v2 { grid-template-columns: 220px minmax(0,1fr); }
  .hw-v2--focused { grid-template-columns: minmax(0,1fr); }
  .hw-v2-header, .hw-v2 .hw-container { padding-inline: 28px; }
  .hw-v2-footer { margin-inline: 28px; }
  .hw-v2-sidebar { padding-inline: 12px; }
}
@media(max-width:1000px) {
  .hw-v2 { display: flex; flex-direction: column; }
  .hw-v2 > :is(.hw-main,.page-main,.hw-center-main,.cms-page-main) { flex: 1; }
  .hw-v2-header { flex-wrap: wrap; padding: 16px 24px; gap: 12px; }
  .hw-v2-header-brand { display: block; }
  .hw-v2-sidebar-brand { display: none; }
  .hw-v2-brand img { width: 156px; }
  .hw-v2-controls { gap: 8px; }
  .hw-v2-website { display: none; }
  .hw-v2-sidebar { position: static; height: auto; max-height: none; padding: 0 24px; border: 0; border-bottom: 1px solid var(--border); overflow: visible; }
  .hw-v2-menu > summary { display: flex; align-items: center; gap: 12px; min-height: 48px; color: var(--fg-strong); font-size: 14px; cursor: pointer; }
  .hw-v2-menu nav { padding: 8px 0 20px; }
  .hw-v2-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .hw-v2 .hw-header-section { padding-top: 32px; }
  .hw-v2 .hw-page-header { flex-wrap: wrap; }
  .hw-v2-page-actions { flex-basis: 100%; }
}
@media(max-width:720px) {
  .hw-v2-header, .hw-v2-sidebar, .hw-v2 .hw-container { padding-inline: 20px; }
  .hw-v2-header { gap: 12px 20px; }
  .hw-v2-controls { flex: 1; }
  .hw-v2-cart span, .hw-v2-account > summary > span { display: none; }
  .hw-v2-cart, .hw-v2-account > summary { min-width: 44px; justify-content: center; }
  .hw-v2-controls :is(a,summary,button) { font-size: 13px; }
  .hw-v2 .hw-page-title h1 { font-size: 32px; }
  .hw-v2 .hw-content-section { padding-bottom: 32px; }
  .hw-v2 .hw-tabs-list { gap: 0 20px; }
  .hw-v2 .hw-tab { font-size: 13px; }
  .hw-v2 .hw-tabs-action { margin-left: 0; }
  .hw-v2 .card-body, .hw-v2 .card-header, .hw-v2 .card-footer { padding: 20px; }
  .hw-v2 .hw-db__karte { display: block; padding: 20px; }
  .hw-v2 .hw-db__karte-datum { padding-left: 0; margin-top: 12px; }
  .hw-v2 .hw-db__karte-fuss { margin-top: 12px; }
  .hw-v2 .hw-db__karte-kopf { flex-wrap: wrap; }
  .hw-v2 .hw-db__ampel { margin-left: auto; }
  .hw-v2 .hw-db__hilfe { padding: 20px; }
  .hw-v2 .hw-auth-form .card { background: transparent; border: 0; }
  .hw-v2 .hw-auth-form .card-header, .hw-v2 .hw-auth-form .card-body { padding: 0 0 24px; }
  .hw-v2 .hw-auth-form .card-footer { padding: 20px 0; }
  .hw-v2-footer { margin-inline: 20px; }
}
@media(prefers-reduced-motion:reduce) {
  .hw-v2 *, .hw-v2 *::before, .hw-v2 *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Core DNS tables are direct card children, without a responsive wrapper. */
.hw-v2 .card-table:has(> table) { overflow-x: auto; }

@supports not (color: color-mix(in srgb, red, black)) {
  .hw-v2 { --hw-v2-error: var(--status-error); }
}
/* Core alerts can include a trailing action; wrap it before it widens the page. */
.hw-v2 .alert { --alert-icon-width: 1.5rem; --alert-gap: 12px; align-items: flex-start; flex-wrap: wrap; gap: var(--alert-gap); }
.hw-v2 .alert > i { flex: 0 0 var(--alert-icon-width); text-align: center; margin-top: .15em; margin-right: 0 !important; }
.hw-v2 .alert > .alert-content,
.hw-v2 .alert > .alert-text { width: auto; margin-left: 0; min-width: 0; overflow-wrap: anywhere; }
.hw-v2 .alert > .alert-content { flex: 1 1 0; }
.hw-v2 .alert > .alert-text { flex: 1 1 200px; }
/* Keep the icon on the text row even when the preferred text width cannot fit. */
.hw-v2 .alert:has(> i) > .alert-text { flex-basis: min(200px, calc(100% - var(--alert-icon-width) - var(--alert-gap))); }
.hw-v2 .alert > .btn { margin-inline-start: 0 !important; }

/* Website fragments are siblings of the portal, never children of its grid. */
.hw-v2-site-header, .hw-v2-site-footer { width: 100%; min-width: 0; }
.hw-v2-site-header { position: sticky; top: 0; z-index: 901; }
.hw-v2-site-header:has(.mk-nav__group[data-open="true"], .mk-nav[data-menu-open="true"]) { z-index: 1049; }
.hw-v2-site-header > header, .hw-v2-site-footer > footer { max-width: none; }
.hw-v2-site-header .mk-nav, .hw-v2-site-footer .mk-footer { font-family: var(--font-sans); }
/* The old admin CSS supplied German text even on English checkout pages. */
body.page-checkout-cart .hw-v2 #completeOrderForm::before { content: none; }
.hw-v2 .hw-v2-consent-title { margin: 0 0 .9rem; font-size: 1rem; font-weight: 700; }

#hw-v2-content { scroll-margin-top: calc(var(--hw-site-header-height) + 16px); }

/* Compact partials: static website navigation and live account controls share
   one header. The old fragments keep their existing layout during rollout. */
.hw-v2-site-header--compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 10px 40px; background: var(--bg); border-bottom: 1px solid var(--border); font-family: var(--font-sans); z-index: 1045; }
.hw-v2-site-header--compact .hw-portal-header { display: contents; }
.hw-v2-site-header--compact .hw-portal-logo { grid-column: 1; grid-row: 1; }
.hw-v2-site-header--compact .hw-portal-nav { grid-column: 2; grid-row: 1; }
.hw-v2-site-header--compact .hw-v2-header { grid-column: 3; grid-row: 1; min-height: 44px; padding: 0; border: 0; background: transparent; }
.hw-v2-site-header--compact .hw-v2-context { display: none; }
.hw-v2-site-header--compact .hw-v2-controls { gap: 8px; flex-wrap: nowrap; }
.hw-v2-site-header--compact :is(a, summary, button) { font-family: var(--font-sans); }
.hw-v2-site-header--compact .hw-v2-controls > a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); text-decoration: none; }
.hw-v2-site-header--compact .hw-v2-controls > a:hover { background: var(--bg-muted); }
.hw-v2-site-header--compact :focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.hw-v2--compact-frame { min-height: calc(100vh - var(--hw-site-header-height) - var(--hw-site-footer-height, 0px)); min-height: calc(100svh - var(--hw-site-header-height) - var(--hw-site-footer-height, 0px)); }
.hw-v2-site-footer--compact { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 12px 40px; border-top: 1px solid var(--border); background: var(--bg); color: var(--fg-muted); }
.hw-v2-site-footer--compact .hw-v2-footer { flex: 0 1 auto; margin: 0; padding: 0; border: 0; gap: 0 16px; }
.hw-v2-site-footer--compact .hw-v2-footer > p { margin: 0; overflow-wrap: anywhere; }
.hw-v2-site-footer--compact .hw-v2-footer > ul:not(:has(li)) { display: none; }
.hw-v2-site-footer--compact .hw-portal-footer.mk-footer { flex: 1; min-width: 0; width: auto; padding: 0; border: 0; }
@media (max-width: 1100px) {
  .hw-v2-site-header--compact { gap: 12px; padding-inline: 28px; }
  .hw-v2-site-footer--compact { padding-inline: 28px; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .hw-v2-site-header--compact { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 8px 20px; }
  .hw-v2-site-header--compact .hw-v2-header { grid-column: 2; }
  .hw-v2-site-header--compact .hw-portal-nav { grid-column: 1 / -1; grid-row: 2; }
  .hw-v2-site-header--compact .hw-portal-nav .hw-ts { margin-left: auto; }
  .hw-v2-site-footer--compact { padding-inline: 20px; gap: 4px; }
  .hw-v2-site-footer--compact .hw-v2-footer, .hw-v2-site-footer--compact .hw-portal-footer { flex-basis: 100%; }
}
@media (max-width: 480px) {
  .hw-v2-site-header--compact .hw-v2-controls { gap: 0; }
  .hw-v2-site-header--compact .hw-v2-controls > a { padding-inline: 8px; }
  .hw-v2-site-header--compact .hw-v2-language > summary { padding-inline: 6px; font-size: 12px; }
  .hw-v2-site-header--compact .hw-v2-account-login { font-size: 12px; }
}
@media (max-width: 360px) {
  .hw-v2-site-header--compact .hw-portal-logo img { width: 120px; }
}

/* Keep status and action in the same columns, including non-manageable products. */
.hw-v2 .hw-db__panel .hw-db__karte-aktionen { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: 112px 108px; align-items: center; gap: 12px; }
.hw-v2 .hw-db__panel .hw-db__karte-aktionen > .hw-db__ampel { justify-self: start; margin: 0; white-space: normal; }
.hw-v2 .hw-db__panel .hw-db__karte-aktionen > .hw-db__karte-fuss { display: flex; grid-column: auto; grid-row: auto; margin: 0; padding: 0; justify-content: flex-end; }
@media (max-width: 1250px) {
  .hw-v2 .hw-db__panel .hw-db__karte { grid-template-columns: minmax(0, 1fr); }
  .hw-v2 .hw-db__panel .hw-db__karte-aktionen { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr) auto; padding-left: 52px; }
}
@media (max-width: 480px) {
  .hw-v2 .hw-db__panel .hw-db__karte-aktionen { padding-left: 0; }
}

.hw-v2 .hw-password-check { --hw-password-error: color-mix(in srgb, var(--status-error, #D64545) 70%, var(--fg-strong)); margin-top: 12px; color: var(--fg-muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.hw-v2 .hw-password-check p { margin: 0 0 8px; }
.hw-v2 .hw-password-bars { display: flex; gap: 6px; margin-bottom: 8px; }
.hw-v2 .hw-password-bars span { height: 4px; flex: 1; border-radius: 2px; background: var(--border); }
.hw-v2 .hw-password-bars span[data-filled] { background: var(--hw-password-error); }
.hw-v2 .hw-password-check[data-accepted="true"] .hw-password-bars span[data-filled] { background: var(--status-success, #27805e); }
.hw-v2 .hw-password-check[data-accepted="false"] #hw-password-feedback { color: var(--hw-password-error); }

.hw-v2-account-panel.hw-rail-user-text strong { white-space: normal; overflow: visible; }

/* Long navigation labels retain their reading width, including balance links. */
.hw-v2-sidebar { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.hw-v2-nav-list .hw-v2-link-label { min-width: 0; word-break: normal; overflow-wrap: break-word; hyphens: none; }
.hw-v2-nav-list a:has(> .badge) { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 4px 10px; }
.hw-v2-nav-list a:has(> .badge) > .hw-v2-link-label { grid-column: 2; grid-row: 1; }
.hw-v2-nav-list a:has(> .badge) > .badge { grid-column: 2; justify-self: start; margin-left: 0; }
.hw-v2-nav-list a:has(> .badge):not(:has(> i)) { grid-template-columns: minmax(0, 1fr); }
.hw-v2-nav-list a:has(> .badge):not(:has(> i)) > :is(.hw-v2-link-label, .badge) { grid-column: 1; }
/* Core payment controls and their disabled/selected states remain functional. */
.hw-v2 .card-body.payment-method-selection:has(input[name="payment_method_id"]) { padding: 24px !important; }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio { margin: 0; border-radius: 0; position: relative; }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio ~ .custom-radio { margin-top: -1px; }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio:nth-child(1 of .custom-radio) { border-radius: var(--r-md) var(--r-md) 0 0; }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio:nth-last-child(1 of .custom-radio) { border-radius: 0 0 var(--r-md) var(--r-md); }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio:nth-child(1 of .custom-radio):nth-last-child(1 of .custom-radio) { border-radius: var(--r-md); }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio:has(:checked) { z-index: 1; }
.hw-v2 .payment-method-selection:has(input[name="payment_method_id"]) > .custom-radio:focus-within { z-index: 2; outline: 2px solid var(--border-focus); outline-offset: 2px; }
@media (max-width: 600px) {
  .hw-v2 .card-body.payment-method-selection:has(input[name="payment_method_id"]) { padding: 20px !important; }
}