/* =========================================================
   WerkBid – Unified Premium Dark “Asphalt + Glass”
   Single source of truth for Public + Account + Admin
   Brand color values are defined only as CSS variables in :root.
   ========================================================= */

:root{
  /* Layout */
  --pad-desktop:40px;
  --pad-tablet:20px;
  --pad-mobile:16px;
  --shell-mobile-block-pad-y:32px;
  --shell-mobile-card-pad-y:22px;
  --shell-mobile-card-pad-x:18px;
  --shell-mobile-safe-inset:10px;
  --cms-dd-gap:var(--space-2);
  --cms-dd-caret-size:12px;
  --cms-icon-radius:3px;
  --cms-visual-pad:var(--space-4);
  --cms-modal-panel-pad:var(--space-4);
  --cms-dd-panel-offset:var(--space-2);
  --cms-dd-panel-pad:var(--space-2);
  --cms-dd-option-pad-y:var(--space-2);
  --cms-dd-option-pad-x:var(--space-3);
  --cms-advanced-gap:var(--space-3);
  --cms-seo-pill-fs:11px;
  --cms-seo-pill-pad-y:4px;
  --cms-seo-pill-pad-x:8px;
  --cms-seo-tag-pad-y:2px;
  --cms-seo-tag-pad-x:8px;
  --cms-seo-row-label-fs:var(--form-filter-label-fs);
  --cms-seo-row-meta-fs:var(--profile-tag-fs);
  --cms-seo-score-label-fs:var(--cms-seo-row-meta-fs);
  --cms-seo-small-fs:var(--cms-seo-row-meta-fs);
  --cms-seo-list-gap:var(--space-2);
  --cms-seo-details-gap:var(--space-2);
  --cms-seo-snippet-url-gap:var(--space-1);
  --cms-seo-card-head-gap-y:var(--space-2);
  --cms-seo-tag-gap-x:var(--space-2);
  --cms-seo-light-size:var(--space-3);
  --cms-content-quote-pad-y:var(--space-3);
  --cms-content-quote-pad-x:var(--space-4);
  --home-hero-grid-gap:40px;
  --home-hero-search-gap:15px;
  --home-hero-card-gap:15px;
  --home-hero-action-gap:15px;
  --home-hero-shell-pad:clamp(28px,3vw,44px);
  --home-hero-input-h:62px;
  --home-section-gap:15px;
  --home-section-grid-gap:15px;
  --home-faq-item-pad-y:var(--space-3);
  --home-faq-item-pad-x:var(--space-4);
  --home-faq-summary-pad-y:var(--space-4);
  --home-faq-summary-pad-x:18px;
  --home-faq-summary-mobile-pad-y:15px;
  --home-faq-body-pad-y:var(--space-4);
  --home-faq-body-pad-bottom:18px;
  --home-faq-body-mobile-pad-y:14px;
  --home-check-size:24px;
  --section-pad-y:42px;
  --service-card-pad:var(--space-4);
  --home-feature-grid-gap:var(--space-4);
  --home-feature-grid-gap-top:18px;
  --home-feature-card-pad:18px;
  --home-icon-ring-gap:var(--space-2);
  --home-bullets-indent:18px;
  --home-faq-gap-top:18px;

  /* Colors */
  /* Overall background (darker premium) */
  --bg:#12161B;
  --bg2:#12161B;
  --text:#FFFFFF;
  --muted:rgba(255,255,255,.65);
  --brand-primary:#1A5C85;
  --brand-primary-hover:#1F6D9C;
  --brand-link:#FF8202;
  --brand-link-hover:rgba(255,130,2,.92);
  --brand-link-underline:rgba(255,130,2,.45);
  --accent:var(--brand-primary);
  --accent-soft:rgba(26,92,133,.16);
  --link:var(--brand-link);
  --link-hover:var(--brand-link-hover);
  --link-underline:var(--brand-link-underline);
  --color-bg:var(--bg);
  --color-surface:var(--surface);
  --color-surface-raised:var(--panel2);
  --color-text:var(--text);
  --color-text-muted:var(--muted);
  --color-primary:var(--brand-primary);
  --color-primary-hover:var(--brand-primary-hover);
  --color-link:var(--brand-link);
  --color-link-hover:var(--brand-link-hover);
  --nav-accent-line:var(--link-underline);
  --nav-focus-line:var(--focus-color);
  --cta:var(--accent);
  --btn-bg:var(--cta);
  --wb-blue:var(--brand-primary);
  --wb-blue-2:var(--brand-primary-hover);
  --ok:#bff2d2;
  --warn:#ffe0c9;
  --err:#ffd2d2;
  --success-soft:rgba(65,209,124,.10);
  --success-line:rgba(65,209,124,.35);
  --warning-soft:rgba(255,138,61,.10);
  --warning-line:rgba(255,138,61,.35);
  --danger-soft:rgba(255,77,77,.10);
  --danger-line:rgba(255,77,77,.35);
  --danger-bg:#8B1E1E;
  --success-bg:#167A46;
  --success:var(--ok);
  --info-soft:rgba(91,176,255,.10);
  --info-line:rgba(91,176,255,.35);
  --info:#d6ecff;

  /* Messaging / status surfaces */
  --notice-padding-y:12px;
  --notice-padding-x:14px;
  --notice-radius:var(--component-radius);
  --notice-border:var(--line);
  --badge-radius:var(--radius-pill);
  --badge-min-h:28px;
  --badge-gap:6px;
  --badge-padding-y:6px;
  --badge-padding-x:10px;
  --badge-gray-bg:var(--state-muted-soft);
  --badge-gray-border:var(--state-muted-line);
  --badge-gray-text:var(--muted);
  --pill-fs:var(--form-filter-label-fs);
  --pill-pad-y:7px;
  --pill-pad-x:var(--space-3);
  --pill-compact-pad-y:var(--cms-seo-pill-pad-y);
  --pill-compact-pad-x:var(--profile-tag-pad-x);
  --empty-gap:var(--space-2);
  --empty-actions-gap:var(--space-3);
  --notification-description-gap:var(--space-4);
  --notification-badge-size:18px;
  --notification-badge-pad-x:5px;
  --notification-badge-offset:-6px;
  --notification-badge-fs:var(--pill-fs);
  --admin-menu-indent-base:18px;
  --admin-menu-indent-step:10px;
  --wizard-bottombar-offset:var(--space-2);
  --wizard-bottombar-mobile-pad-y:var(--space-3);
  --wizard-bottombar-mobile-pad-bottom:2px;
  --state-muted-soft:rgba(148,163,184,.10);
  --state-muted-line:rgba(148,163,184,.22);
  --state-dot-default:rgba(255,255,255,.30);
  --state-dot-ok:rgba(65,209,124,.85);
  --state-dot-warn:rgba(255,138,61,.85);
  --state-dot-muted:rgba(148,163,184,.70);

  /* Semantic UI state colors */
  --text-soft:#e6e6e6;
  --seo-red:#ff4d4d;
  --seo-red-text:#ff7a7a;
  --seo-yellow:#ffcc00;
  --seo-green:#2dd36f;
  --seo-title:#b7d0ff;
  --seo-url:#8fe1a3;
  --meter-weak:#c0392b;
  --meter-medium:#f1c40f;
  --meter-strong:#2ecc71;
  --surface-deep:#0f1c2a;
  --surface-deeper:#0d1621;
  --surface-editor:#0b1220;
  --editor-surface:var(--surface-editor);
  --editor-surface-muted:rgba(255,255,255,.06);
  --editor-border:var(--component-border);
  --editor-border-strong:rgba(255,130,2,.38);
  --editor-hover-bg:rgba(255,255,255,.10);
  --editor-active-bg:rgba(255,255,255,.14);
  --editor-active-border:rgba(255,193,7,.50);
  --editor-active-shadow:0 0 0 2px rgba(255,193,7,.10) inset;
  --editor-focus-border:var(--focus-color);
  --editor-focus-shadow:var(--focus-shadow);
  --editor-popover-bg:rgba(10,14,20,.96);
  --editor-popover-shadow:0 18px 60px rgba(0,0,0,.55);
  --editor-group-bg:rgba(0,0,0,.18);
  --editor-toolbar-shadow:0 12px 34px rgba(0,0,0,.42);
  --editor-swatch-label:rgba(255,255,255,.92);
  --editor-swatch-border:rgba(255,255,255,.22);
  --editor-swatch-inset:rgba(0,0,0,.18);
  --editor-swatch-shadow:inset 0 0 0 1px var(--editor-swatch-inset);
  --editor-canvas-shadow:inset 0 0 0 1px var(--editor-canvas-inset);
  --seo-light-shadow:0 0 0 2px var(--editor-swatch-inset) inset;
  --seo-light-strong-shadow:var(--seo-light-shadow), 0 0 0 1px var(--component-border);

  --editor-swatch-size:22px;
  --editor-swatch-gap:var(--space-2);
  --editor-canvas-inset:rgba(255,255,255,.04);
  --editor-advanced-shadow:0 12px 30px rgba(0,0,0,.36);
  --avatar-box-bg:#0d131c;
  --accent-cyan:#66d9ff;
  --password-eye:rgba(255,255,255,.62);
  --password-eye-hover:var(--text);
  --password-eye-bg-hover:var(--surface-muted);
  --password-meter-bg:rgba(255,255,255,.10);
  --password-meter-height:6px;
  --password-eye-size:18px;
  --password-eye-offset:var(--space-2);
  --auth-grid-gap:var(--space-6);
  --auth-card-radius:var(--component-radius-lg);
  --auth-card-shadow:var(--component-shadow);
  --auth-card-padding:var(--space-6);
  --auth-form-gap:var(--space-form);
  --auth-single-max:760px;
  --fallback-text:#e9eef7;
  --line:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.14);
  --hr-border:var(--line);
  --label-muted-fg:rgba(255,255,255,.78);
  --input-border:rgba(255,255,255,.18);
  --input-border-w:var(--border-w);
  --input-padding-y:12px;
  --input-padding-x:14px;
  /* Dense panels/cards (non-transparent) */
  --card:#1A1F24;
  --surface:var(--card);
  --panel:#1A1F24;
  --panel2:#20262C;
  --input-bg:#282C30;

  /* Asphalt texture layers */

  /* Typography tokens */
  --fs-base:16px;
  --fs-small:12px;
  --fs-sm:var(--fs-small);
  --fs-4:15px;
  --fs-5:16px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-h1:30px;
  --fs-h2:18px;
  --fs-h3:16px;
  --fs-body:var(--fs-base);
  --lh-tight:1.2;
  --lh-heading:1.25;
  --lh-body:1.55;
  --lh-copy:1.65;
  --lh-normal:var(--lh-body);
  --copy-max:68ch;

  /* Radius / borders / focus */
  --radius-xs:6px;
  --radius-pill:999px;
  --radius-sm:10px;
  --radius-input:var(--radius-sm);
  --radius:14px;      /* one global radius */
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:22px;
  --btn-secondary-bg:rgba(255,255,255,.05);
  --btn-secondary-bg-hover:rgba(255,255,255,.09);
  --btn-secondary-border:rgba(255,255,255,.16);
  --btn-hover-border:rgba(255,255,255,.22);
  --btn-primary-bg:var(--wb-blue);
  --btn-primary-bg-hover:var(--wb-blue-2);
  --btn-primary-border:rgba(255,255,255,.12);
  --btn-danger-border:var(--danger-bg);
  --btn-success-border:var(--success-bg);
  --cms-swatch-preview:var(--surface);
  /* Backwards-kompatible Tokens (einheitliches Komponenten-Pattern) */
  --border-w:1px;
  --border-w-2:2px;
  --focus-ring:3px;
  --focus-outline-w:var(--border-w);
  --focus-outline-offset:3px;
  --font-sans:system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Spacing tokens */
  --space-half:2px;
  --space-1-5:6px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:28px;
  --space-8:32px;
  --space-card:16px;
  --space-form:12px;
  --space-section:24px;

  /* Buttons */
  --btn-radius:var(--component-radius);
  --btn-pad-y:12px;
  --btn-pad-x:16px;
  --btn-border-w:1px;
  --btn-sm-min-h:var(--account-action-min-h);
  --btn-transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .12s ease,filter .18s ease;

  /* Tables */
  --table-fs:var(--fs-4);
  --table-py:var(--control-pad-y);
  --table-px:var(--space-3);
  --table-border-w:var(--border-w);
  --table-head-fg:rgba(255,255,255,.90);
  --table-row-stripe-bg:rgba(255,255,255,.02);
  --table-action-min-h:var(--btn-sm-min-h);
  --table-mobile-min:720px;
  --table-action-mobile-gap-y:var(--space-1);
  --document-table-min:680px;
  --invoice-col-pos:60px;
  --invoice-col-art:120px;
  --invoice-col-qty:80px;
  --invoice-col-unit:120px;
  --invoice-col-sum:120px;
  --table-action-icon-size:18px;
  --wb-choice-list-gap:var(--space-2);
  --admin-cms-table-min:820px;
  --admin-table-empty-min-h:120px;
  --admin-email-table-min:760px;
  --account-list-table-min:760px;
  --account-list-table-mobile-min:680px;
  --table-scroll-fade-w:var(--space-6);

  /* Shadows (token-driven) */
  --shadow-panel:none;
  --shadow-sm:0 8px 22px rgba(0,0,0,.22);
  --shadow-md:0 16px 42px rgba(0,0,0,.30);
  --shadow-float:0 10px 30px rgba(0,0,0,.45);
  --shadow-modal:0 20px 60px rgba(0,0,0,.55);
  --motion-fast:160ms;
  --motion-ease:ease;
  --surface-soft:rgba(255,255,255,.04);
  --header-bg-img:none;
  --header-h:72px;
  --maint-text:var(--text);
  --maint-bg:var(--surface-deep);
  --maint-bg-end:var(--surface-editor);
  --maint-wrap-pad-y:40px;
  --maint-wrap-pad-x:var(--space-3);
  --maint-card-pad-y:28px;
  --maint-card-pad-x:26px;
  --maint-pill-pad-y:var(--space-1);
  --maint-pill-pad-x:var(--space-2);
  --maint-orb-primary:rgba(120,120,255,.18);
  --maint-orb-secondary:rgba(0,200,180,.14);
  --maint-card-bg:rgba(255,255,255,.06);
  --maint-card-border:rgba(255,255,255,.10);
  --maint-card-shadow:0 18px 70px rgba(0,0,0,.55);
  --maint-pill-bg:var(--admin-menu-hover-bg);
  --maint-pill-border:rgba(255,255,255,.10);
  --maint-divider:rgba(255,255,255,.12);
  --maint-control-bg:rgba(255,255,255,.08);
  --maint-control-bg-hover:rgba(255,255,255,.12);
  --maint-control-border:rgba(255,255,255,.14);
  --maint-drawer-bg:rgba(10,13,20,.92);
  --maint-overlay-bg:rgba(0,0,0,.35);
  --maint-lock-shadow:0 12px 40px rgba(0,0,0,.45);
  --maint-drawer-shadow:22px 0 60px rgba(0,0,0,.55);
  --maint-section-gap:var(--profile-gap);
  --maint-inline-offset:var(--control-pad-x);
  --maint-brand-sub-fs:var(--pill-fs);
  --tap-target:44px;
  --control-min-h:44px;
  --skip-link-offset:var(--space-3);
  --skip-link-pad-y:var(--space-2);
  --skip-link-pad-x:var(--space-4);
  --sr-only-size:1px;
  --disabled-opacity:.55;
  --account-finance-table-min:940px;
  --account-surface-bg:linear-gradient(180deg, rgba(255,255,255,.032), rgba(255,255,255,.016));
  --account-border:var(--component-border);
  --account-filter-gap:var(--space-3);
  --account-section-gap:var(--space-4);
  --account-action-min-h:36px;
  --hero-bg-start:var(--surface-deep);
  --hero-bg-end:var(--surface-editor);

  --profile-shell-pad-desktop:var(--pad-desktop);
  --profile-shell-pad-tablet:var(--pad-tablet);
  --profile-shell-pad-mobile:var(--pad-mobile);
  --profile-grid-max:none;
  --profile-side-width:340px;
  --profile-gap:18px;
  --profile-photo-size:260px;
  --profile-photo-radius:var(--component-radius-lg);
  --profile-photo-bg:var(--surface-muted);
  --profile-photo-border:var(--component-border);
  --profile-photo-shadow:var(--component-shadow-float);
  --profile-hero-glow-a:rgba(255,255,255,.06);
  --profile-hero-glow-b:rgba(255,255,255,.05);
  --profile-hero-glow-c:var(--surface-muted);
  --profile-divider:var(--component-border);
  --profile-progress-bg:rgba(0,0,0,.18);
  --profile-progress-fill:linear-gradient(90deg, var(--state-dot-ok), var(--state-dot-warn));
  --profile-kv-bg:rgba(0,0,0,.12);
  --profile-empty-border:var(--component-border);
  --profile-empty-bg:var(--profile-kv-bg);
  --profile-tag-fs:var(--fs-small);
  --profile-tag-pad-y:var(--space-1);
  --profile-tag-pad-x:var(--space-2);
  --profile-service-title-fs:var(--fs-small);
  --profile-service-title-gap:var(--space-2);
  --profile-service-list-gap:var(--space-2);
  --wbp-kv-key-fs:var(--fs-small);
  --wbp-kv-value-fs:var(--table-fs);
  --wbp-kv-key-gap:var(--space-1);
  --wbp-about-copy-fs:var(--wbp-kv-value-fs);
  --profile-ad-body-pad:var(--space-3);
  --profile-ad-placeholder:rgba(255,255,255,.60);
  --wbp-modal-backdrop:var(--overlay-bg);
  --wbp-modal-image-shadow:var(--shadow-modal);
  --wbp-modal-close-bg:rgba(0,0,0,.62);
  --wbp-action-box-bg:rgba(0,0,0,.08);


  /* Public marketplace / Auftrag surfaces */
  --marketplace-grid-gap:var(--space-3);
  --marketplace-card-radius:var(--component-radius);
  --marketplace-card-border:var(--component-border);
  --marketplace-card-bg-muted:var(--surface-muted);
  --marketplace-fact-bg:var(--surface-muted);
  --marketplace-fact-border:var(--component-border);
  --marketplace-thumb-radius:var(--component-radius-sm);
  --marketplace-gallery-radius:var(--component-radius-lg);
  --marketplace-gallery-border:var(--component-border);
  --marketplace-gallery-bg:var(--surface-muted);
  --marketplace-gallery-active-border:var(--nav-accent-line);
  --marketplace-lightbox-bg:rgba(20,20,20,.72);
  --marketplace-lightbox-border:rgba(255,255,255,.18);
  --marketplace-lightbox-muted:rgba(255,255,255,.76);
  --marketplace-overlay-image-bg:rgba(0,0,0,.20);

  /* Admin surface */
  --admin-menu-hover-bg:var(--editor-surface-muted);
  --admin-panel-padding:var(--space-4);
  --admin-filter-gap:var(--space-3);
  --admin-filter-label-fs:13px;

  --admin-editorbar-gap:var(--space-2);
  --admin-editorbar-margin-bottom:var(--space-4);
  --admin-editorbar-padding:var(--space-3);
  --admin-editorbar-btn-min-h:var(--control-min-h);
  --admin-report-table-min:1120px;
  --admin-report-detail-table-min:1220px;
  --admin-confirm-bg:var(--surface-soft);
  --admin-confirm-border:var(--component-border);
  --admin-confirm-danger-bg:var(--danger-soft);
  --admin-confirm-danger-border:var(--danger-line);
  --admin-code-bg:var(--surface-soft);
  --admin-code-border:var(--line);
  --finance-surface-bg:var(--surface-soft);
  --finance-surface-bg-strong:var(--panel2);
  --finance-border:var(--component-border);
  --finance-danger-bg:var(--danger-soft);
  --finance-danger-border:var(--danger-line);
  --finance-total-divider:var(--line);
  --finance-action-radius:var(--component-radius);
  --finance-action-padding:var(--space-3);
  --finance-doc-table-min:920px;
  --invoice-box-padding:var(--space-4);
  --invoice-grid-gap:var(--space-4);
  --invoice-logo-max-h:46px;

  /* Shared layout shell */
  --shell-header-bg:var(--panel);
  --shell-topbar-bg:var(--panel2);
  --shell-footer-bg:var(--bg2);
  --shell-footer-link:rgba(255,255,255,.78);
  --shell-footer-copy:rgba(255,255,255,.55);
  --shell-drawer-item-bg:var(--surface-muted);
  --shell-drawer-hover-border:var(--nav-accent-line);
  --shell-burger-shadow:var(--shadow-float);
  --shell-modal-divider:var(--component-border);

  /* Canonical horizontal navigation */
  --nav-gap:var(--space-2);
  --nav-item-min-h:42px;
  --nav-item-pad-y:10px;
  --nav-item-pad-x:12px;
  --nav-item-radius:var(--component-radius-sm);
  --nav-item-fg:var(--text-soft);
  --nav-item-fg-hover:var(--text);
  --nav-item-bg:transparent;
  --nav-item-bg-hover:var(--surface-muted);
  --nav-item-bg-active:var(--accent-soft);
  --nav-item-border:transparent;
  --nav-item-border-hover:var(--component-border);
  --nav-item-border-active:var(--nav-accent-line);
  --nav-item-active-shadow:inset 0 calc(-1 * var(--border-w) * 2) 0 var(--nav-accent-line);
  --nav-item-font-size:var(--fs-small);
  --nav-item-font-weight:700;
  --nav-item-letter-spacing:.01em;
  --nav-dropdown-bg:var(--surface-1);
  --nav-dropdown-border:var(--component-border);
  --nav-dropdown-shadow:var(--component-shadow-float);
  --nav-dropdown-min:240px;
  --nav-dropdown-max:320px;
  --nav-dropdown-offset:var(--space-3);
  --nav-dropdown-item-min-h:var(--tap-target);
  --nav-dropdown-item-pad-y:var(--space-2);
  --nav-caret-font-size:var(--fs-small);
  --brand-gap:var(--space-1);
  --brand-logo-max-h:80px;
  --topbar-notif-size:var(--tap-target);
  --home-mobile-cta-min-h:var(--tap-target);
  --home-mobile-title-size:clamp(32px,10.5vw,44px);
  --home-mobile-sub-size:var(--fs-body);
  --home-section-head-mobile-mb:var(--space-4);
  --home-mobile-service-card-min-h:176px;
  --home-mobile-service-card-min-h-compact:166px;
  --home-mobile-service-icon-size:46px;
  --home-mobile-service-icon-font-size:23px;
  --home-mobile-service-title-size:19px;
  --home-mobile-kpi-gap:var(--space-1);
  --kpi-row-pad-y:var(--space-2);

  /* Canonical shared navigation/shell measurements */
  --shell-header-gap:var(--space-4);
  --shell-header-pad-y:14px;
  --shell-topbar-pad-y:8px;
  --shell-topbar-actions-gap:var(--space-3);
  --shell-drawer-panel-pad-y:var(--space-4);
  --shell-drawer-head-pad-y:0;
  --shell-drawer-head-pad-x:var(--pad-mobile);
  --shell-drawer-head-pad-bottom:var(--space-3);
  --shell-drawer-sub-pad-left:var(--space-3);
  --shell-drawer-sub-item-pad-y:var(--space-3);
  --shell-drawer-sub-item-pad-x:var(--space-3);
  --shell-drawer-sep-margin-y:var(--space-2);
  --shell-drawer-close-font-size:var(--fs-body);
  --shell-drawer-close-pad-y:var(--space-2);
  --shell-drawer-close-pad-x:var(--space-3);
  --shell-drawer-close-gap:var(--space-2);
  --shell-burger-icon-gap:var(--space-1);
  --shell-burger-icon-width:18px;
  --shell-burger-icon-height:2px;
  --shell-burger-icon-radius:var(--radius-pill);
  --topbar-button-font-size:var(--fs-small);
  --modal-close-color:var(--muted);
  --modal-close-hover-bg:var(--surface-muted);
  --modal-body-color:var(--text);
  --modal-body-fs:15px;
  --modal-header-gap:var(--space-3);
  --modal-footer-gap:var(--space-3);
  --modal-pad-y:18px;
  --modal-pad-x:20px;
  --lightbox-pad-desktop:18px;
  --lightbox-pad-tablet:14px;
  --lightbox-pad-mobile:10px;
  --home-photo-overlay-soft-left:rgba(2,8,14,.42);
  --home-photo-overlay-soft-mid:rgba(2,8,14,.12);
  --home-photo-overlay-soft-right:rgba(2,8,14,.30);
  --home-hero-text-muted:rgba(255,255,255,.88);
  --home-hero-text-subtle:rgba(255,255,255,.78);
  --home-hero-card-border:rgba(255,255,255,.14);
  --home-hero-badge-bg:rgba(2,14,25,.62);
  --home-hero-icon-border:rgba(255,255,255,.28);
  --home-hero-icon-bg:rgba(0,0,0,.28);
  --home-hero-icon-shadow:0 12px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10);
  --home-hero-copy-shadow:0 2px 18px rgba(0,0,0,.55);
  --home-icon-accent-border:rgba(255,130,2,.55);
  --home-icon-accent-bg:var(--accent-soft);
  --home-check-accent-border:rgba(255,130,2,.45);
  --home-check-accent-bg:var(--accent-soft);

  /* Canonical component tokens */
  --surface-1:var(--panel);
  --surface-2:var(--panel2);
  --surface-muted:rgba(255,255,255,.03);
  --component-border:var(--line);
  --component-border-strong:var(--btn-hover-border);
  --component-radius:var(--radius);
  --component-radius-sm:var(--radius-sm);
  --component-radius-lg:var(--radius-lg);
  --component-radius-xl:calc(var(--radius-lg) + 10px);
  --component-shadow:none;
  --component-shadow-float:var(--shadow-float);
  --focus-color:var(--wb-blue-2);
  --focus-shadow:0 0 0 var(--focus-ring) rgba(31,109,156,.30);
  --control-radius:var(--component-radius);
  --control-pad-y:10px;
  --control-pad-x:14px;
  --card-header-gap:var(--space-3);
  --card-header-left-gap:var(--space-1);
  --card-pad-x:var(--space-4);
  --card-mobile-radius:var(--component-radius-sm);
  --card-order-init-mobile-pad:var(--space-5);
  --contact-card-head-gap:var(--space-1-5);
  --contact-card-head-mb:var(--space-half);
  --cookie-banner-pad:var(--space-3);
  --cookie-banner-pad-x:var(--space-4);
  --cms-panel-pad:var(--space-3);
  --cms-advanced-summary-pad-x:var(--control-pad-x);
  --section-head-mb:var(--space-4);
  --form-row-gap:var(--space-form);
  --form-actions-gap:var(--space-3);
  --form-actions-margin-top:var(--space-2);
  --form-label-color:var(--label-muted-fg);
  --form-label-weight:700;
  --form-label-gap:var(--space-1-5);
  --form-help-fs:var(--fs-4);
  --form-control-transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
  --profile-progress-fs:var(--form-help-fs);
  --lightbox-count-fs:var(--form-help-fs);
  --order-meta-fs:var(--form-help-fs);
  --maint-drawer-text-fs:var(--form-help-fs);
  --form-textarea-min-h:140px;
  --upload-field-gap:var(--form-label-gap);
  --upload-file-min-h:46px;
  --admin-email-check-min-h:36px;
  --admin-email-check-pad-y:6px;
  --admin-email-check-pad-x:var(--space-2);
  --form-filter-gap:var(--space-3);
  --form-filter-control-min:160px;
  --form-filter-control-max:220px;
  --form-filter-control-h:42px;
  --form-filter-control-pad-x:var(--space-3);
  --form-filter-label-fs:13px;
  --filterbar-label-fs:12px;
  --filterbar-label-gap:6px;
  --form-filter-date-min:150px;
  --form-filter-date-max:190px;
  --table-sticky-bg:var(--surface-1);
  --modal-viewport-gap:var(--space-3);
  --overlay-bg:rgba(0,0,0,.68);
  --overlay-blur:6px;

  /* Breakpoints */
  --bp-mobile:740px;
  --bp-tablet:980px;
  --bp-desktop:1180px;

  /* Typography rhythm */
  --letter-tight:-.02em;

  /* Z-index scale */
  --z-below:-1;
  --z-header:50;
  --z-popover:60;
  --z-overlay-local:20;
  --z-overlay-raised:30;
  --z-dropdown:200;
  --z-drawer:600;
  --z-modal:1000;
  --z-lightbox:1050;
  --z-toast:1100;
  /* Single-truth residual visual tokens */
  --body-ambient-accent:rgba(255,130,2,.08);
  --body-ambient-light:rgba(255,255,255,.05);
  --tag-border:var(--component-border);
  --tag-bg:var(--surface-soft);
  --auftrag-card-hover-bg:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  --wizard-step-current-bg:var(--accent-soft);
  --wizard-step-current-border:var(--nav-focus-line);
  --wizard-step-gap:var(--space-2);
  --wizard-step-pad-y:var(--space-2);
  --wizard-step-pad-x:var(--space-2);
  --wizard-step-fs:var(--form-help-fs);
  --wizard-step-mobile-fs:var(--profile-tag-fs);
  --wizard-step-mobile-pad-y:7px;
  --wizard-step-mobile-pad-x:9px;
  --wizard-photo-primary-gap-bottom:var(--space-2);
  --wizard-step3-gap:var(--space-4);
  --wizard-page-min-h:calc(100vh - 120px);
  --cms-cta-bg:linear-gradient(135deg,color-mix(in srgb, var(--link) 24%, transparent),var(--surface-soft));
  --table-scroll-fade:linear-gradient(90deg, transparent, var(--surface-1));


  /* Homepage scoped premium tokens (centralized from former local :root blocks) */
  --home-page-ambient-left: rgba(255,130,2,.075);
  --home-page-ambient-right: rgba(64,147,201,.070);
  --home-page-ambient-wash: rgba(255,255,255,.050);
  --home-section-surface-glow-left: rgba(255,130,2,.105);
  --home-section-surface-glow-right: rgba(64,147,201,.105);
  --home-section-surface-glass-top: rgba(255,255,255,.082);
  --home-section-surface-glass-bottom: rgba(255,255,255,.040);
  --home-section-surface-border: rgba(255,255,255,.20);
  --home-section-surface-shadow: 0 22px 62px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.075);
  --home-section-overlay-glow:rgba(255,255,255,.075);
  --home-hero-panel-bg: color-mix(in srgb, var(--surface) 72%, transparent);
  --home-hero-panel-border: color-mix(in srgb, var(--line) 62%, rgba(255,255,255,.22));
  --home-hero-sub-color: rgba(255,255,255,.90);
  --home-hero-card-copy-color: rgba(255,255,255,.91);
  --home-hero-card-copy-shadow: 0 2px 16px rgba(0,0,0,.48);
  --home-premium-glow: color-mix(in srgb, var(--link) 28%, transparent);
  --home-soft-glow: color-mix(in srgb, var(--accent) 18%, transparent);
  --home-photo-top-shade: rgba(5,10,16,.02);
  --home-photo-mid-shade: rgba(5,10,16,.18);
  --home-photo-bottom-shade: rgba(5,10,16,.36);
  --home-section-hairline: rgba(255,255,255,.12);
  --home-hero-panel-glass-top: rgba(255,255,255,.105);
  --home-hero-panel-glass-bottom: rgba(255,255,255,.045);
  --home-hero-panel-shadow: 0 34px 100px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12);
  --home-hero-panel-shadow-mobile: 0 22px 62px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.11);
  --home-hero-panel-sheen-left: rgba(255,255,255,.18);
  --home-hero-panel-sheen-right: rgba(255,130,2,.12);
  --home-photo-card-shadow: 0 18px 48px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.14);
  --home-photo-card-shadow-hover: 0 24px 64px rgba(0,0,0,.34), 0 0 0 1px rgba(255,130,2,.12) inset;
  --home-photo-card-border-hover: rgba(255,255,255,.24);
  --home-hero-shell-border: rgba(255,255,255,.10);
  --home-hero-shell-shadow: 0 34px 86px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
  --home-hero-badge-line: rgba(255,255,255,.22);
  --home-hero-badge-highlight: rgba(255,255,255,.06);
  --home-hero-service-icon-bg: rgba(255,255,255,.14);
  --home-hero-service-icon-line: rgba(255,255,255,.34);
  --home-hero-panel-glass-blur: blur(12px);
  --home-search-surface: color-mix(in srgb, var(--panel) 62%, transparent);
  --home-search-line: rgba(255,255,255,.17);
  --home-search-input-bg: rgba(255,255,255,.105);
  --home-search-input-bg-focus: rgba(255,255,255,.145);
  --home-search-glass-top: rgba(255,255,255,.072);
  --home-search-glass-bottom: rgba(255,255,255,.032);
  --home-search-shadow: 0 18px 46px rgba(0,0,0,.22);
  --home-search-inner-line: rgba(255,255,255,.10);
  --home-hero-badge-shadow:inset 0 1px 0 var(--home-hero-badge-highlight);
  --home-search-glass-shadow:var(--home-search-shadow), inset 0 1px 0 var(--home-search-inner-line);
  --home-search-input-shadow:inset 0 1px 0 var(--home-search-input-inner-line);
  --home-search-input-focus-shadow:0 0 0 var(--focus-ring) color-mix(in srgb, var(--link) 42%, transparent), inset 0 1px 0 var(--home-search-inner-line);
  --home-search-input-inner-line: rgba(255,255,255,.08);
  --home-search-placeholder: rgba(255,255,255,.68);
  --home-search-max:780px;
  --home-lower-card-bg: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.046));
  --home-lower-card-bg-hover: linear-gradient(180deg, rgba(255,255,255,.118), rgba(255,255,255,.056));
  --home-lower-card-line: rgba(255,255,255,.145);
  --home-lower-card-line-hover: rgba(255,255,255,.215);
  --home-lower-card-shadow: 0 20px 54px rgba(0,0,0,.255), inset 0 1px 0 rgba(255,255,255,.095);
  --home-lower-card-shadow-hover: 0 28px 72px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.13);
  --home-lower-row-line: rgba(255,255,255,.082);
  --home-faq-summary-focus-shadow:0 0 0 var(--focus-ring) var(--focus-color), inset 0 -1px 0 var(--home-lower-row-line);
  --home-kpi-glow: rgba(255,130,2,.12);
  --home-kpi-glass-top: rgba(255,255,255,.090);
  --home-kpi-glass-bottom: rgba(255,255,255,.045);
  --home-kpi-row-pad-y: 11px;
  --home-faq-toggle-bg: rgba(255,255,255,.070);
  --home-faq-toggle-line: rgba(255,255,255,.12);
  --home-lower-copy: rgba(255,255,255,.82);
  --home-lower-icon-bg: rgba(255,130,2,.18);
  --home-lower-icon-line: rgba(255,130,2,.62);
  --home-lower-icon-glow: rgba(255,130,2,.14);
  --home-lower-icon-shadow: 0 12px 30px rgba(0,0,0,.18), 0 0 26px var(--home-lower-icon-glow);
  --home-copy-max: 68ch;
  --home-narrow-copy-max: 58ch;
  --home-faq-icon-size-xs:26px;
  --home-hero-overlay-left:rgba(2,7,13,.10);
  --home-hero-overlay-right:rgba(2,7,13,.34);
  --home-photo-highlight-top:rgba(255,255,255,.13);
  --home-photo-highlight-bottom:rgba(0,0,0,.04);
  --home-photo-inner-line:rgba(255,255,255,.09);
  --home-photo-overlay-shadow:inset 0 0 0 1px var(--home-photo-inner-line), inset 0 -72px 108px var(--home-photo-bottom-depth);
  --home-photo-bottom-depth:rgba(0,0,0,.12);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  width:100%;
}

/* Extra safety net: prevent accidental horizontal overflow from long tokens/URLs */
main, .page{max-width:100%;}
*{min-width:0;}

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

a:hover{color:var(--link-hover);text-decoration:underline}
hr{border:0;border-top:var(--border-w) solid var(--hr-border);margin:var(--space-5) 0}

h1,h2,h3,h4{margin:0 0 var(--space-2)}
h1{font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:700}
h2{font-size:var(--fs-h2);line-height:var(--lh-heading);font-weight:700}
h3{font-size:var(--fs-h3);line-height:var(--lh-heading);font-weight:700}
.small{font-size:var(--fs-small)}
.muted{color:var(--muted)}

/* Container */
.wrap, .container{
  width:100%;
  /* Enterprise: no max-width caps (desktop gutters controlled by --pad-desktop) */
  max-width:none;
  margin:0 auto;
  padding-left:var(--pad-desktop);
  padding-right:var(--pad-desktop);
}

/* Verhindert doppelte Seitenränder; Home nutzt eigene section wrappers. */
/* =========================================================
   Globales Page-/Section-Pattern
   - Einheitliche Abstände oben/unten
   - Einheitliche Header-/Card-/Form-Abstände
   ========================================================= */
.page{
  padding-top:var(--space-section);
  padding-bottom:56px;
}

/* Standard: erste Überschrift bekommt konsistente Abstände */
.page h1:first-child,
.page .h1:first-child{
  margin-top:0;
  margin-bottom:var(--space-6);
}

/* Standard-Sektionen innerhalb normaler Seiten */
.page section,
.page .section{
  margin-top:var(--space-section);
  margin-bottom:var(--space-section);
}


/* Form-Pattern */
.form,
form{
  margin:0;
}

fieldset{
  min-width:0;
  margin:0 0 var(--space-4);
  padding:var(--space-4);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius);
  background:var(--surface-muted);
}
legend{
  padding:0 var(--space-2);
  color:var(--text);
  font-weight:800;
}

/* Page-Header-Bar (optional in Views) */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-section)}
.page-head-left{min-width:0}
.page-head h1,.page-head .h1{margin:0}
.page-sub{margin:var(--space-2) 0 0;color:var(--muted)}
@media (max-width:740px){
  .page-head{flex-direction:column}
}

tr:nth-child(even) td{background:var(--table-row-stripe-bg)}
@media (max-width:980px){
  .wrap, .container{padding-left:var(--pad-tablet);padding-right:var(--pad-tablet)}
}
@media (max-width:740px){
  .wrap, .container{padding-left:var(--pad-mobile);padding-right:var(--pad-mobile)}
}


/* Simple grid helper */
.form-grid{display:grid;}

button{font-family:inherit}
label{display:block;margin:0 0 var(--space-2);color:var(--form-label-color);font-weight:var(--form-label-weight)}


/* =========================================================
   Header / Navigation
   Canonical topbar/header/nav/drawer rules live later in this file.
   Early duplicate navigation block was removed to avoid conflicting cascade.
   ========================================================= */

/* =========================================================
   Layout helpers
   ========================================================= */
main.wrap{padding-top:var(--space-6);padding-bottom:var(--space-7)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
@media (max-width:900px){.grid2{grid-template-columns:1fr}}

.right{margin-left:auto;display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* If something doesn't fit: wrap, don't overflow */
.row, .bar, .cols{flex-wrap:wrap}

/* =========================================================
   Tables: canonical table typography/layout lives later in the design-system section.
   ========================================================= */
table a{color:var(--text);text-decoration:underline;text-decoration-color:var(--link-underline)}
table a:hover{text-decoration-color:var(--accent)}


/* =========================================================
   CMS editor and other existing components (kept compatible)
   ========================================================= */
/* Keep existing CMS rules but harmonize variables */
.cms-wrap{max-width:none;width:100%;margin:0 auto;padding:var(--space-2) 0 var(--space-6)}
.cms-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.cms-title{margin:0}
.cms-content{width:100%;max-width:100%;margin:0 auto}
.cms-editor{width:100%;max-width:100%;margin:var(--space-4) auto 0}
.cms-edit-toggle{white-space:nowrap;margin-left:auto}

.cms-tabs{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0 var(--space-3)}
.cms-tab{border:var(--border-w) solid var(--editor-border);background:var(--editor-surface-muted);color:var(--text-soft);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-3);cursor:pointer}
.cms-tab.is-active{background:var(--editor-active-bg);border-color:var(--editor-active-border)}

.cms-toolbar{
  display:flex;
  gap:var(--form-filter-gap);
  flex-wrap:wrap;         /* no horizontal scrolling; wrap like a real editor toolbar */
  overflow:visible;
  margin-bottom:var(--space-3);
  padding:var(--space-3);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface-deep),var(--surface-deeper));
  border:var(--border-w) solid var(--editor-border-strong);
  box-shadow:var(--editor-toolbar-shadow)
}
.cms-toolbar::-webkit-scrollbar{display:none}
.cms-toolgroup{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;flex:0 0 auto;
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--editor-group-bg);
  border:var(--border-w) solid var(--editor-border)}
.cms-toolgroup.cms-colors{gap:var(--space-3);align-items:center}
.cms-colorblock{position:relative;display:flex;flex-direction:column;gap:var(--space-2)}
.cms-colorhead{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.cms-colorbtn{font-weight:900}
.cms-palette{display:grid;grid-template-columns:repeat(10, var(--editor-swatch-size));gap:var(--editor-swatch-gap);align-items:center;
  position:absolute;left:0;top:calc(100% + var(--nav-dropdown-offset));z-index:var(--z-popover);
  padding:var(--space-3);border-radius:var(--radius);background:var(--editor-popover-bg);
  border:var(--border-w) solid var(--editor-border);
  box-shadow:var(--editor-popover-shadow)}
.cms-palette[hidden]{display:none}
@media(max-width:520px){.cms-palette{grid-template-columns:repeat(8, var(--editor-swatch-size))}}
.cms-tool{appearance:none;border:var(--border-w) solid var(--editor-border);background:var(--editor-surface-muted);color:var(--text);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-2);font-weight:700}
.cms-tool.is-active{background:var(--editor-active-bg);border-color:var(--editor-active-border);
  box-shadow:var(--editor-active-shadow)}
.cms-tool:active{transform:translateY(1px)}
.cms-tool:hover{background:var(--editor-hover-bg)}
.cms-tool:disabled{opacity:.45;cursor:not-allowed}
.cms-select{border:var(--border-w) solid var(--editor-border);background:var(--editor-surface-muted);color:var(--text);
  padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);min-width:150px;
  width:auto;max-width:220px}

/* The global rule makes all <select> 100% wide; override inside the toolbar so it stays horizontal. */
.cms-toolbar select{width:auto}

/* Alignment icons (simple “editor-like” glyphs) */
.cms-ico{display:inline-block;width:18px;height:12px;border-radius:var(--cms-icon-radius);
  background-image:linear-gradient(var(--text),var(--text)),linear-gradient(var(--text),var(--text)),linear-gradient(var(--text),var(--text));
  background-repeat:no-repeat;background-size:100% 2px,80% 2px,60% 2px;
  background-position:left 0, left 5px, left 10px;
  opacity:.92}
.cms-ico.ico-center{background-position:center 0, center 5px, center 10px}
.cms-ico.ico-right{background-position:right 0, right 5px, right 10px}
.cms-color{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--maint-pill-pad-y) var(--maint-pill-pad-x);border-radius:var(--radius-sm);
  border:var(--border-w) solid var(--editor-border);background:var(--editor-surface-muted);cursor:pointer}
.cms-color span{font-weight:800;color:var(--editor-swatch-label)}
.cms-color input[type=color]{width:30px;height:30px;border:0;background:transparent;padding:0;cursor:pointer}
.cms-swatch{width:22px;height:22px;border-radius:var(--radius-sm);border:var(--border-w) solid var(--editor-swatch-border);cursor:pointer;box-shadow:var(--editor-swatch-shadow);background:var(--cms-swatch-preview, var(--surface))}
.cms-swatch:hover{transform:translateY(-1px)}
.cms-visual{min-height:320px;border:var(--border-w) solid var(--editor-border);background:var(--editor-surface);border-radius:var(--radius);padding:var(--cms-visual-pad);outline:none;
  box-shadow:var(--editor-canvas-shadow)}

/* CMS Modals */
.cms-modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--modal-viewport-gap);box-sizing:border-box}
.cms-modal[hidden]{display:none}
.cms-modal__overlay{position:absolute;inset:0;background:var(--overlay-bg);backdrop-filter:blur(var(--overlay-blur))}
.cms-modal__panel{position:relative;max-width:520px;width:100%;background:var(--surface-1);
  border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius-lg);padding:var(--cms-modal-panel-pad);box-shadow:var(--shadow-modal);overflow:auto;-webkit-overflow-scrolling:touch}
.cms-modal__title{font:600 20px/1.2 'PT Serif',serif;margin:0 0 var(--space-2)}
.cms-modal__actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-3);flex-wrap:wrap}
/* CMS themed dropdowns generated by cms_page.php */
.cms-dd{position:relative;display:inline-flex;min-width:0}
.cms-dd__btn{appearance:none;border:var(--border-w) solid var(--editor-border);background:var(--editor-surface-muted);color:var(--text);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);min-width:150px;max-width:220px;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--cms-dd-gap);cursor:pointer;font-weight:700}
.cms-dd__btn[aria-expanded="true"]{border-color:var(--editor-focus-border);box-shadow:var(--editor-focus-shadow)}
.cms-dd__btn--110{min-width:110px}
.cms-dd__btn--160{min-width:160px}
.cms-dd__btn--180{min-width:180px}
.cms-dd__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cms-dd__caret::before{content:'▾';opacity:.8;font-size:var(--cms-dd-caret-size)}
.cms-dd__panel{position:absolute;left:0;top:calc(100% + var(--cms-dd-panel-offset));z-index:var(--z-dropdown);min-width:100%;max-width:min(280px, calc(100vw - (var(--pad-mobile) * 2)));max-height:260px;overflow-y:auto;padding:var(--cms-dd-panel-pad);border-radius:var(--component-radius);background:var(--surface-1);border:var(--border-w) solid var(--component-border);box-shadow:var(--component-shadow-float)}
.cms-dd__panel[hidden]{display:none}
.cms-dd__opt{display:block;width:100%;appearance:none;border:0;background:transparent;color:var(--text);text-align:left;padding:var(--cms-dd-option-pad-y) var(--cms-dd-option-pad-x);border-radius:var(--radius-sm);cursor:pointer;font-weight:700}
.cms-dd__opt:hover,.cms-dd__opt:focus{background:var(--editor-hover-bg);outline:none}
@media(max-width:520px){.cms-dd{width:100%}.cms-dd__btn{width:100%;max-width:none}.cms-dd__panel{max-width:100%;width:100%}}
.cms-visual:focus{border-color:var(--editor-focus-border);box-shadow:var(--editor-focus-shadow)}

.cms-advanced{margin-top:var(--cms-advanced-gap)}
.cms-advanced summary{cursor:pointer;list-style:none;padding:var(--space-3) var(--cms-advanced-summary-pad-x);border-radius:var(--radius);
  border:var(--border-w) solid var(--editor-border-strong);
  background:linear-gradient(180deg, var(--warning-soft), var(--surface-deeper));
  display:flex;align-items:center;justify-content:space-between;gap:var(--cms-advanced-gap);
  box-shadow:var(--editor-advanced-shadow)}
.cms-adv-title{font-weight:900;color:var(--text)}
.cms-advanced summary b{color:var(--text)}
.cms-advanced summary::-webkit-details-marker{display:none}
.cms-optional{color:var(--text);font-weight:700;background:var(--warning-soft);
  border:var(--border-w) solid var(--warning-line);padding:var(--pill-compact-pad-y) var(--pill-compact-pad-x);border-radius:var(--radius-pill)}
.cms-advanced-grid{display:grid;grid-template-columns:1fr;gap:var(--cms-advanced-gap);margin-top:var(--cms-advanced-gap)}
@media(min-width:860px){.cms-advanced-grid{grid-template-columns:1fr 1fr}}
/* Admin editorbar layout is defined in the admin surface section below. */
@media(min-width:860px){.nav{display:flex}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}


/* Make select/date inputs readable on dark UI in all browsers */
select, input[type="date"], input[type="datetime-local"], input[type="time"]{color-scheme:dark}

/* Ensure tables have a non-transparent background */
.admin-table, table.admin-table, .admin-table-wrap table{background:var(--card)}

/* Provide consistent grid spacing (e.g. account login/register blocks) */
.grid, .grid2, .cols{gap:var(--space-6)}
.hr{height:var(--border-w);background:var(--hr-border);margin:var(--space-4) 0}


/* A5.1 Home */
.section{padding:var(--section-pad-y) 0}
.section-alt{background:var(--surface-muted);border-top:var(--border-w) solid var(--line);border-bottom:var(--border-w) solid var(--line)}
.section-head{margin-bottom:var(--section-head-mb)}
/* Home hero visual service card primitives. Layout/spacing is defined once in the later body.home hero contract. */
body.home .hero-search{margin-top:var(--space-3)}
body.home .hero-service-stack{display:grid;min-width:0;gap:var(--home-hero-card-gap)}
body.home .hero-service-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--component-radius-lg);
  border:var(--border-w) solid var(--home-hero-card-border);
  background:var(--hero-bg-start) center/cover no-repeat;
  display:flex;
  align-items:flex-end;
  gap:var(--space-5);
  padding:var(--space-6);
}
body.home .hero-service-card:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-below);
}
body.home .hero-service-card:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:var(--z-below);
  pointer-events:none;
}
body.home .hero-service-card-renovation{background-image:url('img/hero-renovieren-modernisieren.jpg')}
body.home .hero-service-card-bathroom{background-image:url('img/hero-sanitaer-heizung.jpg')}
body.home .hero-service-card-building{background-image:url('img/hero-bauen-gestalten.jpg')}
body.home .hero-service-icon{
  flex:0 0 auto;
  width:58px;
  height:58px;
  border-radius:var(--component-radius);
  display:flex;
  align-items:center;
  justify-content:center;
  border:var(--border-w) solid var(--home-hero-icon-border);
  background:var(--home-hero-icon-bg);
  color:var(--text);
  font-size:30px;
  line-height:1;
  box-shadow:var(--home-hero-icon-shadow);
}
body.home .hero-service-copy{min-width:0;max-width:420px;text-shadow:var(--home-hero-copy-shadow)}
body.home .hero-service-copy h2{margin:0 0 6px;font:800 24px/1.15 var(--font-sans);letter-spacing:-.02em;color:var(--text)}
body.home .hero-service-copy p{margin:0;color:var(--home-hero-text-muted);font-size:16px;line-height:1.45}
body.home .feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--home-feature-grid-gap);margin-top:var(--home-feature-grid-gap-top)}
body.home .feature-card{background:var(--surface-1);border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius);box-shadow:var(--component-shadow);padding:var(--home-feature-card-pad);min-height:140px}
body.home .icon-ring{width:54px;height:54px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;
  border:var(--border-w) solid var(--home-icon-accent-border);color:var(--accent);background:var(--home-icon-accent-bg);font-weight:700;margin-bottom:var(--home-icon-ring-gap)}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2)}
.checklist .check{display:inline-flex;width:22px;height:22px;border-radius:var(--radius-pill);align-items:center;justify-content:center;
  background:var(--home-check-accent-bg);border:var(--border-w) solid var(--home-check-accent-border);color:var(--accent);margin-right:var(--space-2)}
.pill{display:inline-flex;align-items:center;max-width:100%;padding:var(--pill-pad-y) var(--pill-pad-x);border-radius:var(--radius-pill);border:var(--border-w) solid var(--line);
  background:var(--panel2);font-size:var(--pill-fs);color:var(--muted)}
.pill strong{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpi .kpi-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}
.kpi-row{display:flex;justify-content:space-between;gap:var(--space-2);padding:var(--kpi-row-pad-y) 0}
.bullets{margin:var(--space-2) 0 0 var(--home-bullets-indent);color:var(--home-hero-text-subtle)}
body.home .faq{max-width:100%;margin:var(--home-faq-gap-top) auto 0;display:grid;gap:var(--space-2)}
body.home .faq-item{background:var(--surface-1);border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius);box-shadow:var(--component-shadow);padding:var(--home-faq-item-pad-y) var(--home-faq-item-pad-x)}
body.home .faq-item summary{cursor:pointer;font-weight:700}
body.home .faq-item summary::-webkit-details-marker{display:none}
body.home .faq-item summary:after{content:"+";float:right;color:var(--muted)}
body.home .faq-item[open] summary:after{content:"–"}
body.home .center-cta{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:var(--home-section-gap)}

@media(max-width:980px){
  body.home .feature-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  body.home .feature-grid{grid-template-columns:1fr}
}

/* Forms */
.label{display:block;margin:0 0 var(--space-2);color:var(--form-label-color);font-weight:var(--form-label-weight)}

/* Dienstleistungen */
.service-card{display:block;text-decoration:none;padding:var(--service-card-pad);transition:transform .12s ease, background .12s ease}
.service-card:hover{transform:translateY(-2px);background:var(--surface-muted)}
.service-title{font-weight:700}


/* Pagination */
.pager{display:flex;gap:var(--space-3);align-items:center;justify-content:center;margin-top:var(--space-4)}
.pager .dots{opacity:.6;padding:0 var(--space-1)}
.pager .perpage select{background:var(--input-bg);color:var(--text);border:var(--input-border-w) solid var(--input-border);padding:var(--input-padding-y) var(--input-padding-x);border-radius:var(--radius-input)}


/* Responsive wrap: handled by FINAL WRAP PADDING OVERRIDE */

/* Shared table/listing elevation is owned by the canonical table/listing layer below. */
header, .topbar{
  box-shadow:var(--shadow-panel);
}

/* Navigation visual states are defined once in the canonical navigation layer below. */
/* Dropdown polish: behavior hooks stay in layout JS, visual contract is canonical below. */
nav.nav .nav-dd-toggle,
.mobile-drawer .list button.has-sub{
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: left;
}
.cms-visual img{max-width:100%;height:auto;border-radius:var(--component-radius);border:var(--border-w) solid var(--component-border)}

.seo-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--component-radius-sm);background:var(--surface-muted);border:var(--border-w) solid var(--component-border)}
.seo-light{display:inline-block;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--muted);box-shadow:var(--seo-light-shadow)}
.seo-light.is-red{background:var(--seo-red)}
.seo-light.is-yellow{background:var(--seo-yellow)}
.seo-light.is-green{background:var(--seo-green)}
.seo-item .seo-label{font-size:var(--cms-seo-row-label-fs);font-weight:700}
.seo-item .seo-meta{font-size:var(--cms-seo-row-meta-fs);opacity:.85}


/* === SEO Assistant Pro (Yoast-like) === */
.cms-seo-wrap{margin:var(--space-3) 0 0;padding:var(--cms-panel-pad);border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius);background:var(--surface-muted)}
.cms-seo-top{display:grid;grid-template-columns:140px 1fr;gap:var(--space-3);align-items:stretch;margin-bottom:var(--space-3)}
@media(max-width:740px){.cms-seo-top{grid-template-columns:1fr}}
.cms-seo-score{padding:var(--space-3);border-radius:var(--component-radius-sm);background:var(--surface-muted);border:var(--border-w) solid var(--component-border);display:flex;flex-direction:column;justify-content:center}
.cms-seo-score__label{font-size:var(--cms-seo-score-label-fs);opacity:.85}
.cms-seo-score__value{font-size:20px;font-weight:900;letter-spacing:.2px;margin-top:2px}
.cms-seo-snippet{padding:var(--space-3);border-radius:var(--component-radius-sm);background:var(--surface-muted);border:var(--border-w) solid var(--component-border)}
.cms-seo-snippet__title{font-weight:800;font-size:var(--table-fs);color:var(--seo-title);margin-bottom:var(--space-1)}
.cms-seo-snippet__url{font-size:var(--cms-seo-small-fs);color:var(--seo-url);margin-bottom:var(--cms-seo-snippet-url-gap);word-break:break-all}
.cms-seo-snippet__desc{font-size:var(--cms-seo-small-fs);opacity:.9;line-height:1.35}
.cms-seo-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}
@media(max-width:980px){.cms-seo-cards{grid-template-columns:1fr}}
.cms-seo-card{padding:var(--space-3);border-radius:var(--component-radius-sm);background:var(--surface-muted);border:var(--border-w) solid var(--component-border)}
.cms-seo-card__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--cms-seo-card-head-gap-y)}
.cms-seo-card__title{font-weight:900}
.cms-seo-card__meta{font-size:var(--cms-seo-small-fs);opacity:.8}
.cms-seo-list{display:flex;flex-direction:column;gap:var(--cms-seo-list-gap)}
.cms-seo-linksdetails,.cms-seo-schemadetails{margin-top:var(--cms-seo-details-gap)}
.cms-seo-linksdetails>summary,.cms-seo-schemadetails>summary{cursor:pointer;font-weight:700;opacity:.9}
.cms-seo-linkslist{margin-top:var(--cms-seo-details-gap);border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius-sm);overflow:hidden}
.cms-seo-linkrow{display:grid;grid-template-columns:70px 160px 1fr;gap:var(--space-2);padding:var(--space-2);border-top:var(--border-w) solid var(--line)}
.cms-seo-linkrow:first-child{border-top:none}
@media(max-width:740px){.cms-seo-linkrow{grid-template-columns:70px 1fr}}
.cms-seo-badge{display:inline-flex;align-items:center;justify-content:center;font-size:var(--cms-seo-pill-fs);padding:var(--cms-seo-pill-pad-y) var(--cms-seo-pill-pad-x);border-radius:var(--radius-pill);background:var(--btn-secondary-bg);border:var(--btn-border-w) solid var(--btn-secondary-border)}
.cms-seo-linkanchor{font-size:var(--cms-seo-small-fs);font-weight:700;opacity:.95;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cms-seo-linkhref{font-size:var(--cms-seo-small-fs);opacity:.85;word-break:break-all}
.cms-seo-schemajson{min-height:160px;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:var(--cms-seo-small-fs);line-height:1.35}
.cms-seo-fields{margin-top:var(--space-3)}
.cms-seo-help{margin-top:var(--space-2);font-size:var(--cms-seo-small-fs);opacity:.85}
.req{color:var(--cta);font-weight:900}


/* --- SEO Pro: make traffic-lights + rows clearly readable (avoid text blending) --- */
.cms-seo-wrap .seo-item{align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--component-radius-sm);background:var(--surface-muted);border:var(--border-w) solid var(--component-border)}
.cms-seo-wrap .seo-item .seo-label{font-size:var(--cms-seo-row-label-fs);font-weight:800;letter-spacing:.1px}
.cms-seo-wrap .seo-item .seo-meta{font-size:var(--cms-seo-row-meta-fs);opacity:1;line-height:1.35;margin-top:2px}

.cms-seo-wrap .seo-light{display:inline-block;width:var(--cms-seo-light-size);height:var(--cms-seo-light-size);flex:0 0 var(--cms-seo-light-size);box-shadow:var(--seo-light-strong-shadow)}

.cms-seo-wrap .seo-item.is-green{border-color:var(--success-line);background:var(--success-soft)}
.cms-seo-wrap .seo-item.is-green .seo-meta{color:var(--seo-green)}

.cms-seo-wrap .seo-item.is-yellow{border-color:var(--warning-line);background:var(--warning-soft)}
.cms-seo-wrap .seo-item.is-yellow .seo-meta{color:var(--seo-yellow)}

.cms-seo-wrap .seo-item.is-red{border-color:var(--danger-line);background:var(--danger-soft)}
.cms-seo-wrap .seo-item.is-red .seo-meta{color:var(--seo-red-text)}

/* small "OK/Verbessern/Fehlt" pills inside messages */
.cms-seo-wrap .seo-meta .tag{display:inline-flex;align-items:center;justify-content:center;padding:var(--cms-seo-tag-pad-y) var(--cms-seo-tag-pad-x);border-radius:var(--radius-pill);font-size:var(--cms-seo-pill-fs);font-weight:800;margin-right:var(--cms-seo-tag-gap-x);border:var(--border-w) solid var(--tag-border);background:var(--tag-bg)}
.cms-seo-wrap .seo-item.is-green .seo-meta .tag{background:var(--success-soft);border-color:var(--success-line);color:var(--seo-green)}
.cms-seo-wrap .seo-item.is-yellow .seo-meta .tag{background:var(--warning-soft);border-color:var(--warning-line);color:var(--seo-yellow)}
.cms-seo-wrap .seo-item.is-red .seo-meta .tag{background:var(--danger-soft);border-color:var(--danger-line);color:var(--seo-red-text)}

/* --- AI modal (CMS) --- */
.cms-ai-modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--modal-viewport-gap);box-sizing:border-box}
.cms-ai-modal__backdrop{position:absolute;inset:0;background:var(--overlay-bg);backdrop-filter:blur(var(--overlay-blur))}
.cms-ai-modal__panel{position:relative;z-index:1;max-width:720px;width:min(100%, calc(100vw - (var(--modal-viewport-gap) * 2)));background:var(--surface-1);border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius-lg);box-shadow:var(--shadow-modal);padding:var(--cms-panel-pad);overflow:auto;-webkit-overflow-scrolling:touch}
.cms-ai-modal__head{font-weight:700;margin-bottom:10px}
.cms-ai-modal__body{display:flex;flex-direction:column;gap:var(--space-2);max-height:55vh;overflow:auto;overflow-wrap:anywhere;padding-right:4px}
.cms-ai-option{width:100%;text-align:left;background:var(--panel2);border:var(--border-w) solid var(--line);border-radius:var(--component-radius-sm);padding:var(--space-2) var(--space-3);cursor:pointer}
.cms-ai-option:hover{border-color:var(--component-border-strong)}
.cms-ai-modal__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-3)}


/* Filter rows: horizontal on desktop, wrap on smaller screens */
.filters-row{display:flex;align-items:center;flex-wrap:wrap}
@media (min-width: 900px){
  .filters-row{flex-wrap:nowrap}
  .filters-row .input{min-width:180px;width:100%}
}

/* Make filter selects consume the available space and keep the action button readable */
.filters-row select{flex:1 1 260px}
.filters-row .btn{flex:0 0 auto;min-width:120px;white-space:nowrap}


/* =========================================================
   FINAL OVERRIDE — project rules (no horizontal scroll)
   ========================================================= */
html, body{max-width:100%; overflow-x: clip;}
body{
  /* Smooth premium gradient background (no asphalt texture / no "waves") */
  background:
    radial-gradient(1200px 700px at 18% 8%, var(--body-ambient-accent), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, var(--body-ambient-light), transparent 65%),
    linear-gradient(180deg, var(--bg) 0%, var(--surface-deeper) 100%);
  background-attachment: fixed;
}
body::before{
  /* remove dotted overlay texture */
  content:none;
}
body > *{position:relative; z-index:1;}

img, video, canvas, svg{max-width:100%; height:auto;}
pre, code{max-width:100%; overflow:auto;}
a, td, th{overflow-wrap:anywhere; word-break:break-word;}
button, .btn, input[type=submit], input[type=button], input[type=reset]{white-space:nowrap;}

/* Inputs are defined once in the canonical form-control layer below. */

/* =========================================================
   TOPBAR + HEADER + DESKTOP-NAV
   - Fix: konsistente Seitenränder (Desktop 40 / Tablet 20 / Mobile 16 via .wrap)
   - Fix: Topbar-Buttons rechts ausrichten
   - Fix: Buttons follow canonical primary/secondary tokens
   - Fix: Desktop-Menü ohne "Glow-Rahmen" – nur Text + Unterstreichung
   - Fix: Dropdowns mit solidem Hintergrund, nur EIN Dropdown gleichzeitig
   ========================================================= */
.topbar{
  background:var(--shell-topbar-bg);
  border-bottom:var(--border-w) solid var(--line);
  background-image:var(--header-bg-img, none);
  background-size:cover;
  background-position:center;
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-4);
  /* IMPORTANT: keep global .wrap left/right padding (40/20/16). */
  padding-top:var(--shell-topbar-pad-y);
  padding-bottom:var(--shell-topbar-pad-y);
}
.topbar-actions{
  display:flex;
  gap:var(--shell-topbar-actions-gap);
  align-items:center;
}
.topbar .btn,
.topbar button.btn,
.topbar input.btn[type=submit]{
  font-size:var(--topbar-button-font-size);
  line-height:1;
}
/* Header */
header.top{
  background:var(--shell-header-bg);
  border-bottom:var(--border-w) solid var(--line);
  position:sticky;
  top:0;
  z-index:var(--z-header);
}
header.top .bar{
  display:flex;
  align-items:center;
  gap:var(--shell-header-gap);
  min-height:var(--header-h);
  /* IMPORTANT: keep global .wrap left/right padding (40/20/16). */
  padding-top:var(--shell-header-pad-y);
  padding-bottom:var(--shell-header-pad-y);
}

/* Desktop navigation is defined once in the canonical navigation layer below. */
/* Burger + Drawer (<= 980px) */
.burger{display:none;}
@media (max-width:980px){
  nav.nav{display:none;}
  .burger{
    display:inline-flex;
    margin-left:auto;
    border-radius:var(--component-radius);
    border:var(--border-w) solid var(--line);
    background:var(--surface-2);
    color: var(--text);
    padding:var(--skip-link-pad-y) var(--skip-link-pad-x);
    gap:var(--nav-gap);
    align-items:center;
    cursor:pointer;
    box-shadow:var(--shell-burger-shadow);
  }
  .burger .icon{display:inline-flex; flex-direction:column; gap:var(--shell-burger-icon-gap);}
  .burger .icon i{display:block; width:var(--shell-burger-icon-width); height:var(--shell-burger-icon-height); background:var(--text); border-radius:var(--shell-burger-icon-radius); opacity:.92;}
}

/* Desktop safety for dense authenticated menus.
   Admin/account navigation has many entries; it switches to the same canonical burger earlier. */
@media (max-width:1400px){
  body.admin nav.nav,
  body.account nav.nav{display:none;}
  body.admin .burger,
  body.account .burger{display:inline-flex; margin-left:auto;}
}

.mobile-drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-drawer);
  display:none;
  background:var(--overlay-bg);
  backdrop-filter:blur(var(--overlay-blur));
}
body.menu-open{overflow:hidden}
body.menu-open .mobile-drawer{display:block}

/* Top-Sheet Panel */
.mobile-drawer .panel{
  width:100%;
  max-height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background: var(--shell-header-bg);
  border-bottom:var(--border-w) solid var(--line);
  box-shadow:var(--component-shadow-float);
  padding:calc(var(--shell-drawer-panel-pad-y) + env(safe-area-inset-top, 0px)) 0 calc(var(--shell-drawer-panel-pad-y) + var(--space-2) + env(safe-area-inset-bottom, 0px)) 0;
  border-radius:0;
}
.mobile-drawer .head{display:flex;align-items:center;justify-content:space-between;padding:var(--shell-drawer-head-pad-y) var(--shell-drawer-head-pad-x) var(--shell-drawer-head-pad-bottom) var(--shell-drawer-head-pad-x);}
/* Mobile drawer brand visuals are defined once in the canonical navigation semantics block. */
.mobile-drawer .closebtn{
  border-radius:var(--component-radius);
  padding:var(--shell-drawer-close-pad-y) var(--shell-drawer-close-pad-x);
  border:var(--border-w) solid var(--line);
  background:var(--surface-2);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:var(--shell-drawer-close-gap);
}
.mobile-drawer .closebtn .x{font-size:var(--shell-drawer-close-font-size)}

.mobile-drawer .list{
  padding:var(--space-2) var(--pad-mobile) 0 var(--pad-mobile);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.mobile-drawer .list a,
.mobile-drawer .list button.has-sub{
  display:block;
  padding:var(--space-3) var(--space-3);
  border-radius:var(--nav-item-radius);
  border:var(--border-w) solid var(--line);
  background:var(--shell-drawer-item-bg);
  color: var(--text);
  font-size:var(--fs-body);
  font-weight:var(--nav-item-font-weight);
  text-decoration:none;
}
.mobile-drawer .list a:hover,
.mobile-drawer .list button.has-sub:hover{border-color:var(--shell-drawer-hover-border); box-shadow:var(--component-shadow);}
.mobile-drawer .sub{display:none; padding-left:var(--shell-drawer-sub-pad-left)}
.mobile-drawer .sub.open{display:block}
.mobile-drawer .sub a{font-size:var(--fs-body); font-weight:var(--nav-item-font-weight); padding:var(--shell-drawer-sub-item-pad-y) var(--shell-drawer-sub-item-pad-x);}
.mobile-drawer .sep{height:var(--border-w);background:var(--line);margin:var(--shell-drawer-sep-margin-y) 0}

/* Tables are defined once in the canonical component layer below. */

/* Background is controlled by the global body contract below; legacy asphalt override removed. */

/* =========================================================
   Utilities (projektweit, statt Inline-Styles)
   ========================================================= */
.d-flex{display:flex}
.d-grid{display:grid}
.d-block{display:block}
.d-inline{display:inline}
.d-inline-flex{display:inline-flex}
.d-none{display:none}
.flex-1{flex:1}
.flex-wrap{flex-wrap:wrap}
.ai-center{align-items:center}
.ai-start{align-items:flex-start}
.ai-end{align-items:flex-end}
.jc-between{justify-content:space-between}
.jc-center{justify-content:center}

.gap-8{gap:var(--space-2)}
.gap-10{gap:var(--space-2)}
.gap-12{gap:var(--space-3)}

.m-0{margin:0}
.mt-0{margin-top:0}
.mt-2{margin-top:var(--space-half)}
.mt-4{margin-top:var(--space-1)}
.mt-6{margin-top:var(--space-1-5)}
.mt-8{margin-top:var(--space-2)}
.mt-10{margin-top:var(--space-2)}
.mt-12{margin-top:var(--space-3)}
.mt-16{margin-top:var(--space-4)}

.mb-6{margin-bottom:var(--space-1-5)}
.mb-8{margin-bottom:var(--space-2)}
.mb-10{margin-bottom:var(--space-2)}
.mb-12{margin-bottom:var(--space-3)}
.my-10{margin:var(--space-2) 0}
.my-12{margin:var(--space-3) 0}
.my-16{margin:var(--space-4) 0}

.p-0{padding:0}
.p-16{padding:var(--space-4)}
.mx-auto{margin-left:auto;margin-right:auto}

.ta-left{text-align:left}
.ta-center{text-align:center}
.ta-right{text-align:right}
.underline{text-decoration:underline}
.nowrap{white-space:nowrap}
.prewrap{white-space:pre-wrap}

.w-100{width:100%}

.fx-1-260{min-width:260px;flex:1}
.pw-strength{display:block;width:100%;height:8px;min-height:var(--password-meter-height);border:0;border-radius:var(--radius-pill);overflow:hidden;margin-top:var(--space-2);background:var(--password-meter-bg)}
.pw-strength::-webkit-progress-bar{background:var(--password-meter-bg);border-radius:var(--radius-pill)}
.pw-strength::-webkit-progress-value{border-radius:var(--radius-pill)}
.pw-strength::-moz-progress-bar{border-radius:var(--radius-pill)}
.pw-strength-empty::-webkit-progress-value{background:transparent}
.pw-strength-empty::-moz-progress-bar{background:transparent}
.pw-strength-weak::-webkit-progress-value{background:var(--meter-weak)}
.pw-strength-weak::-moz-progress-bar{background:var(--meter-weak)}
.pw-strength-medium::-webkit-progress-value{background:var(--meter-medium)}
.pw-strength-medium::-moz-progress-bar{background:var(--meter-medium)}
.pw-strength-strong::-webkit-progress-value{background:var(--meter-strong)}
.pw-strength-strong::-moz-progress-bar{background:var(--meter-strong)}

.pre-scroll-70{white-space:pre-wrap;max-height:70vh;overflow:auto}
.code-wrap-70ch{max-width:70ch}
.code-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}
.mw-160{max-width:160px}
.minw-160{min-width:160px}
.minw-90{min-width:90px}
.minw-100{min-width:100px}
.minw-120{min-width:120px}
.minw-280{min-width:280px}
.minw-420{min-width:420px}
.mw-260{max-width:260px}
.mw-380{max-width:380px}
.grid-fit-180{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-3)}
.grid-fit-240{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-3)}
.w-140{width:140px}
.w-120{width:120px}
.w-180{width:180px}
.w-200{width:200px}
.design-logo-preview{display:block;max-width:100%;width:auto}
.brand-logo-img{display:block;max-width:100%;width:auto;height:auto}
.h-100{height:100%}
.of-cover{object-fit:cover}

.minh-90{min-height:90px}
.minh-340{min-height:340px}

.op-90{opacity:.9}
.fw-900{font-weight:900}
.fs-28{font-size:28px}
.truncate{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bd-0{border:0}
.bdt-line{border-top:var(--border-w) solid var(--line)}
.mw-60ch{max-width:60ch}
.img-responsive{max-width:100%;height:auto;border-radius:var(--component-radius)}
.resize-vertical{resize:vertical}

.gtc-1{grid-template-columns:1fr}
.gtc-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gtc-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gtc-media{grid-template-columns:140px 1fr}

/* Ensure all generic grids collapse on narrow phone viewports */
@media (max-width:740px){
  .gtc-2,.gtc-3,.gtc-media{grid-template-columns:1fr;}
  .grid-cols-12-08{grid-template-columns:1fr;}
}

/* Grid column helpers used by admin/settings forms.
   Keep these explicit so `.grid` does not force three columns on desktop. */
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:740px){
  .grid.cols-2,
  .grid.cols-3{grid-template-columns:1fr}
}


/* Block 20: mobile/tablet safety for fixed-width utility classes.
   Keep desktop utility semantics, but prevent utility min-widths from forcing clipped content on phones. */
@media (max-width:640px){
  .fx-1-260,
  .minw-160,
  .minw-280,
  .minw-420{
    min-width:0;
  }
  .w-120,
  .w-140,
  .w-180,
  .w-200{
    width:100%;
    max-width:100%;
  }
}

/* File inputs can otherwise overflow on mobile */
input[type=file]{max-width:100%}

/* =========================================================
   Burger → X (gleicher Button) – wie myhammer-Stil
   ========================================================= */
@media (max-width:980px){
  body.menu-open .burger .btxt{display:none}
  body.menu-open .burger .icon i:nth-child(2){opacity:0}
  body.menu-open .burger .icon i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.menu-open .burger .icon i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .burger .icon i{transition:transform .18s ease, opacity .18s ease}
}

/* =========================================================
   Cookie-Banner (DE) – in Layout gerendert, JS nur Logik
   ========================================================= */
#cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:var(--z-toast);
  padding:var(--cookie-banner-pad);
  padding-bottom:calc(var(--cookie-banner-pad) + env(safe-area-inset-bottom, 0px));
  max-height:calc(100dvh - env(safe-area-inset-top, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--surface-1);
  backdrop-filter:blur(6px);
  border-top:var(--border-w) solid var(--component-border);
}
#cookie-banner .wrap{
  background:var(--surface-1);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius-lg);
  padding:var(--cookie-banner-pad) var(--cookie-banner-pad-x);
  display:grid;
  gap:var(--space-3);
  min-width:0;
}
#cookie-banner .row{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  align-items:center;
}
#cookie-banner a{color:var(--text);text-decoration:underline}
#cookie-banner .cookie-options[hidden],
#cookie-banner .cookie-save[hidden]{display:none}
#cookie-banner .cookie-settings-toggle{white-space:normal}
#cookie-banner.open{ }

#cookie-banner .cookie-actions .btn,
#cookie-banner .cookie-options label{
  min-height:var(--tap-target);
}


/* =========================
   Zusatz: globale Hilfsklassen (DE)
   ========================= */

/* Flex */
.flex-col{flex-direction:column}

/* Line-height */
.lh-16{line-height:1.6}

/* Zusätzliche Abstände */
.my-24{margin:var(--space-6) 0}
.text-danger-soft{color:var(--err)}
.breakword{overflow-wrap:anywhere;word-break:break-word}
.op-95{opacity:.95}
.fw-600{font-weight:600}
.minh-auto{min-height:auto}
.maxw-760{max-width:760px}
.service-grid-240{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-2)}


/* Admin-Menü (Normalisierung) */
.admin-menu-list{margin:0;padding-left:var(--admin-menu-indent-base)}
.admin-menu-list.level-1{margin-top:var(--space-1);padding-left:calc(var(--admin-menu-indent-base) + (var(--admin-menu-indent-step) * 1))}
.admin-menu-list.level-2{margin-top:var(--space-1);padding-left:calc(var(--admin-menu-indent-base) + (var(--admin-menu-indent-step) * 2))}
.admin-menu-list.level-3{margin-top:var(--space-1);padding-left:calc(var(--admin-menu-indent-base) + (var(--admin-menu-indent-step) * 3))}
.admin-menu-list.level-4{margin-top:var(--space-1);padding-left:calc(var(--admin-menu-indent-base) + (var(--admin-menu-indent-step) * 4))}
.admin-menu-list.level-5{margin-top:var(--space-1);padding-left:calc(var(--admin-menu-indent-base) + (var(--admin-menu-indent-step) * 5))}
.admin-menu-list.level-6{margin-top:var(--space-1);padding-left:calc(var(--admin-menu-indent-base) + (var(--admin-menu-indent-step) * 6))}

/* Badges */

/* Grid Spalten-Layouts */
.grid-cols-12-08{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
/* Profil (Mein Konto → Profil) – Premium Layout */
.profile-page{position:relative}
.profile-shell{position:relative;max-width:none;width:100%;margin:18px auto 34px;padding:0 var(--profile-shell-pad-desktop)}
@media (max-width:1100px){.profile-shell{padding:0 var(--profile-shell-pad-tablet)}}
@media (max-width:640px){.profile-shell{padding:0 var(--profile-shell-pad-mobile)}}
.profile-shell:before{content:"";position:absolute;left:0;right:0;top:0;height:420px;border-radius:var(--component-radius-xl);background:radial-gradient(1200px 420px at 15% 10%,var(--profile-hero-glow-a),transparent 55%),radial-gradient(900px 360px at 85% 20%,var(--profile-hero-glow-b),transparent 60%),linear-gradient(180deg,var(--profile-hero-glow-c),transparent 70%);pointer-events:none;filter:blur(.2px)}
.profile-grid{position:relative;max-width:var(--profile-grid-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--profile-side-width);gap:var(--profile-gap);align-items:start}
@media (max-width:980px){.profile-grid{grid-template-columns:1fr;}}

.profile-card{backdrop-filter:saturate(120%) blur(2px)}
.profile-main{padding:var(--space-6)}

.profile-header{display:grid;grid-template-columns:var(--profile-photo-size) 1fr;gap:var(--space-6);align-items:center}
@media (max-width:720px){.profile-header{grid-template-columns:1fr;}}

.profile-photo{width:var(--profile-photo-size);height:var(--profile-photo-size);border-radius:var(--profile-photo-radius);overflow:hidden;background:var(--profile-photo-bg);border:var(--border-w) solid var(--profile-photo-border);box-shadow:var(--profile-photo-shadow)}
/* Mobile: make profile photo feel like a hero card (bigger + centered) */
@media (max-width:720px){
  .profile-photo{width:100%;height:auto;aspect-ratio:16/10;max-height:320px;margin:0 auto}
}
.profile-photo-placeholder{object-fit:contain;opacity:.9;padding:var(--profile-gap)}

.profile-title{font-size:48px;font-weight:950;line-height:1.02;letter-spacing:-.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:720px){.profile-title{font-size:34px;white-space:normal}}

.profile-sub{margin-top:8px;display:grid;gap:4px;align-items:start}
.profile-sub > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-badges{margin-top:var(--space-4);display:flex;gap:var(--space-3);flex-wrap:wrap}
.profile-pill{display:inline-flex;align-items:center;gap:var(--space-2);border-radius:var(--radius-pill);padding:var(--control-pad-y) var(--control-pad-x);font-weight:900;border:var(--border-w) solid var(--btn-secondary-border);background:var(--btn-secondary-bg)}
.profile-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--state-dot-default)}
.profile-pill.is-ok .dot{background:var(--state-dot-ok)}
.profile-pill.is-warn .dot{background:var(--state-dot-warn)}
.profile-pill.is-off .dot{background:var(--state-dot-muted)}
.profile-pill.is-ok{background:var(--success-soft);border-color:var(--success-line)}
.profile-pill.is-warn{background:var(--warning-soft);border-color:var(--warning-line)}
.profile-pill.is-off{background:var(--state-muted-soft);border-color:var(--state-muted-line)}

.profile-divider{height:var(--border-w);background:linear-gradient(90deg,transparent,var(--profile-divider),transparent);margin:var(--space-5) 0 var(--profile-gap)}

/* Progress-Bar für Profil-Vollständigkeit */
.profile-progress{margin-top:var(--space-3);max-width:520px}
.profile-progress-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);font-size:var(--profile-progress-fs)}
.profile-progress-top strong{font-weight:950}
.profile-progress-native{display:block;margin-top:var(--space-2);width:100%;height:10px;border:none;border-radius:var(--radius-pill);overflow:hidden;background:var(--profile-progress-bg)}
.profile-progress-native::-webkit-progress-bar{background:var(--profile-progress-bg);border-radius:var(--radius-pill)}
.profile-progress-native::-webkit-progress-value{border-radius:var(--radius-pill);background:var(--profile-progress-fill)}
.profile-progress-native::-moz-progress-bar{border-radius:var(--radius-pill);background:var(--profile-progress-fill)}
.profile-h{font-size:22px;font-weight:950;letter-spacing:-.25px}
.profile-text{margin-top:var(--space-2);line-height:1.65;font-size:16px}

.profile-kv{margin-top:var(--space-3);display:grid;gap:var(--space-2)}
.profile-kv-row{display:grid;grid-template-columns:26px 1fr;gap:var(--space-3);align-items:center;padding:var(--space-3);border-radius:var(--component-radius);border:var(--border-w) solid var(--component-border);background:var(--profile-kv-bg)}
.profile-ico{opacity:.9}
.profile-kv-val{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.profile-actions{margin-top:var(--space-3);display:grid;gap:var(--space-2)}
.profile-actions .btn{padding:var(--control-pad-y) var(--control-pad-x);border-radius:var(--btn-radius)}

/* On desktop, lower the side column a bit so cards align visually with the main header */
@media (min-width:981px){
  .profile-side .profile-card:first-child{margin-top:28px;}
}

.profile-empty{margin-top:var(--space-3);border-radius:var(--component-radius-lg);border:var(--border-w) dashed var(--profile-empty-border);background:var(--profile-empty-bg);padding:var(--space-4)}
.profile-empty-title{font-weight:950;font-size:var(--password-eye-size);letter-spacing:-.2px}
.profile-empty-sub{margin-top:6px;line-height:1.55}
.profile-empty .btn{margin-top:var(--space-3)}

/* Avatar Box (Profil bearbeiten) */
.avatar-box-96{height:96px;border-radius:var(--component-radius-lg);overflow:hidden;border:var(--border-w) solid var(--component-border);background:var(--avatar-box-bg);display:flex;align-items:center;justify-content:center}

/* Mobile: profile settings avatar row should stack nicely */
@media (max-width:720px){
  .profile-avatar-row{flex-direction:column;align-items:stretch}
  .profile-avatar-row .avatar-box-96{width:100%;height:auto;aspect-ratio:16/10;max-height:260px}
  .profile-avatar-row .flex-1{width:100%}
}

/* Mobile: filter bars (Aufträge entdecken, Dashboard) should be full-width stacked */
@media (max-width:720px){
  .wb-filterbar{align-items:stretch}
  .wb-filterbar > *{flex:1 1 100%;width:100%}
  .wb-filterbar .btn{width:100%}
}

/* Verification document grid */
.doc-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.doc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.doc-grid{grid-template-columns:1fr}}
.doc-card{min-width:0}
.avatar-img-placeholder{width:100%;height:100%;object-fit:contain;opacity:.92}

/* CMS Swatches: feste Palette ohne Inline-Styles */

/* Auftrag-Detail Galerie + Lightbox */
.wb-gallery{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (max-width:980px){.wb-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:680px){.wb-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}

.wb-thumb-img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--component-radius-sm);border:var(--border-w) solid var(--component-border)}

.wb-lightbox{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:var(--lightbox-pad-desktop);background:var(--overlay-bg);backdrop-filter:blur(var(--overlay-blur));z-index:var(--z-lightbox)}
.wb-lightbox.is-open{display:flex}
body.no-scroll{overflow:hidden}

.wb-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:56px;border-radius:var(--marketplace-card-radius);border:var(--border-w) solid var(--marketplace-lightbox-border);background:var(--marketplace-lightbox-bg);color:var(--text);font-size:24px;cursor:pointer;touch-action:manipulation}
.wb-lb-close{top:0;right:0;width:var(--tap-target);height:var(--tap-target);border-radius:var(--component-radius-sm);font-size:22px}
.wb-lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.wb-lb-next{right:18px;top:50%;transform:translateY(-50%)}

/* Rechnung (Vorschau) */
.invoice-page{background:var(--bg);color:var(--text)}
.invoice-wrap{padding-top:var(--space-6);padding-bottom:var(--space-6)}
.invoice-head{display:flex;gap:var(--space-4);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.invoice-logo{flex:0 0 auto}
.invoice-logo-img{max-height:var(--invoice-logo-max-h)}
.invoice-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--invoice-grid-gap)}
@media (max-width:820px){.invoice-grid{grid-template-columns:1fr}}
.invoice-box{padding:var(--invoice-box-padding)}
.invoice-totals{display:grid;grid-template-columns:1fr minmax(260px,420px);gap:var(--invoice-grid-gap)}
@media (max-width:820px){.invoice-totals{grid-template-columns:1fr}}
.invoice-total-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:var(--border-w) solid var(--finance-total-divider)}
.invoice-total-row:last-child{border-bottom:0}
.invoice-table th.col-pos{width:var(--invoice-col-pos)}
.invoice-table th.col-art{width:var(--invoice-col-art)}
.invoice-table th.col-qty{width:var(--invoice-col-qty)}
.invoice-table th.col-unit{width:var(--invoice-col-unit)}
.invoice-table th.col-sum{width:var(--invoice-col-sum)}


/* =========================
   Design-System (v5)
   Einheitliche Seitenstruktur
   ========================= */

/* Flow-Layout für den Seiteninhalt */
.ds{display:flex;flex-direction:column;gap:var(--space-6)}

/* Page Head actions: base .page-head/.page-sub are defined in the canonical page header block. */
.page-head-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}

/* Toolbar / Filterbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}

/* Karten */
.ds-card.card{border-radius:var(--component-radius)}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--card-header-gap);flex-wrap:wrap;padding:var(--space-4) var(--card-pad-x);border-bottom:var(--border-w) solid var(--line)}
.card-header-left{display:flex;flex-direction:column;gap:var(--card-header-left-gap)}
.card-title{font-weight:900;font-size:var(--fs-lg)}
.card-subtitle{opacity:.85;font-size:var(--table-fs)}
.card-header-actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.card-footer{padding:var(--space-4) var(--card-pad-x);border-top:var(--border-w) solid var(--line);display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
.card-footer-split{justify-content:space-between}

.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--form-row-gap);margin-bottom:var(--space-4)}
@media (max-width:820px){.form-row{grid-template-columns:1fr}}
.form-actions{display:flex;gap:var(--form-actions-gap);align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:var(--form-actions-margin-top)}

/* Leerzustand */
.empty{border:var(--border-w) dashed var(--component-border);border-radius:var(--component-radius);padding:var(--space-5);background:var(--surface-muted);display:flex;flex-direction:column;gap:var(--empty-gap);align-items:flex-start}
.empty-title{font-weight:900;font-size:16px}
.empty-text{opacity:.85}
.empty-actions{display:flex;gap:var(--empty-actions-gap);flex-wrap:wrap;margin-top:var(--space-1)}

/* Kompatibilität: häufig genutzte Klassen auf Design-System mappen */
/* Design-System: Filter (einheitliche Filter-Optik wie in „Admin – Moderator Aktivität“) */
.filters{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  align-items:flex-end;
}

/* Grid-Variante für kompakte Filterleisten (Desktop/Tablet nebeneinander, Mobile untereinander) */
.filters.filters-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--form-filter-gap);
  align-items:end;
}
.filters.filters-grid > div{width:auto}
.filters.filters-grid .input{width:100%;min-width:0;max-width:none}
.filters.filters-grid .btn{justify-self:start}

@media (max-width:980px){
  .filters.filters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .filters.filters-grid{grid-template-columns:1fr}
  .filters.filters-grid .btn{justify-self:stretch}
}

/* Jede Filter-Unit: Label oben, Control unten */
.filters > div{
  display:flex;
  flex-direction:column;
  gap:var(--form-label-gap);
}

/* Desktop: kompakte Controls */
.filters .input{
  width:auto;
  min-width:var(--form-filter-control-min);
  max-width:var(--form-filter-control-max);
  flex:0 1 auto;
  padding:var(--control-pad-y) var(--form-filter-control-pad-x);
  border-radius:var(--radius-input);
}
.filters select.input,
.filters input.input{height:var(--form-filter-control-h)}
.filters label{font-weight:var(--form-label-weight);color:var(--form-label-color);font-size:var(--form-filter-label-fs)}

/* Datumsfelder etwas kompakter */
.filters input[type="date"].input{min-width:var(--form-filter-date-min);max-width:var(--form-filter-date-max)}

/* Button bleibt kompakt */
.filters .btn{flex:0 0 auto}

/* Mobile: untereinander, volle Breite */
@media (max-width:720px){
  .filters{align-items:stretch}
  .filters > div{width:100%}
  .filters .input{width:100%;max-width:none;flex:1 1 100%}
  .filters button.btn[type="submit"],
  .filters input.btn[type="submit"]{width:100%;}
}

/* Mobile: action button rows inside forms should stack (prevents horizontal overflow) */
@media (max-width:640px){
  .card form .d-flex.gap-8{
    flex-direction:column;
    align-items:stretch;
  }
  .card form .d-flex.gap-8 > .btn{
    width:100%;
  }
}
/* Canonical inline action row */
.actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.stack{display:flex;flex-direction:column;gap:var(--space-2)}
.note{border-radius:var(--component-radius-sm);border:var(--border-w) solid var(--component-border);padding:12px}
.note.is-unread{border-color:var(--success-line);background:var(--success-soft)}
.note-top{display:flex;justify-content:space-between;gap:var(--space-2);align-items:flex-start}
.note-title{font-weight:700}
.row-between{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start}
.badge-wrap{display:flex;justify-content:flex-end}
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .row-between{flex-direction:column;align-items:flex-start}
}


/* =========================================================
   WERKBID GLOBAL STYLE – Single Truth Overrides (13.02.2026)
   ========================================================= */

/* Base background is defined once in the canonical global viewport layer above. */

/* Container gutters are defined once in the base .wrap/.container contract above. */

/* Prevent double gutters when a view nests .wrap/.container inside layout .wrap.
   Kept non-specific enough to avoid creating an override war. */
.wrap .wrap,
.wrap .container,
.container .wrap,
.container .container{
  padding-left:0;
  padding-right:0;
  margin-left:0;
  margin-right:0;
  max-width:100%;
}
/* Responsive wrap/container padding is defined in the base layout section above. */

/* Panels / Cards: canonical surface styling is defined in the final design-system contract below. */

/* Forms: canonical input styles are defined in the component contract below. */
/* File inputs: canonical premium upload button style (public + admin). */
input[type=file]{
  width:100%;
  box-sizing:border-box;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button{
  margin-right:var(--space-3);
  border:var(--btn-border-w) solid var(--btn-primary-border);
  border-radius:var(--btn-radius);
  padding:var(--space-2) var(--btn-pad-x);
  font-weight:800;
  cursor:pointer;
  color:var(--text);
  background:var(--btn-primary-bg);
}
input[type=file]::file-selector-button:hover,
input[type=file]::-webkit-file-upload-button:hover{
  background:var(--btn-primary-bg-hover);
}
/* Forms inside cards: ONLY primary submit buttons should be full width.
   Links or secondary buttons in a row must NOT be forced to 100% (mobile overflow bug). */
.card form .btn{
  width:auto;
}
@media (max-width:640px){
  .card form button[type="submit"].btn,
  .card form input[type="submit"].btn{
    width:100%;
  }
}

/* Kleine Icon-Aktionen (Tabellen-UI): only icon visuals live here; layout is owned by the canonical table-actions block. */
.table-actions .icon-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--btn-radius);
  border:var(--border-w) solid var(--wb-blue);
  background:var(--wb-blue);
  text-decoration:none;
}
.table-actions .icon-action:hover{background:var(--nav-item-bg-hover);border-color:var(--nav-item-border-hover)}
.table-actions svg{width:var(--table-action-icon-size);height:var(--table-action-icon-size);stroke:var(--text);fill:none;stroke-width:var(--border-w-2);stroke-linecap:round;stroke-linejoin:round;}
.table-actions .icon-action.danger{border-color:var(--danger-line)}

/* Canonical horizontal navigation (desktop)
   Single source of truth for public, home, account and admin horizontal menus. */
nav.nav{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:var(--nav-gap);
  white-space:nowrap;
  flex-wrap:nowrap;
}
nav.nav a,
nav.nav .nav-dd-toggle{
  min-height:var(--nav-item-min-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:var(--nav-item-pad-y) var(--nav-item-pad-x);
  margin-left:0;
  border:var(--border-w) solid var(--nav-item-border);
  border-radius:var(--nav-item-radius);
  background:var(--nav-item-bg);
  color:var(--nav-item-fg);
  font:inherit;
  font-size:var(--nav-item-font-size);
  font-weight:var(--nav-item-font-weight);
  letter-spacing:var(--nav-item-letter-spacing);
  line-height:1.1;
  text-decoration:none;
  cursor:pointer;
  position:relative;
  transition:background var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
nav.nav a:hover,
nav.nav .nav-dd-toggle:hover,
nav.nav a:focus-visible,
nav.nav .nav-dd-toggle:focus-visible{
  background:var(--nav-item-bg-hover);
  border-color:var(--nav-item-border-hover);
  color:var(--nav-item-fg-hover);
  text-decoration:none;
  outline:none;
}
nav.nav a:focus-visible,
nav.nav .nav-dd-toggle:focus-visible{
  box-shadow:var(--focus-shadow);
}
nav.nav a.is-active,
nav.nav .nav-dd-toggle.is-active,
nav.nav a[aria-current="page"],
nav.nav .drop.open > .nav-dd-toggle,
nav.nav .drop > .nav-dd-toggle[aria-expanded="true"]{
  background:var(--nav-item-bg-active);
  border-color:var(--nav-item-border-active);
  color:var(--text);
  box-shadow:var(--nav-item-active-shadow);
}
nav.nav a::after,
nav.nav .nav-dd-toggle::after{display:none;}
nav.nav .drop > a,
.drop > .nav-dd-toggle{padding-right:calc(var(--nav-item-pad-x) + var(--space-3)); margin-left:0;}

/* Dropdown menu – click only */
.drop{position:relative; display:inline-block;}
.drop > .menu{
  display:none;
  position:absolute;
  left:0;
  right:auto;
  top:calc(100% + var(--nav-dropdown-offset));
  min-width:var(--nav-dropdown-min);
  max-width:min(var(--nav-dropdown-max), calc(100vw - (var(--pad-desktop) * 2)));
  max-height:min(70vh, 520px);
  overflow:auto;
  overflow-wrap:anywhere;
  -webkit-overflow-scrolling:touch;
  background:var(--nav-dropdown-bg);
  border:var(--border-w) solid var(--nav-dropdown-border);
  border-radius:var(--component-radius);
  padding:var(--space-2);
  box-shadow:var(--nav-dropdown-shadow);
  z-index:var(--z-dropdown);
}
.drop.drop-align-end > .menu{
  left:auto;
  right:0;
}
.drop > .menu a{
  display:flex;
  align-items:center;
  min-height:var(--nav-dropdown-item-min-h);
  padding:var(--nav-dropdown-item-pad-y) var(--space-3);
  margin-left:0;
  border-radius:var(--component-radius-sm);
  border:var(--border-w) solid transparent;
  white-space:normal;
  line-height:1.25;
}
.drop > .menu a:hover,
.drop > .menu a:focus-visible,
.drop > .menu a.is-active,
.drop > .menu a[aria-current="page"]{
  background:var(--nav-item-bg-hover);
  border-color:var(--nav-item-border-hover);
  color:var(--text);
  text-decoration:none;
}
.drop:hover > .menu{display:none;}
/* Open state wins over hover through source order, without !important. */
.drop.open > .menu,
.drop.open:hover > .menu{display:block;}
.drop > a::before,
.drop > .nav-dd-toggle::before{
  content:"▾";
  position:absolute;
  right:var(--space-2);
  top:50%;
  transform:translateY(-50%) rotate(0deg);
  font-size:var(--nav-caret-font-size);
  opacity:.9;
}
.drop.open > a::before,
.drop.open > .nav-dd-toggle::before{transform:translateY(-50%) rotate(180deg);}

/* Responsive table behavior is centralized in the canonical component layer. */


/* MultiSelect (Dropdown mit Checkboxen) */
.ms{position:relative}
.ms-btn{cursor:pointer;text-align:left}
.ms-panel{display:none;position:absolute;left:0;right:0;top:calc(100% + var(--cms-dd-panel-offset));z-index:var(--z-popover);
  background:var(--surface-1);border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius);padding:12px;max-width:calc(100vw - (var(--pad-mobile) * 2));max-height:340px;overflow:auto;overflow-wrap:anywhere;box-shadow:var(--component-shadow-float)
}
.ms-panel[hidden]{display:none}
.ms-panel.open{display:block}
.ms-group{margin:0;padding:var(--space-3) 0;border-top:var(--border-w) solid var(--component-border);font-weight:700;color:var(--text-soft)}
.ms-group:first-child{border-top:0;padding-top:0}
.ms-group-title{font-weight:700;color:var(--text);margin:0 0 var(--space-2)}
.ms-item{display:flex;gap:var(--space-3);align-items:center;padding:var(--space-2) var(--space-1);border-radius:var(--component-radius-sm);color:var(--text-soft)}
.ms-item:hover{background:var(--surface-muted)}
.ms-item input{accent-color:var(--accent-cyan)}
.ms-item small{opacity:.75}

@media (max-width: 820px){
  .ms-panel{position:relative;top:0;margin-top:8px}
}

/* Profile: Leistungen (multi-trade display) */
.profile-leistungen{margin-top:var(--space-3)}
.profile-leistungen__title{font-size:var(--profile-service-title-fs);font-weight:800;letter-spacing:.2px;opacity:.9;margin-bottom:var(--profile-service-title-gap)}
.profile-leistungen__list{display:flex;flex-wrap:wrap;gap:var(--profile-service-list-gap)}
.profile-leistungen__list .tag{display:inline-flex;align-items:center;justify-content:center;padding:var(--profile-tag-pad-y) var(--profile-tag-pad-x);border-radius:var(--radius-pill);font-size:var(--profile-tag-fs);font-weight:700;border:var(--border-w) solid var(--btn-secondary-border);background:var(--btn-secondary-bg)}

/* Listings: blue budget/title accents (we avoid orange in cards/buttons) */
.budget-amt{color:var(--btn-bg);font-weight:900}

/* --- Filter bar tweaks (Unternehmer "Aufträge finden") --- */
.wb-filterbar .wb-filter-search{flex:2 1 360px;min-width:260px}
.wb-filterbar .wb-filter-trade{flex:1 1 320px;min-width:220px}
.wb-filterbar .wb-filter-trade .ms{min-width:320px}
.wb-filterbar .wb-filter-trade .ms-btn{width:100%}
.wb-filterbar .wb-filter-budget{flex:0 0 140px}
.wb-filterbar .input, .wb-filterbar select{width:100%}
@media (max-width:980px){
  .wb-filterbar .wb-filter-search{flex:1 1 100%}
  .wb-filterbar .wb-filter-trade{flex:1 1 100%}
  .wb-filterbar .wb-filter-budget{flex:1 1 160px}
}
@media (max-width:640px){
  .wb-filterbar > div,
  .wb-filterbar > button,
  .wb-filterbar .wb-filter-search,
  .wb-filterbar .wb-filter-trade,
  .wb-filterbar .wb-filter-budget,
  .wb-filterbar .wb-filter-trade .ms{min-width:0;width:100%}
}


/* ============ WerkBid Modal (Alert/Confirm Ersatz) ============ */
.wb-modal{position:fixed;inset:0;display:none;z-index:var(--z-lightbox);padding:var(--modal-viewport-gap);box-sizing:border-box;}
.wb-modal.is-open{display:flex;align-items:center;justify-content:center;}
.wb-modal__backdrop{position:absolute;inset:0;background:var(--overlay-bg);backdrop-filter:blur(var(--overlay-blur));}
.wb-modal__dialog{position:relative;width:min(100%, 560px);max-width:calc(100vw - (var(--modal-viewport-gap) * 2));max-height:calc(100dvh - (var(--modal-viewport-gap) * 2));margin:0;background:var(--surface-1);border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius-lg);box-shadow:var(--shadow-modal);padding:0;overflow:hidden;display:flex;flex-direction:column;}
.wb-modal__header{display:flex;align-items:center;justify-content:space-between;gap:var(--modal-header-gap);padding:var(--modal-pad-y) var(--modal-pad-x);border-bottom:var(--border-w) solid var(--shell-modal-divider);}
.wb-modal__title{font-size:var(--fs-lg);font-weight:800;letter-spacing:.2px;color:var(--text);}
.wb-modal__close{appearance:none;border:0;background:transparent;color:var(--modal-close-color);font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);min-width:var(--tap-target);min-height:var(--tap-target);}
.wb-modal__close:hover,.wb-modal__close:focus-visible{background:var(--modal-close-hover-bg);color:var(--text);outline:none;box-shadow:var(--focus-shadow);}
.wb-modal__body{padding:var(--modal-pad-y) var(--modal-pad-x);color:var(--modal-body-color);font-size:var(--modal-body-fs);line-height:1.5;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch;}
.wb-modal__footer{display:flex;justify-content:flex-end;gap:var(--modal-footer-gap);padding:var(--space-4) var(--modal-pad-x);border-top:var(--border-w) solid var(--shell-modal-divider);}

/* Registration steps: responsive grid */
.grid-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}

/* Password visibility toggle: icon-only */
.pw-eye{background:transparent;border:0;padding:var(--space-2);margin:0;cursor:pointer;color:var(--password-eye);font-size:var(--fs-lg);line-height:1;min-width:var(--tap-target);min-height:var(--tap-target);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--component-radius-sm);touch-action:manipulation;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.pw-eye-icon{position:relative;display:inline-block;width:20px;height:14px;border:2px solid currentColor;border-radius:var(--radius-pill) / 75%;box-sizing:border-box}
.pw-eye-icon::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:currentColor;transform:translate(-50%,-50%)}
.pw-eye:hover{color:var(--password-eye-hover);background:var(--password-eye-bg-hover)}
.pw-eye:focus-visible{outline:0;box-shadow:var(--focus-shadow)}
.pw-eye:disabled{opacity:.55;cursor:not-allowed}

/* Mobile: legal checkbox blocks and file-input labels should not collapse awkwardly */
@media (max-width:560px){
  .checkbox.d-flex{align-items:flex-start}
  .checkbox.d-flex input[type="checkbox"]{margin-top:4px;flex:0 0 auto}
  .checkbox.d-flex span{min-width:0;line-height:1.45}
  input[type=file]::file-selector-button,
  input[type=file]::-webkit-file-upload-button{display:block;width:100%;margin:0 0 var(--space-2) 0}
}


/* ===========================
   Wizard Trade Picker Modal
   Uses the canonical .wb-modal BEM structure.
   =========================== */
.wb-modal__dialog--wide{max-width:min(920px, calc(100vw - (var(--modal-viewport-gap) * 2)));}
.wb-modal__body--trade-picker{max-height:70vh;overflow:auto;}

/* Phase 16: hero gallery for Auftrge */
.wb-hero-gallery{margin:var(--space-3) 0 var(--space-2)}
.wb-hero-main{display:block;border-radius:var(--marketplace-gallery-radius);overflow:hidden;background:var(--marketplace-gallery-bg);border:var(--border-w) solid var(--marketplace-gallery-border)}
.wb-hero-main-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.wb-gallery-strip{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-3)}
.wb-gallery-strip .wb-thumb{width:96px;border-radius:var(--marketplace-thumb-radius);overflow:hidden;border:2px solid transparent}
.wb-gallery-strip .wb-thumb.is-active{border-color:var(--marketplace-gallery-active-border)}
.wb-gallery-strip .wb-thumb-img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
@media (max-width:740px){
  .wb-gallery-strip .wb-thumb{width:72px}
}


/* Mobile/tablet safety: app-like modals must stay inside the viewport and scroll internally. */
@media (max-width:720px), (max-height:640px){
  .wb-modal.is-open,
  .cms-modal,
  .cms-ai-modal{
    align-items:center;
    justify-content:center;
  }
  .wb-modal__dialog,
  .cms-modal__panel,
  .cms-ai-modal__panel{
    width:100%;
    max-height:calc(100dvh - (var(--modal-viewport-gap) * 2));
    display:flex;
    flex-direction:column;
  }
  .wb-modal__footer,
  .cms-modal__actions,
  .cms-ai-modal__actions{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-2);
  }
  .wb-modal__footer .btn,
  .cms-modal__actions .btn,
  .cms-ai-modal__actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Mobile/tablet safety for the Auftrag trade picker modal. */
@media (max-width:740px), (max-height:640px){
  .wb-modal__dialog--wide{width:100%;max-width:calc(100vw - (var(--modal-viewport-gap) * 2));}
  .wb-modal__body--trade-picker{min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}
  .wb-trade-group-items{display:grid;grid-template-columns:1fr;}
  .wb-trade-item{width:100%;min-height:var(--tap-target);border-radius:var(--component-radius);text-align:left;white-space:normal;line-height:1.25;}
}

/* Mobile portrait: avoid tiny split action buttons and keep touch targets comfortable. */
@media (max-width:560px){
  .actions,
  .card-header-actions,
  .card-footer,
  .empty-actions,
  .toolbar-left,
  .toolbar-right{align-items:stretch;}
  .actions > .btn,
  .card-footer > .btn,
  .empty-actions > .btn{width:100%;min-height:var(--tap-target);}
}

/* Phase 20: responsive app-like detail/gallery + my orders */
.wb-detail-title{max-width:100%;overflow-wrap:anywhere;word-break:break-word;text-wrap:balance}

.wb-lb-shell{position:relative;width:min(1200px,100%);display:flex;align-items:center;justify-content:center}
.wb-lb-stage{width:100%;display:grid;grid-template-columns:minmax(var(--tap-target),64px) minmax(0,1fr) minmax(var(--tap-target),64px);align-items:center;gap:var(--space-3)}
.wb-lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);min-width:0}
.wb-lb-meta{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:min(900px,92vw)}
.wb-lb-count{color:var(--marketplace-lightbox-muted);font-size:var(--lightbox-count-fs);font-weight:700;letter-spacing:.04em}
.wb-lb-caption{color:var(--text);text-align:center;padding:0;max-width:min(900px,92vw);margin:0 auto;line-height:1.45}
.wb-lb-img{display:block;max-width:min(1100px,88vw);max-height:74vh;border-radius:var(--marketplace-gallery-radius);border:var(--border-w) solid var(--marketplace-lightbox-border);object-fit:contain;background:var(--marketplace-overlay-image-bg);margin:0 auto}
.wb-lb-prev,.wb-lb-next{position:static;transform:none}
@media (max-width:900px){
  .wb-lightbox{padding:var(--lightbox-pad-tablet)}
  .wb-lb-shell{width:100%}
  .wb-lb-stage{grid-template-columns:48px minmax(0,1fr) 48px;gap:var(--space-2)}
  .wb-lb-img{max-width:100%;max-height:68vh}
}
@media (max-width:640px){
  .wb-lightbox{padding:var(--lightbox-pad-mobile)}
  .wb-lb-shell{padding-top:var(--tap-target)}
  .wb-lb-stage{grid-template-columns:var(--tap-target) minmax(0,1fr) var(--tap-target);gap:var(--space-2);align-items:center}
  .wb-lb-btn{width:var(--tap-target);height:var(--tap-target);border-radius:var(--radius-pill);font-size:22px;background:var(--marketplace-lightbox-bg)}
  .wb-lb-close{width:var(--tap-target);height:var(--tap-target);font-size:22px}
  .wb-lb-img{max-height:58vh;border-radius:var(--component-radius)}
  .wb-lb-meta{max-width:100%;padding:0 4px}
  .wb-lb-caption{font-size:var(--table-fs);padding-bottom:var(--space-1)}
}

.wb-orders-cta-card{display:flex;align-items:center;justify-content:flex-start}
.wb-orders-filters{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.wb-orders-grid{display:grid;grid-template-columns:1fr;gap:var(--marketplace-grid-gap);align-items:start}
.wb-order-card{padding:0;overflow:hidden;display:flex;flex-direction:column;min-width:0;max-width:340px;justify-self:start;width:100%}
.wb-order-thumb-link{display:block;text-decoration:none}
.wb-order-thumb{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface-muted)}
.wb-order-thumb-placeholder{display:flex;align-items:center;justify-content:center;padding:var(--space-5);text-align:center;color:var(--text-soft);font-weight:700}
.wb-order-body{padding:var(--control-pad-x);display:flex;flex-direction:column;gap:var(--space-2)}
.wb-order-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:2.9em;color:var(--text);text-decoration:none;font-size:clamp(16px,1.15vw,19px);font-weight:800;line-height:1.25;overflow-wrap:anywhere;word-break:break-word}
.wb-order-title:hover{text-decoration:underline;text-decoration-color:var(--link-underline)}
.wb-order-meta{line-height:1.35;font-size:var(--order-meta-fs)}
.wb-order-price-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}
.wb-order-budget{font-size:clamp(18px,1.5vw,24px);font-weight:900;line-height:1}
.wb-order-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.wb-order-actions .btn{flex:1 1 120px;justify-content:center;text-align:center}
@media (min-width:620px){
  .wb-orders-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-order-card{max-width:none}
}
@media (min-width:980px){
  .wb-orders-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){
  .wb-orders-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1600px){
  .wb-orders-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:760px){
  .wb-order-title{font-size:clamp(18px,5.1vw,22px)}
  .wb-order-budget{font-size:clamp(20px,6vw,26px)}
  .wb-order-actions .btn{flex:1 1 100%}
}

.pw-field{position:relative;min-width:0}
.pw-field .input{padding-right:calc(var(--tap-target) + var(--space-3));min-width:0}
.pw-field .pw-eye{position:absolute;right:var(--password-eye-offset);top:50%;transform:translateY(-50%)}
@media (max-width:640px){
  .pw-field .input{padding-right:calc(var(--tap-target) + var(--space-2))}
}
.code-input{letter-spacing:.14em;font-variant-numeric:tabular-nums}


/* =========================================================
   Canonical utility compatibility layer
   Centralizes project-wide utility hooks that are already used
   across views and replaces scattered page-local assumptions.
   ========================================================= */
.h2{margin:0 0 var(--space-2);font:700 clamp(20px,2.2vw,28px)/1.2 'PT Serif',serif;color:var(--text)}
.h3{margin:0 0 8px;font:700 clamp(16px,1.6vw,20px)/1.3 'PT Serif',serif;color:var(--text)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-variant-numeric:tabular-nums}
.hint{font-size:var(--form-help-fs);line-height:1.5;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:var(--form-label-gap)}
.inline-form{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:flex-end}
.gc-1-3{grid-column:1 / -1}
@media (max-width:640px){
  .inline-form{align-items:stretch;width:100%;flex:1 1 100%;}
  .inline-form > *{width:100%;min-width:0}
  .inline-form .btn{width:100%}
}


/* Wizard / Builder layout helpers */
.wb-flex-between-center{display:flex;justify-content:space-between;gap:var(--space-3);align-items:center;flex-wrap:wrap}
.wb-flex-end-10{display:flex;justify-content:flex-end;gap:var(--space-2);flex-wrap:wrap}
.wb-grid-stack-10{display:grid;gap:var(--space-2)}
.wb-card-pad-12{padding:var(--space-3)}
.wb-card-dashed{border:var(--border-w) dashed var(--component-border)}
.wb-min-h-24{min-height:24px}
.cursor-grab{cursor:grab}
.mb-4{margin-bottom:var(--space-1)}
.wb-flex-wrap-8{display:flex;gap:var(--space-2);flex-wrap:wrap}
.wb-flex-between-top{display:flex;justify-content:space-between;gap:var(--space-3);align-items:flex-start;flex-wrap:wrap}
.wb-grid-stack-8{display:grid;gap:var(--space-2)}
.wb-grid-12{display:grid;grid-template-columns:1fr 2fr;gap:var(--space-4)}
.wb-grid-form-211{grid-template-columns:2fr 1fr 1fr}
.wb-grid-form-140-auto{grid-template-columns:140px auto auto auto;align-items:end;margin-top:0}
.wb-grid-form-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wb-grid-form-options{grid-template-columns:1.2fr 2fr .8fr auto auto;align-items:end}
.wb-grid-form-add-option{grid-template-columns:1fr 2fr 1fr}
.wb-grid-minlabel{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:var(--space-2);align-items:start}
.wb-grid-trade-row{grid-template-columns:1fr auto;align-items:center}
.wb-grid-date-pair{grid-template-columns:1fr 1fr}
.wb-grid-builder-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.wb-grid-builder-option-row{grid-template-columns:1fr 1.5fr 1.2fr .7fr;align-items:end;margin-top:8px}

.wb-card-soft-outline{border:var(--border-w) solid var(--warning-line)}
.wb-btn-between{justify-content:space-between}
.wb-title-strong{font-weight:800;margin-bottom:6px}
.wb-copy-tight{line-height:1.45}
.wb-copy-tight-15{line-height:1.5}
.wb-label-spacer{visibility:hidden}
.wb-input-min44{min-height:var(--control-min-h)}
.wb-form-zero{margin:0}
.wb-span-full{grid-column:1/-1}
.wb-summary-value{font-weight:700}
.wb-hidden-alert{display:none}
.wb-resize-vertical{resize:vertical}
.wb-photo-manager-hidden{margin-top:14px;display:none}
.wb-wizard-id{margin-left:auto}
@media (max-width: 900px){
  .wb-grid-12,
  .wb-grid-form-211,
  .wb-grid-form-140-auto,
  .wb-grid-form-3,
  .wb-grid-form-options,
  .wb-grid-form-add-option,
  .wb-grid-minlabel,
  .wb-grid-trade-row,
  .wb-grid-date-pair,
  .wb-grid-builder-options,
  .wb-grid-builder-option-row{grid-template-columns:1fr}
  .wb-wizard-id{margin-left:0}
}

.is-dragging{opacity:.55}
.wb-choice-list{display:grid;gap:var(--wb-choice-list-gap)}
.wb-choice-row{display:flex;gap:var(--space-2);align-items:center}

/* Auth/session access surfaces */
.auth-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:var(--auth-grid-gap);align-items:start;min-width:0;max-width:none}
.auth-card{background:var(--surface-1);border:var(--border-w) solid var(--component-border);border-radius:var(--auth-card-radius);box-shadow:var(--auth-card-shadow);padding:var(--auth-card-padding);overflow:hidden;overflow-wrap:anywhere;min-width:0}
.auth-card[id]{scroll-margin-top:calc(var(--header-h) + var(--space-6))}
.auth-card form{display:flex;flex-direction:column;gap:var(--auth-form-gap);min-width:0}
.auth-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;min-width:0}
.auth-card .notice{margin-top:var(--space-2)}
.auth-card label{font-weight:700;color:var(--text);line-height:1.35}

.auth-single{max-width:var(--auth-single-max);min-width:0}
.auth-card .input{width:100%;min-width:0}
.auth-card .muted{line-height:1.55}

/* Canonical auth surface: login, registration, reset, e-mail and phone verification. */
.auth-card .auth-intro{
  margin:0 0 var(--space-4);
  max-width:68ch;
}
.auth-card form > label{
  margin-top:var(--space-1);
}
.auth-card .auth-actions{
  margin-top:var(--space-4);
}
.auth-single > .auth-card{
  width:100%;
}
@media (max-width: 720px){
  .auth-single{
    padding-inline:var(--space-4);
  }
  .auth-card{
    padding:var(--space-5);
  }
  .auth-card .input,
  .auth-card textarea,
  .auth-card select{font-size:16px}
}
@media (max-width:900px){
  .auth-grid{grid-template-columns:1fr;gap:var(--space-4)}
  .auth-actions{flex-direction:column;align-items:stretch}
  .auth-actions .btn,.auth-card button.btn{width:100%;justify-content:center}
}

/* =========================================================
   Block 33: public marketplace UX surfaces
   Centralized former inline helpers for directory and detail pages.
   ========================================================= */
.wb-dir-search-btn{width:100%}
.wb-detail-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.1;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.wb-detail-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--marketplace-grid-gap);margin-top:var(--space-3)}
.wb-detail-fact{padding:var(--space-3);border:var(--border-w) solid var(--marketplace-fact-border);border-radius:var(--marketplace-card-radius);background:var(--marketplace-fact-bg)}
@media (max-width:680px){
  .wb-detail-title{-webkit-line-clamp:3;font-size:clamp(34px,9vw,56px)}
}
/* Block 40: Auftrag wizard canonical layout moved from inline view styles. */
.wb-hidden-panel{display:none}
.wb-wz-step{appearance:none;display:inline-flex;align-items:center;gap:var(--wizard-step-gap);min-height:var(--tap-target);padding:var(--wizard-step-pad-y) var(--wizard-step-pad-x);border-radius:var(--radius-pill);border:var(--border-w) solid var(--marketplace-card-border);background:var(--marketplace-card-bg-muted);color:inherit;cursor:pointer;font:inherit;font-size:var(--wizard-step-fs);line-height:1.2;user-select:none}
.wb-wz-step.active,.wb-wz-step[aria-current="step"]{background:var(--wizard-step-current-bg);border-color:var(--wizard-step-current-border)}
.wb-photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--space-3)}
.wb-photo-card{border:var(--border-w) solid var(--marketplace-card-border);border-radius:var(--marketplace-card-radius);padding:var(--space-3);background:var(--marketplace-card-bg-muted)}
.wb-photo-thumb-wrap{position:relative}
.wb-photo-thumb-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--component-radius-sm)}
.wb-photo-delete{position:absolute;top:var(--space-2);right:var(--space-2);border:0;border-radius:var(--radius-pill);width:var(--tap-target);height:var(--tap-target);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:var(--marketplace-lightbox-bg);color:var(--text);font-size:16px}
.wb-photo-primary-row{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-2) 0 var(--wizard-photo-primary-gap-bottom);font-weight:700}
.wb-photo-caption{resize:vertical;min-height:74px}
#wz_save_state{min-width:160px;text-align:right;opacity:.85}
.wb-wz-bottombar{position:sticky;bottom:var(--wizard-bottombar-offset);z-index:var(--z-overlay-local);padding:var(--space-2) 0 0;background:transparent;border:0;box-shadow:none}
.wb-step5-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:var(--space-4);align-items:start;max-width:none;width:100%}
.wb-step5-left,.wb-step5-right{display:grid;gap:var(--space-3);align-content:start}
.wb-step5-submit-card{margin-top:2px}
.wb-step5-main-actions,.wb-step5-upload-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.wb-step3-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.9fr);gap:var(--wizard-step3-gap);align-items:start}
.wb-summary-preview{position:sticky;top:84px;padding:var(--control-pad-x)}
.wb-wizard-page{min-height:var(--wizard-page-min-h)}
@media (max-width:980px){.wb-step5-layout,.wb-step3-layout{grid-template-columns:1fr}.wb-summary-preview{position:static}}
@media (max-width:740px){.wb-wz-step{font-size:var(--wizard-step-mobile-fs);min-height:var(--tap-target);padding:var(--wizard-step-mobile-pad-y) var(--wizard-step-mobile-pad-x);white-space:nowrap}.wb-wz-bottombar{bottom:0;padding:var(--wizard-bottombar-mobile-pad-y) 0 var(--wizard-bottombar-mobile-pad-bottom)}.wb-step5-main-actions,.wb-step5-upload-actions{flex-direction:column;align-items:stretch}.wb-step5-main-actions .btn,.wb-step5-main-actions form,.wb-step5-main-actions form .btn,.wb-step5-upload-actions .btn{width:100%}#wz_save_state{min-width:0;width:100%;text-align:left;order:-1}.wb-wizard-page{min-height:auto}}


/* Profile surfaces: canonical card/grid styles moved from inline view CSS. */
.profile-ads-grid{display:grid;grid-template-columns:1fr;gap:var(--marketplace-grid-gap);align-items:start}
.profile-ad-card{display:grid;grid-template-rows:auto 1fr;border:var(--border-w) solid var(--component-border);border-radius:var(--component-radius-lg);overflow:hidden;background:var(--surface-muted);max-width:var(--profile-side-width);width:100%;justify-self:start}
.profile-ad-thumb{display:block;background:var(--surface-muted)}
.profile-ad-thumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.profile-ad-placeholder{display:grid;place-items:center;aspect-ratio:16/10;color:var(--profile-ad-placeholder)}
.profile-ad-body{padding:var(--profile-ad-body-pad);display:grid;gap:var(--space-2)}
.profile-ad-title a{color:inherit;text-decoration:none;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.profile-ad-meta{display:flex;justify-content:space-between;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.profile-ad-actions{display:flex;justify-content:flex-end}
@media (min-width:620px){.profile-ads-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-ad-card{max-width:none}}
@media (min-width:980px){.profile-ads-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.profile-ads-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Public/profile unified surface. */
/* We rely on the global .wrap paddings for consistent desktop/tablet/mobile spacing. */
  .wbp-wrap{width:100%; max-width:100%; margin:0 auto; padding:0;}
  @media (max-width: 900px){ .wbp-wrap{max-width:100%; width:100%; padding:0;} }

  .wbp-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin: 18px 0 var(--space-3);}
  .wbp-head h1{margin:0;}

  .wbp-card{border:var(--border-w) solid var(--component-border); border-radius:var(--component-radius-lg); background:var(--surface-muted);}
  .wbp-card.pad{padding:var(--profile-gap);}

  .wbp-top{display:grid; grid-template-columns: 96px 1fr; gap:16px; align-items:start;}
  @media (max-width: 700px){ .wbp-top{grid-template-columns:1fr;} }

  .wbp-avatar{width:92px; height:92px; border-radius:var(--component-radius-lg); overflow:hidden; background:var(--surface-soft); border:var(--border-w) solid var(--component-border)}
  .wbp-avatar.is-clickable{cursor:pointer}
  .wbp-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

  /* Avatar vergrößern (gleicher UX wie bei Anzeigen: Klick -> Overlay) */
  .wbp-modal{position:fixed; inset:0; display:none; z-index:var(--z-lightbox)}
  .wbp-modal-backdrop{position:absolute; inset:0; background:var(--wbp-modal-backdrop)}
  .wbp-modal-body img{max-width:100%; max-height:100%; border-radius:var(--component-radius-lg); box-shadow:var(--wbp-modal-image-shadow)}
  .wbp-modal-close{position:absolute; top:var(--space-3); right:var(--space-3); width:var(--tap-target); height:var(--tap-target); border-radius:var(--radius-pill); border:var(--border-w) solid var(--btn-hover-border); background:var(--wbp-modal-close-bg); color:var(--text); font-size:26px; line-height:1; cursor:pointer;box-shadow:var(--component-shadow-float)}

  .wbp-name{font-size:26px; font-weight:750; line-height:1.1;}
  .wbp-pills{display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2);}
  .wbp-pill{display:inline-flex; align-items:center; gap:var(--space-2); padding:var(--pill-pad-y) var(--pill-pad-x); border-radius:var(--radius-pill); border:var(--border-w) solid var(--btn-secondary-border); background:var(--btn-secondary-bg); font-size:var(--table-fs);}
  .wbp-pill.ok{background:var(--success-soft); border-color:var(--success-line)}

  .wbp-actions{margin-top:var(--space-3);}
  .wbp-actions .box{padding:var(--control-pad-x); border:var(--border-w) solid var(--component-border); border-radius:var(--component-radius); background:var(--wbp-action-box-bg);}
  .wbp-actions .row{display:flex; gap:var(--space-2); flex-wrap:wrap;}

  .wbp-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--space-3); margin-top:var(--space-3);}
  @media (max-width: 900px){ .wbp-grid{grid-template-columns:1fr;} }

  .wbp-block{border:var(--border-w) solid var(--component-border); border-radius:var(--component-radius); padding:var(--control-pad-x); background:var(--surface-muted)}
  .wbp-block h3{margin:0 0 var(--space-2) 0; font-size:var(--table-fs); opacity:.9;}

  .wbp-kv{display:grid; gap:var(--space-2);}
  .wbp-kv .item{border:var(--border-w) solid var(--component-border); border-radius:var(--component-radius); padding:var(--space-3); background:var(--surface-muted)}
  .wbp-kv .k{font-size:var(--wbp-kv-key-fs); opacity:.75; margin-bottom:var(--wbp-kv-key-gap);}
  .wbp-kv .v{font-size:var(--wbp-kv-value-fs); word-break:break-word;}
  .wbp-avatar-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:.6;}
  .wbp-about{margin-top:var(--space-3);}
  .wbp-about-copy{white-space:pre-wrap; font-size:var(--wbp-about-copy-fs);}

  .wbp-muted{opacity:.75;}

/* Admin IA refinement: dense data surfaces.
   Header and horizontal navigation use the canonical shared nav contract above. */
body.admin .page-head{
  margin-bottom:var(--space-5);
  gap:var(--space-4);
}
body.admin .card,
body.admin .table-wrap,
body.admin .table-responsive{
  min-width:0;
}
body.admin .table th,
body.admin .admin-table th{
  font-size:var(--fs-small);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--table-head-fg);
}
body.admin .actions .btn,
body.admin .table-actions .btn{
  min-height:var(--account-action-min-h);
}

@media (max-width:720px){
  body.admin .page-head{flex-direction:column; align-items:stretch;}
  body.admin .page-head .btn,
  body.admin .toolbar .btn{width:100%; justify-content:center;}
  body.admin .table td.actions,
  body.admin .actions{justify-content:flex-start;}
}


/* Account IA refinement: usable data surfaces.
   Header and horizontal navigation use the canonical shared nav contract above. */
body.account .card,
body.account .table-wrap,
body.account .table-responsive{
  border:var(--border-w) solid var(--account-border);
  border-radius:var(--component-radius);
  background:var(--account-surface-bg);
}
body.account .filters,
body.account .filters-row,
body.account .wb-filterbar{
  gap:var(--account-filter-gap);
  align-items:end;
  margin-bottom:var(--account-section-gap);
}
body.account .table th{
  font-size:var(--fs-small);
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--table-head-fg);
}
body.account .actions .btn,
body.account .table-actions .btn{
  min-height:var(--account-action-min-h);
}

@media (max-width:720px){
  body.account .filters,
  body.account .filters-row,
  body.account .wb-filterbar{
    display:grid;
    grid-template-columns:1fr;
  }
  body.account .filters .btn,
  body.account .filters-row .btn,
  body.account .wb-filterbar .btn,
  body.account .actions .btn{
    width:100%;
    justify-content:center;
  }
}


/* Auftrag listing refinement: canonical filter layout and card affordance. */
.wb-filterbar{
  align-items:end;
}
.wb-filterbar label{
  display:block;
  margin-bottom:var(--filterbar-label-gap);
  font-size:var(--filterbar-label-fs);
  font-weight:800;
  letter-spacing:.02em;
  color:var(--muted);
}
.wb-filterbar .wb-filter-sort,
.wb-filterbar .wb-filter-region,
.wb-filterbar .wb-filter-zip{
  flex:1 1 180px;
  min-width:150px;
}
.wb-filterbar .wb-filter-submit{
  min-height:var(--control-min-h);
  align-self:end;
}
.wb-auftrag-card{
  display:block;
  text-decoration:none;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}
.wb-auftrag-card:hover,
.wb-auftrag-card:focus-visible{
  transform:translateY(-1px);
  border-color:var(--component-border-strong);
  background:var(--auftrag-card-hover-bg);
}
@media (max-width:720px){
  .wb-filterbar{
    display:grid;
    grid-template-columns:1fr;
  }
  .wb-filterbar .wb-filter-search,
  .wb-filterbar .wb-filter-sort,
  .wb-filterbar .wb-filter-region,
  .wb-filterbar .wb-filter-zip,
  .wb-filterbar .wb-filter-trade,
  .wb-filterbar .wb-filter-budget,
  .wb-filterbar .wb-filter-submit{
    width:100%;
    min-width:0;
  }
}

/* Invoice/document surfaces: canonical admin/account document tables and actions. */
.document-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  justify-content:flex-end;
}
.document-card .card-header{
  border-bottom:var(--border-w) solid var(--line);
}
.document-table .table-actions-col,
.document-table .table-actions{
  text-align:right;
  white-space:nowrap;
}
@media (max-width:720px){
  .document-actions{
    width:100%;
    justify-content:stretch;
  }
  .document-actions .btn,
  .document-table .table-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Admin finance purchase/refund surface: canonical dangerous actions and responsive table behavior. */
.admin-finance-card .card-subtitle{
  max-width:760px;
}
.admin-finance-action{
  padding:var(--finance-action-padding);
  border:var(--border-w) solid var(--finance-border);
  border-radius:var(--finance-action-radius);
  background:var(--finance-surface-bg-strong);
}
.admin-finance-action-secondary{
  background:var(--finance-surface-bg);
}
.admin-refund-action{
  border-color:var(--finance-danger-border);
  background:var(--finance-danger-bg);
}
.admin-refund-action .form-row{
  gap:var(--space-2);
}
.admin-danger-confirm{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  padding:var(--space-3);
  border:var(--border-w) solid var(--finance-danger-border);
  border-radius:var(--finance-action-radius);
  background:var(--finance-danger-bg);
  color:var(--text);
  font-size:var(--table-fs);
  line-height:1.35;
}
.admin-danger-confirm input{
  margin-top:var(--space-1);
  flex:0 0 auto;
}
@media (max-width:720px){
  .admin-finance-action .btn,
  .admin-refund-action .btn{
    width:100%;
    justify-content:center;
  }
}


/* Upload surfaces: canonical spacing and mobile-friendly file controls. */
.upload-form{
  display:grid;
  gap:var(--space-4);
}
.upload-field{
  display:grid;
  gap:var(--upload-field-gap);
}
.upload-field .label{
  margin:0;
}
.upload-form input[type="file"].input{
  min-height:var(--upload-file-min-h);
  padding-top:var(--space-2);
}
@media (max-width:720px){
  .upload-form .auth-actions{
    width:100%;
    display:grid;
    gap:var(--space-2);
  }
  .upload-form .auth-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* Admin E-Mail surface: canonical forms, badges and responsive tables. */
.admin-email-grid{
  align-items:start;
}
.admin-email-card .h2{
  margin-bottom:var(--space-2);
}
.admin-email-form{
  display:grid;
  gap:var(--space-2);
}
.admin-email-form .label,
.admin-email-form label{
  font-weight:700;
  color:var(--text);
}
.admin-email-check{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--admin-email-check-min-h);
  padding:var(--admin-email-check-pad-y) var(--admin-email-check-pad-x);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius-sm);
  background:var(--surface-muted);
  white-space:nowrap;
}
.admin-email-check input{
  margin:0;
}
@media (max-width:720px){
  .admin-email-grid{
    grid-template-columns:1fr;
  }
  .admin-email-form .btn,
  .admin-email-card .btn{
    width:100%;
    justify-content:center;
  }
  .admin-email-check{
    width:100%;
    justify-content:flex-start;
  }
}

/* Notifications inbox: canonical account notification actions */
.notification-action-form{display:inline-flex;margin:0;justify-content:flex-end}
.note-text{line-height:1.55;color:var(--muted)}
.note .notification-action-form{margin-left:auto}
@media (max-width:640px){
  .notification-action-form{display:flex;width:100%}
  .notification-action-form .btn{width:100%}
  .note-top{flex-direction:column;align-items:stretch}
}

/* Company verification: admin/account canonical surface */
.admin-verification-head{align-items:flex-start;gap:var(--space-4)}
.admin-filter-card{padding:var(--admin-panel-padding)}
.admin-filter-form{display:grid;grid-template-columns:minmax(180px,240px) minmax(260px,1fr) auto;gap:var(--admin-filter-gap);align-items:end}
.admin-filter-form .field-label{display:grid;gap:var(--space-2);color:var(--muted);font-size:var(--admin-filter-label-fs)}
.admin-filter-actions{display:flex;gap:var(--admin-filter-gap);align-items:center;justify-content:flex-end;flex-wrap:wrap}
.admin-verification-card .table-actions,.verification-table .table-actions{text-align:right;white-space:nowrap}
.admin-verification-detail-card,.admin-verification-action-card{border-radius:var(--component-radius);box-shadow:var(--component-shadow)}
.admin-verification-detail-card>div:not(.h2):not(.hr),.admin-verification-action-card>div:not(.h2):not(.hr){margin-top:var(--space-2)}
.verification-doc-actions .btn{min-height:var(--control-min-h)}
.confirm-row{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3);border:var(--border-w) solid var(--admin-confirm-border);border-radius:var(--component-radius);background:var(--admin-confirm-bg);color:var(--text);font-size:var(--table-fs);line-height:1.45}
.confirm-row input{margin-top:3px;flex:0 0 auto}
.danger-confirm-row{border-color:var(--admin-confirm-danger-border);background:var(--admin-confirm-danger-bg)}
@media (max-width: 760px){
  .admin-verification-head{display:grid}
  .admin-verification-head .btn{width:100%;justify-content:center}
  .admin-filter-form{grid-template-columns:1fr}
  .admin-filter-actions{justify-content:stretch}
  .admin-filter-actions .btn{width:100%;justify-content:center}
  .verification-doc-actions{display:grid;grid-template-columns:1fr;gap:var(--space-2)}
  .verification-doc-actions .btn,.admin-verification-action-card form .btn{width:100%;justify-content:center}
  .verification-table .table-actions{text-align:left}
}

/* Account favorites surface: favorite-specific actions only.
   Purchase/contact actions are canonical in Block 94. */
.account-favorites-card .table td{
  vertical-align:middle;
}
.account-favorite-remove-form{
  display:inline-flex;
  align-items:center;
  margin-left:.35rem;
}
@media (max-width: 720px){
  .account-favorites-table-wrap table{
    min-width:720px;
  }
  .account-favorite-remove-form,
  .account-favorite-remove-form .btn{
    width:100%;
  }
}

/* Admin CMS pages: canonical IA/actions and safer destructive controls. */
.admin-cms-head .page-head-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
.admin-cms-card .table td{vertical-align:middle}
.cms-page-url{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.92em;color:var(--muted);background:var(--admin-code-bg);border:var(--border-w) solid var(--admin-code-border);border-radius:var(--radius-pill);padding:.18rem .5rem;margin-right:.35rem}
.admin-cms-trash-form{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;flex-wrap:nowrap}
.danger-inline-confirm{display:inline-flex;align-items:center;gap:var(--space-2);font-size:.78rem;font-weight:700;color:var(--err);white-space:nowrap;cursor:pointer}
.danger-inline-confirm input{accent-color:var(--err)}
@media (max-width: 720px){
  .admin-cms-head{align-items:stretch}
  .admin-cms-head .page-head-actions,.admin-cms-head .page-head-actions .btn{width:100%;justify-content:center}
  .admin-cms-card table{min-width:var(--admin-cms-table-min)}
  .admin-cms-trash-form{gap:.5rem}
}

/* =========================================================
   Canonical CSS component layer
   Single visual contract for buttons, cards, forms, tables, notices and badges.
   Markup should use .btn + .btn-primary/.btn-secondary/.btn-danger/.btn-success.
   ========================================================= */

.btn,
a.btn,
button.btn,
input.btn[type=submit],
input.btn[type=button],
input.btn[type=reset],
.btn-primary,
a.btn-primary{
  appearance:none;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:var(--tap-target);
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border:var(--btn-border-w) solid var(--btn-secondary-border);
  border-radius:var(--btn-radius);
  background:var(--btn-secondary-bg);
  color:var(--text);
  font-weight:800;
  font-size:var(--table-fs);
  line-height:1.1;
  text-decoration:none;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  transition:var(--btn-transition);
}
.btn:active,
a.btn:active,
button.btn:active{
  transform:translateY(1px);
}
.btn:hover,
a.btn:hover,
button.btn:hover{
  background:var(--btn-secondary-bg-hover);
  border-color:var(--btn-hover-border);
  color:var(--text);
  text-decoration:none;
}
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
input.btn.btn-primary[type=submit],
input.btn.btn-primary[type=button],
.btn-primary,
a.btn-primary{
  background:var(--btn-primary-bg);
  color:var(--text);
  border-color:var(--btn-primary-border);
}
.btn.btn-primary:hover,
a.btn.btn-primary:hover,
button.btn.btn-primary:hover,
input.btn.btn-primary[type=submit]:hover,
input.btn.btn-primary[type=button]:hover,
.btn-primary:hover,
a.btn-primary:hover{
  background:var(--btn-primary-bg-hover);
  color:var(--text);
  text-decoration:none;
}
.btn.btn-secondary,
a.btn.btn-secondary,
button.btn.btn-secondary,
.btn-ghost,
a.btn-ghost,
button.btn-ghost{
  background:var(--btn-secondary-bg);
  color:var(--text);
  border-color:var(--btn-secondary-border);
}
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover,
button.btn.btn-secondary:hover,
.btn-ghost:hover,
a.btn-ghost:hover,
button.btn-ghost:hover{
  background:var(--btn-secondary-bg-hover);
  border-color:var(--btn-hover-border);
}
.btn.btn-danger,
a.btn.btn-danger,
button.btn.btn-danger{
  background:var(--danger-bg);
  color:var(--text);
  border-color:var(--btn-danger-border);
}
.btn.btn-danger:hover,
a.btn.btn-danger:hover,
button.btn.btn-danger:hover{
  filter:brightness(1.08);
}
.btn.btn-success,
a.btn.btn-success,
button.btn.btn-success{
  background:var(--success-bg);
  color:var(--text);
  border-color:var(--btn-success-border);
}
.btn.btn-success:hover,
a.btn.btn-success:hover,
button.btn.btn-success:hover{
  filter:brightness(1.08);
}

.input,
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=url],
input[type=search],
input[type=tel],
input[type=date],
input[type=time],
input[type=file],
input[type=color],
select,
textarea{
  background:var(--input-bg);
  color:var(--text);
  border:var(--border-w) solid var(--input-border);
  border-radius:var(--radius-input);
  padding:var(--input-padding-y) var(--input-padding-x);
  min-height:var(--control-min-h);
  width:100%;
  box-sizing:border-box;
  outline:none;
  appearance:none;
  transition:var(--form-control-transition);
}
textarea{min-height:var(--form-textarea-min-h);resize:vertical}
select{
  cursor:pointer;
}
select option, select optgroup{
  background:var(--input-bg);
  color:var(--text);
}
input::placeholder,
textarea::placeholder{
  color:var(--muted);
}
.input:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:var(--focus-color);
  box-shadow:var(--focus-shadow);
}

.table,
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:var(--table-fs);
}
.table th,
.table td,
th,
td{
  padding:var(--table-py) var(--table-px);
  border-bottom:var(--table-border-w) solid var(--line);
  vertical-align:top;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
}
.table th,
th{
  color:var(--table-head-fg);
  font-weight:800;
  background:var(--table-sticky-bg);
}
.table-actions,
.table td.actions,
td.table-actions{
  white-space:normal;
}
.table .btn,
.table-actions .btn,
td.actions .btn{
  min-height:var(--table-action-min-h);
}

.notice,
.alert{
  display:block;
  width:100%;
  padding:var(--notice-padding-y) var(--notice-padding-x);
  border:var(--border-w) solid var(--notice-border);
  border-radius:var(--notice-radius);
  background:var(--surface-muted);
  color:var(--text);
  overflow-wrap:anywhere;
  hyphens:auto;
}
.notice :where(a),
.alert :where(a){
  color:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px;
}
.notice[hidden],
.alert[hidden],
.notice + .notice,
.alert + .alert,
.notice + .alert,
.alert + .notice{
  margin-top:var(--space-3);
}
.notice-info{border-color:var(--info-line);background:var(--info-soft);color:var(--info)}
.notice-success{border-color:var(--success-line);background:var(--success-soft);color:var(--ok)}
.notice-warning,
.notice.warning,
.alert.warn,
.alert.warning,
.warn,
.warning,
.bd-warn{border-color:var(--warning-line);background:var(--warning-soft);color:var(--warn)}
.notice-danger,
.alert.danger{border-color:var(--danger-line);background:var(--danger-soft);color:var(--err)}
.icon-action.danger,
.state-danger,
.is-danger{background:var(--danger-soft)}
tr.danger{background:var(--danger-soft)}
tr.danger > :where(th,td){border-bottom-color:var(--danger-line)}

.badge,
.nbadge,
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--badge-gap);
  min-width:0;
  max-width:100%;
  min-height:var(--badge-min-h);
  padding:var(--badge-padding-y) var(--badge-padding-x);
  border:var(--border-w) solid var(--btn-secondary-border);
  border-radius:var(--badge-radius);
  background:var(--btn-secondary-bg);
  color:var(--text);
  font-size:var(--table-fs);
  font-weight:700;
  line-height:1.15;
  white-space:nowrap;
  overflow-wrap:anywhere;
  word-break:normal;
}
.pill,
.profile-pill,
.wbp-pill{
  min-width:0;
  max-width:100%;
  border-radius:var(--badge-radius);
  overflow-wrap:anywhere;
  word-break:normal;
}
.badge-success{border-color:var(--success-line);color:var(--ok);background:var(--success-soft)}
.badge-warning{border-color:var(--warning-line);color:var(--warn);background:var(--warning-soft)}
.badge-danger{border-color:var(--danger-line);color:var(--err);background:var(--danger-soft)}
.badge-info,
.badge.badge-info{border-color:var(--info-line);color:var(--info);background:var(--info-soft)}
.badge-secondary{border-color:var(--btn-secondary-border);color:var(--text);background:var(--btn-secondary-bg)}
.badge-gray{border-color:var(--badge-gray-border);color:var(--badge-gray-text);background:var(--badge-gray-bg)}
.table .badge,
.document-table .badge,
.account-payments-table .badge,
.wb-order-price-row .badge{
  max-width:100%;
  white-space:normal;
}
.badge-wrap,
.profile-badges,
.wbp-pills{
  gap:var(--space-2);
  flex-wrap:wrap;
}

.notif{position:relative}
.notif .nbadge{
  position:absolute;
  top:var(--notification-badge-offset);
  right:var(--notification-badge-offset);
  min-width:var(--notification-badge-size);
  height:var(--notification-badge-size);
  padding:0 var(--notification-badge-pad-x);
  border-color:var(--danger-line);
  background:var(--danger-soft);
  color:var(--err);
  font-size:var(--notification-badge-fs);
  line-height:var(--notification-badge-size);
}

@media (max-width:640px){
  .badge,
  .nbadge,
  .tag,
  .pill,
  .profile-pill,
  .wbp-pill{
    white-space:normal;
    text-align:center;
  }
}


/* =========================================================
   Block 20: desktop layout audit for admin/account/table surfaces
   Contextual admin toolbars must stay visible; the global header is navigation,
   while .editorbar carries page-local actions such as back links and exports.
   ========================================================= */
body.admin .page > .wrap,
body.account .page > .wrap{
  max-width:none;
}
body.admin .editorbar{
  display:flex;
  gap:var(--admin-editorbar-gap);
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  margin:0 0 var(--admin-editorbar-margin-bottom);
  padding:var(--admin-editorbar-padding);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius);
  background:var(--surface-muted);
}
body.admin .editorbar .btn{
  min-height:var(--admin-editorbar-btn-min-h);
}
.admin-report-table-wrap table{
  min-width:var(--admin-report-table-min);
}
.admin-report-detail-table-wrap table{
  min-width:var(--admin-report-detail-table-min);
}
@media (min-width:1181px){
  body.admin .page-head,
  body.account .page-head{
    align-items:flex-start;
  }
  body.admin .table-wrap,
  body.account .table-wrap{
    scrollbar-gutter:stable;
  }
}
@media (max-width:720px){
  body.admin .editorbar{
    display:grid;
    grid-template-columns:1fr;
  }
  body.admin .editorbar .btn{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   Block 21: mobile/tablet layout audit for navigation, forms, tables and modals
   Keep the authenticated admin/account UI usable on portrait devices without changing JS hooks.
   ========================================================= */
@media (max-width:740px){
  .topbar-inner{
    justify-content:stretch;
  }
  .topbar-actions{
    width:100%;
    justify-content:stretch;
    gap:var(--space-2);
  }
  .topbar-actions > a:not(.notif),
  .topbar-actions > form{
    flex:1 1 0;
    min-width:0;
  }
  .topbar-actions > form .btn{
    width:100%;
  }
  .topbar-actions .notif{
    flex:0 0 var(--topbar-notif-size);
    width:var(--topbar-notif-size);
    min-width:var(--topbar-notif-size);
    padding-left:0;
    padding-right:0;
  }
  header.top .bar{
    gap:var(--space-2);
  }
  .logo{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .burger{
    min-height:var(--tap-target);
    flex:0 0 auto;
  }
}

@media (max-width:480px){
  .topbar-inner{
    justify-content:center;
  }
  .topbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-2);
  }
  .topbar-actions .btn,
  .topbar-actions form,
  .topbar-actions form .btn{
    width:100%;
  }
}

@media (max-width:360px){
  .topbar-actions{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .mobile-drawer .list a,
  .mobile-drawer .list button.has-sub{
    min-height:48px;
    display:flex;
    align-items:center;
  }
  .mobile-drawer .sub{
    padding-left:0;
  }
  .mobile-drawer .sub a{
    margin-left:var(--space-3);
  }
}

@media (max-width:720px){
  .page-head,
  .toolbar,
  .card-header,
  .note-top{
    flex-direction:column;
    align-items:stretch;
  }
  .page-head-actions,
  .toolbar-left,
  .toolbar-right,
  .card-header-actions{
    width:100%;
    align-items:stretch;
  }
  .page-head-actions > .btn,
  .page-head-actions > a.btn,
  .toolbar-left > .btn,
  .toolbar-right > .btn,
  .card-header-actions > .btn,
  .card-header-actions > a.btn{
    width:100%;
  }
  .filters,
  .wb-filterbar,
  .wb-orders-filters{
    width:100%;
  }
  .filters select,
  .filters input,
  .toolbar select,
  .toolbar input,
  .wb-filterbar select,
  .wb-filterbar input{
    min-width:0;
  }
}

@media (max-width:560px){
  input,
  select,
  textarea,
  button,
  .btn{
    max-width:100%;
  }
}

/* =========================================================
   Block 17: mobile portrait QA — canonical touch/action behavior
   Keep existing JS hooks intact; only normalize mobile layout and overflow.
   ========================================================= */
@media (max-width:640px){
  button,
  .btn,
  a.btn,
  input.btn[type=submit],
  input.btn[type=button],
  input.btn[type=reset]{
    min-height:var(--tap-target);
    white-space:normal;
    text-align:center;
  }

  .form-actions,
  .card-footer,
  .empty-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    justify-content:stretch;
    align-items:stretch;
  }

  .form-actions .btn,
  .card-footer .btn,
  .empty-actions .btn,
  .form-actions button,
  .form-actions input[type=submit],
  .form-actions form,
  .card-footer form,
  .empty-actions form{
    width:100%;
    justify-content:center;
  }

}


/* =========================================================
   Block 11: responsive layout pass — canonical mobile table actions
   ========================================================= */
@media (max-width:740px){
  .table-actions-col{
    text-align:left;
  }

  td.table-actions,
  .table td.actions{
    min-width:160px;
    text-align:left;
  }

  td.table-actions > .btn,
  td.table-actions > a,
  td.table-actions > button,
  td.table-actions > form,
  .table td.actions > .btn,
  .table td.actions > a,
  .table td.actions > button,
  .table td.actions > form{
    width:100%;
    margin:4px 0;
    justify-content:center;
  }

  td.table-actions .account-payments-actions,
  td.table-actions .document-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-2);
    width:100%;
  }
}

/* =========================================================
   Block 8: canonical frontend/design-system consolidation
   Purpose: final cascade contract for public/account/admin UI.
   Keep existing JS hooks intact; normalize visual components only.
   ========================================================= */
/* Surfaces: one canonical card/panel language across views. */
.card,
.ds-card,
.panel,
.auth-card,
.profile-card,
.kontakt-card,
.service-card,
.document-card,
.doc-card,
.invoice-card,
.invoice-box,
.verification-doc-card,
.admin-email-card,
.admin-cms-card,
.admin-finance-card,
.admin-filter-card,
.admin-verification-card,
.admin-verification-detail-card,
.admin-verification-action-card,
.wb-wz-panel,
.wbp-card,
.wb-order-card,
.wb-orders-cta-card,
.account-favorites-card,
.profile-ad-card{
  background:var(--surface-1);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius);
  box-shadow:var(--component-shadow);
  color:var(--text);
  min-width:0;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.card.soft,
.wb-card-soft-outline{
  background:var(--surface-muted);
}

.wb-card-dashed,
.empty{
  border-style:dashed;
  background:var(--surface-muted);
}

/* Buttons: normalize legacy aliases without changing class names/hooks. */
.btn-sm,
.btn.btn-sm,
a.btn.btn-sm,
button.btn.btn-sm{
  min-height:var(--btn-sm-min-h);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--component-radius-sm);
  font-size:var(--table-fs);
}


/* Accessible skip link: hidden until keyboard focus. */
.skip-link{
  position:fixed;
  top:var(--skip-link-offset);
  left:var(--skip-link-offset);
  z-index:var(--z-toast);
  transform:translateY(-160%);
  opacity:0;
  pointer-events:none;
  padding:var(--space-2) var(--btn-pad-x);
  border:var(--border-w) solid var(--focus-color);
  border-radius:var(--radius-sm);
  background:var(--panel);
  color:var(--text);
  font-weight:800;
  text-decoration:none;
  box-shadow:var(--focus-shadow);
}
.skip-link:focus,
.skip-link:focus-visible{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
  outline:none;
}

/* Unified focus/hover/disabled states. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:none;
  border-color:var(--focus-color);
  box-shadow:var(--focus-shadow);
}
.input:disabled,
button:disabled,
.btn:disabled,
input:disabled,
select:disabled,
textarea:disabled,
[aria-disabled="true"]{
  opacity:var(--disabled-opacity);
  cursor:not-allowed;
}
.input:disabled,
input:disabled,
select:disabled,
textarea:disabled{
  box-shadow:none;
}
.btn:disabled,
button.btn:disabled,
input.btn:disabled,
.btn[aria-disabled="true"],
.btn.disabled{
  pointer-events:none;
  transform:none;
  box-shadow:none;
}
a[aria-disabled="true"],
.btn[aria-disabled="true"],
.icon-action[aria-disabled="true"]{
  pointer-events:none;
}

textarea.input,
textarea{
  line-height:1.45;
}
.filters,
.wb-filterbar,
.filters-row,
.wb-orders-filters{
  gap:var(--space-3);
}

/* Tables: canonical readable desktop + scrollable mobile/tablet rules live in the component layer. */


/* Modal/dropdown visual contract is defined in the canonical component rules above. */

/* Desktop: clean grid width and readable admin/account surfaces. */
@media (min-width:1181px){
  .card-header-actions,
  .page-head-actions,
  .toolbar-right{
    justify-content:flex-end;
  }
}

/* Tablet/mobile: app-like stacked controls, no squeezed desktop UI. */
@media (max-width:820px){
  .form-row,
  .grid2,
  .grid-2,
  .grid.cols-2,
  .grid.cols-3,
  .kontakt-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  h1{font-size:clamp(24px, 8vw, var(--fs-h1));}
  h2{font-size:clamp(18px, 6vw, 22px);}
  .page-head,
  .toolbar,
  .card-header,
  .row-between,
  .note-top{
    align-items:stretch;
  }
  .btn,
  a.btn,
  button.btn,
  input.btn[type=submit],
  input.btn[type=button],
  input.btn[type=reset]{
    overflow-wrap:anywhere;
    hyphens:auto;
  }
  .filters > div,
  .wb-filterbar > *,
  .filters-row > *,
  .wb-orders-filters > *{
    width:100%;
    max-width:100%;
  }
  .filters .btn,
  .wb-filterbar .btn,
  .filters-row .btn,
  .wb-orders-filters .btn{
    width:100%;
  }
}


/* Block 8.12: motion accessibility contract. Keep interactions premium without forcing motion. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .btn:active,
  a.btn:active,
  button.btn:active{
    transform:none;
  }
}

/* =========================================================
   Block 8.13: canonical hook-backed surfaces
   Scope: only classes already used by views/JS, no hook renames.
   ========================================================= */
.cms-form,
.verification-filter-form,
.verification-upload-form{
  display:grid;
  gap:var(--space-form);
  min-width:0;
}

.card-inner{
  padding:var(--space-card);
}

.js-block-dropzone{
  border:var(--border-w) dashed var(--component-border);
  border-radius:var(--component-radius);
  background:var(--surface-muted);
  padding:var(--space-3);
  min-height:var(--tap-target);
}

.js-block-dropzone:empty::before{
  content:"Fragen hier ablegen";
  color:var(--muted);
  font-size:var(--fs-small);
}

.js-card-sort{
  white-space:normal;
  overflow-wrap:anywhere;
}

.account-favorite-remove-btn{
  min-width:var(--tap-target);
}

.wb-hidden-alert[hidden]{
  display:none;
}

.cookie-actions,
.cookie-options{
  gap:var(--space-3);
  flex-wrap:wrap;
}

@media (max-width:740px){
  .cookie-actions,
  .cookie-options{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }

  .cookie-actions .btn,
  .cookie-options label{
    width:100%;
  }

  .js-block-dropzone{
    padding:var(--space-2);
  }
}


/* =========================================================
   Block 10: frontend CSS debt cleanup
   Scope: move static maintenance styling out of the view and give
   real view classes a canonical CSS contract without changing hooks.
   ========================================================= */
.admin-page{
  display:grid;
  gap:var(--space-4);
  min-width:0;
}

.verification-doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--space-4);
  min-width:0;
}

.maint-wrap{
  min-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--maint-wrap-pad-y) var(--maint-wrap-pad-x);
}
.maint-bg{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 600px at 20% 10%, var(--maint-orb-primary), transparent 60%),
    radial-gradient(900px 500px at 80% 80%, var(--maint-orb-secondary), transparent 55%),
    linear-gradient(180deg, var(--maint-bg) 0%, var(--maint-bg-end) 100%);
  z-index:var(--z-below);
}
.maint-card{
  max-width:760px;
  width:100%;
  border-radius:var(--radius-xl);
  padding:var(--maint-card-pad-y) var(--maint-card-pad-x);
  background:var(--maint-card-bg);
  border:var(--border-w) solid var(--maint-card-border);
  backdrop-filter:blur(10px);
  box-shadow:var(--maint-card-shadow);
  color:var(--maint-text);
}
.maint-title{
  font-size:clamp(28px,5vw,40px);
  line-height:1.1;
  margin:0 0 var(--space-2);
  letter-spacing:-.02em;
  color:var(--maint-text);
}
.maint-text{
  font-size:var(--fs-lg);
  line-height:1.55;
  opacity:.9;
  margin:0;
  color:var(--maint-text);
  overflow-wrap:anywhere;
}
.maint-meta{
  margin-top:var(--maint-section-gap);
  font-size:var(--table-fs);
  opacity:.75;
  display:flex;
  gap:var(--shell-topbar-actions-gap);
  align-items:center;
  flex-wrap:wrap;
}
.maint-pill{
  display:inline-flex;
  gap:var(--space-2);
  align-items:center;
  padding:var(--maint-pill-pad-y) var(--maint-pill-pad-x);
  border-radius:var(--radius-pill);
  background:var(--maint-pill-bg);
  border:var(--border-w) solid var(--maint-pill-border);
  overflow-wrap:anywhere;
}
.maint-hr{
  height:var(--border-w);
  background:var(--maint-divider);
  margin:var(--maint-section-gap) 0 var(--maint-inline-offset);
}
.maint-lock{
  position:fixed;
  left:var(--maint-inline-offset);
  top:50%;
  transform:translateY(-50%);
  z-index:var(--z-overlay-local);
}
.maint-lock button{
  width:var(--tap-target);
  height:var(--tap-target);
  border-radius:var(--radius-input);
  border:var(--border-w) solid var(--maint-control-border);
  background:var(--maint-control-bg);
  color:var(--maint-text);
  backdrop-filter:blur(8px);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--maint-lock-shadow);
}
.maint-lock button:hover{background:var(--maint-control-bg-hover);}
.maint-drawer{
  position:fixed;
  left:-360px;
  top:0;
  height:100%;
  width:340px;
  max-width:calc(100vw - (var(--modal-viewport-gap) * 2));
  z-index:var(--z-overlay-raised);
  background:var(--maint-drawer-bg);
  border-right:var(--border-w) solid var(--maint-card-border);
  backdrop-filter:blur(10px);
  transition:left .22s ease;
  box-shadow:var(--maint-drawer-shadow);
  padding:var(--maint-section-gap) var(--space-4);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.maint-drawer.open{left:0;}
.maint-drawer h3{margin:6px 0 10px;font-size:var(--fs-lg);}
.maint-drawer p{margin:0 0 var(--maint-inline-offset);opacity:.85;font-size:var(--maint-drawer-text-fs);line-height:1.45;}
.maint-drawer .input{width:100%;}
.maint-drawer .btn{width:100%;}
.maint-drawer .close{
  position:absolute;
  right:12px;
  top:10px;
  background:transparent;
  border:0;
  color:var(--maint-text);
  opacity:.75;
  font-size:var(--fs-lg);
  cursor:pointer;
  min-width:40px;
  min-height:40px;
}
.maint-drawer .close:hover{opacity:1;}
.maint-overlay{
  position:fixed;
  inset:0;
  background:var(--maint-overlay-bg);
  z-index:var(--z-overlay-local);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.maint-overlay.open{opacity:1;pointer-events:auto;}
.maint-brand-row{margin-bottom:var(--maint-inline-offset);}
.maint-brand-mark{
  width:42px;
  height:42px;
  border-radius:var(--radius-input);
  background:var(--maint-control-bg);
  border:var(--border-w) solid var(--maint-divider);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:-.02em;
}
.maint-brand-site{font-size:var(--table-fs);opacity:.85;}
.maint-brand-sub{font-size:var(--maint-brand-sub-fs);opacity:.65;}

@media (max-width:640px){
  .verification-doc-grid{grid-template-columns:1fr;}
  .maint-wrap{padding:var(--shell-mobile-block-pad-y) var(--pad-mobile);}
  .maint-card{padding:var(--shell-mobile-card-pad-y) var(--shell-mobile-card-pad-x);}
  .maint-meta{display:grid;grid-template-columns:1fr;align-items:stretch;}
  .maint-pill{justify-content:center;text-align:center;}
  .maint-lock{left:var(--shell-mobile-safe-inset);top:auto;bottom:var(--shell-mobile-safe-inset);transform:none;}
}


/* =========================================================
   Block 11: canonical JS interaction safety
   Scope: make dropdown/modal/action surfaces resilient without renaming hooks.
   ========================================================= */
[data-wb-submit-locked="1"]{
  cursor:progress;
}

[data-wb-submit-locked="1"] button[aria-disabled="true"],
[data-wb-submit-locked="1"] input[aria-disabled="true"]{
  cursor:progress;
}

/* =========================================================
   Block 15: admin table/action consistency
   Scope: unify admin report table actions and keep admin controls
   readable on desktop/tablet/mobile without changing JS hooks.
   ========================================================= */
body.admin .filters,
body.admin .admin-filter-form{
  align-items:end;
}

body.admin .table-actions,
body.admin td.table-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  min-width:0;
}

body.admin td.table-actions .btn,
body.admin td.table-actions a.btn,
body.admin td.table-actions button.btn{
  white-space:nowrap;
}

@media (max-width:720px){
  body.admin .filters,
  body.admin .admin-filter-form{
    align-items:stretch;
  }

  body.admin .table-actions,
  body.admin td.table-actions{
    justify-content:flex-start;
  }

  body.admin td.table-actions .btn,
  body.admin td.table-actions a.btn,
  body.admin td.table-actions button.btn{
    flex:1 1 120px;
    justify-content:center;
  }
}


/* Block 16: admin finance table consistency.
   Keeps payment/refund hooks intact while making long finance data readable. */
.admin-purchases-table .admin-purchase-buyer,
.admin-purchases-table .admin-purchase-title{
  overflow-wrap:anywhere;
  word-break:normal;
}
.admin-purchases-table .admin-purchase-document-actions{
  min-width:120px;
}
.admin-purchases-table .admin-purchase-refund-cell{
  min-width:260px;
}
.admin-purchases-table .admin-purchase-refund-cell .muted,
.admin-purchases-table .admin-purchase-refund-cell .small{
  overflow-wrap:anywhere;
}
@media (max-width:720px){
  .admin-purchases-table .admin-purchase-document-actions{
    justify-content:flex-start;
  }
  .admin-purchases-table .admin-purchase-document-actions .btn{
    width:100%;
    justify-content:center;
  }
  .admin-purchases-table .admin-purchase-refund-cell{
    min-width:280px;
  }
}

/* Block 17: admin invoice and report document table consistency.
   Keeps finance routes/actions unchanged while aligning long document data with the canonical table system. */
.document-table .admin-document-number,
.document-table .admin-document-reference,
.document-table .admin-document-customer,
.admin-report-detail-table-wrap .admin-report-item-title,
.admin-report-detail-table-wrap .admin-report-item-customer,
.admin-report-detail-table-wrap .admin-report-stripe-id{
  overflow-wrap:anywhere;
  word-break:normal;
}
.document-table .admin-document-customer{
  min-width:160px;
}
.document-table .admin-document-number,
.document-table .admin-document-reference{
  min-width:112px;
}
.admin-report-detail-table-wrap .admin-report-item-title{
  min-width:220px;
}
.admin-report-detail-table-wrap .admin-report-item-customer{
  min-width:160px;
}
.admin-report-detail-table-wrap .admin-report-stripe-id{
  max-width:220px;
}
@media (max-width:720px){
  .document-table .admin-document-customer,
  .admin-report-detail-table-wrap .admin-report-item-customer{
    min-width:180px;
  }
  .document-table .admin-document-number,
  .document-table .admin-document-reference{
    min-width:132px;
  }
  .admin-report-detail-table-wrap .admin-report-item-title{
    min-width:240px;
  }
  .admin-report-detail-table-wrap .admin-report-stripe-id{
    max-width:260px;
  }
}

/* =========================================================
   Block 18: account table/action consistency
   Keep account-facing tables aligned with the canonical action-cell system.
   ========================================================= */
.account-favorites-table-wrap table,
.account-notifications-table-wrap table{
  min-width:var(--account-list-table-min);
}
.account-favorites-actions{
  min-width:0;
}
.account-favorites-actions .btn,
.account-favorites-actions form{
  flex:0 0 auto;
}
.account-notifications-table td,
.account-favorites-table-wrap td{
  vertical-align:middle;
}
@media (max-width:720px){
  .account-favorites-table-wrap table,
  .account-notifications-table-wrap table{
    min-width:var(--account-list-table-mobile-min);
  }
  .account-favorites-actions{
    justify-content:flex-start;
  }
  .account-favorites-actions .btn,
  .account-favorites-actions form{
    width:auto;
    max-width:100%;
  }
  .account-favorites-actions .account-favorite-remove-btn{
    width:var(--tap-target);
    min-width:var(--tap-target);
  }
}

/* =========================================================
   Block 19: public marketplace/card/filter consistency
   Purpose: canonical public card rhythm, long German word safety and mobile CTA layout.
   ========================================================= */
.hero-left,
.hero-right,
.marketplace-card-grid > *,
body.home .feature-card,
.wb-auftrag-card{
  min-width:0;
}
.minh-260{
  min-height:260px;
}
.marketplace-card-grid .row-between,
.wb-auftrag-card,
body.home .feature-card{
  overflow-wrap:anywhere;
  hyphens:auto;
}
.marketplace-card-grid .actions,
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  align-items:center;
}
.marketplace-card-grid .actions .muted{
  flex:1 1 220px;
  min-width:0;
  line-height:1.45;
}
.service-card{
  min-height:100%;
}
@media (max-width:820px){
  .hero-left,
  .hero-right{
    width:100%;
  }
  .minh-260{
    min-height:0;
  }
}
@media (max-width:640px){
  .hero-actions,
  .center-cta,
  .marketplace-card-grid .actions{
    align-items:stretch;
  }
  .hero-actions .btn,
  .center-cta .btn,
  .marketplace-card-grid .actions .btn{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   Block 20: public order listing/detail consistency
   Purpose: canonical public order filter/list/detail surfaces, long German word safety and mobile CTAs.
   ========================================================= */
.wb-auftrag-grid,
.wb-detail-layout,
.region-auftrag-card{
  min-width:0;
}
.wb-auftrag-card{
  min-width:0;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.wb-auftrag-card-title{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  line-height:1.25;
  min-height:2.5em;
  overflow-wrap:anywhere;
}
.wb-auftrag-card-meta{
  margin-top:var(--space-2);
  line-height:1.45;
  overflow-wrap:anywhere;
}
.wb-detail-title,
.wb-detail-fact,
.wb-detail-layout .card,
.region-auftrag-card{
  overflow-wrap:anywhere;
  hyphens:auto;
}
.wb-detail-actions,
.region-auftrag-card{
  align-items:flex-start;
}
.region-auftrag-card__cta{
  margin-top:var(--space-3);
}
@media (min-width: 900px){
  .wb-auftrag-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width: 1180px){
  .wb-auftrag-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width: 720px){
  .wb-auftrag-grid{grid-template-columns:1fr;}
  .wb-detail-layout{grid-template-columns:1fr;}
  .wb-detail-actions{width:100%;}
  .wb-detail-actions .btn,
  .wb-detail-actions form,
  .wb-detail-actions form .btn,
  .region-auftrag-card__cta{
    width:100%;
    justify-content:center;
    min-height:var(--tap-target);
  }
}

/* =========================================================
   Block 21: public/auth form interaction consistency
   Canonicalizes shared public form surfaces and password toggles.
   ========================================================= */
.kontakt-grid{min-width:0}

.kontakt-card{overflow:hidden}

.kontakt-form{min-width:0}

.kontakt-form .label{color:var(--text);line-height:1.35}

.kontakt-actions{min-width:0}


@media (max-width:900px){
  .kontakt-actions .btn{min-width:0}
}

@media (max-width:640px){
  .kontakt-card{border-radius:var(--card-mobile-radius)}
  .kontakt-actions{flex-direction:column;align-items:stretch}
  .kontakt-actions .btn{width:100%;justify-content:center}
}

/* Block 24: canonical upload/file-input consistency. */
.upload-form > .upload-field,
.upload-form .upload-field{
  min-width:0;
}
.upload-form .btn{
  min-height:var(--control-min-h);
}
.profile-avatar-form{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  min-width:0;
}
.profile-avatar-upload-field{
  min-width:220px;
}
.wb-photo-upload-form{
  gap:var(--space-2);
}
.wb-photo-upload-form .wb-step5-upload-actions{
  margin-top:0;
}
.cms-modal input[type="file"].input{
  min-height:46px;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:720px){
  .profile-avatar-form{
    grid-template-columns:1fr;
  }
  .profile-avatar-upload-field{
    min-width:0;
  }
  .profile-avatar-form .btn,
  .wb-photo-upload-form .btn{
    width:100%;
    justify-content:center;
  }
}


/* Block 25: CMS editor image upload modal consistency. */
.cms-image-upload-field{
  margin-top:var(--space-3);
}
.cms-image-upload-field .input{
  width:100%;
}
.cms-modal [data-cms-image-status]{
  margin-top:var(--space-3);
  overflow-wrap:anywhere;
}
.cms-modal [data-cms-image-alt]{
  width:100%;
}
@media (max-width:720px){
  .cms-modal [data-cms-image-upload]{
    width:100%;
    justify-content:center;
  }
}

/* Block 27: canonical modal/drawer viewport and accessibility safety */
.maint-drawer[aria-hidden="true"]{
  visibility:hidden;
}
.maint-drawer.open{
  visibility:visible;
  outline:none;
}
.maint-overlay.open{
  cursor:pointer;
}
.maint-drawer .close,
.wb-modal__close,
.wbp-modal-close{
  min-width:var(--tap-target);
  min-height:var(--tap-target);
  touch-action:manipulation;
}
.cms-modal__panel,
.cms-ai-modal__panel,
.wb-modal__dialog,
.wbp-modal-body,
.maint-drawer{
  overflow-wrap:anywhere;
}
@media (max-width:720px){
  .maint-drawer{
    width:min(calc(100vw - (var(--modal-viewport-gap) * 2)), 420px);
    max-height:calc(100dvh - (var(--modal-viewport-gap) * 2));
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .maint-drawer form .btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   Block 28: canonical navigation, header and footer semantics
   Keep existing PHP/JS hooks; only define the missing visual/accessibility contract.
   ========================================================= */
header.top .logo,
.mobile-drawer .brand{
  min-width:0;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:var(--brand-gap);
  color:var(--text);
  font-weight:900;
  letter-spacing:.01em;
  text-decoration:none;
  overflow-wrap:anywhere;
}
header.top .logo span,
.mobile-drawer .brand span{color:var(--cta);}
header.top .logo .brand-logo-img,
.mobile-drawer .brand .brand-logo-img{
  max-width:min(220px, 48vw);
  max-height:var(--brand-logo-max-h);
  object-fit:contain;
}
/* Desktop nav active state is defined once in the canonical navigation layer above. */
.mobile-drawer .list a[aria-current="page"],
.mobile-drawer .list a.is-active,
.mobile-drawer .list button.has-sub.is-active,
.mobile-drawer .list button.has-sub.open,
.mobile-drawer .list button.has-sub[aria-expanded="true"]{
  background:var(--nav-item-bg-active);
  border-color:var(--nav-item-border-active);
  color:var(--text);
  font-weight:800;
}
nav.nav a,
nav.nav .nav-dd-toggle,
.mobile-drawer .list a,
.mobile-drawer .list button.has-sub{
  overflow-wrap:anywhere;
  hyphens:auto;
}
.mobile-drawer .list button.has-sub{
  width:100%;
  text-align:left;
}
@media (max-width:740px){
  header.top .logo .brand-logo-img,
  .mobile-drawer .brand .brand-logo-img{max-width:min(180px, 58vw);}
}
@media (max-width:420px){
  .burger .btxt{display:none;}
  .burger{padding-left:var(--nav-item-pad-x);padding-right:var(--nav-item-pad-x);}
}

/* Accessibility interaction guard: keep keyboard and ARIA states visible without changing JS hooks. */
summary:focus-visible,
[role="button"]:focus-visible,
[aria-expanded="true"]:focus-visible{
  outline:none;
  box-shadow:var(--focus-shadow);
}
[aria-expanded="true"]{
  border-color:var(--focus-color);
}
/* =========================================================
   Block 29: final frontend regression contracts
   ========================================================= */
.sr-only{
  position:absolute;
  width:var(--sr-only-size);
  height:var(--sr-only-size);
  padding:0;
  margin:calc(var(--sr-only-size) * -1);
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.mt-3{margin-top:var(--space-1)}
.mb-0{margin-bottom:0}
.cms-pane[hidden]{display:none}
.cms-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-4);
}
.cms-grid > *{min-width:0}
.cms-span2{grid-column:1 / -1}
.cms-check{
  min-height:var(--tap-target);
  padding:var(--space-3);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface-1);
  color:var(--text);
  overflow-wrap:anywhere;
}
.profile-about{
  min-width:0;
  overflow-wrap:anywhere;
}
@media (max-width: 720px){
  .cms-grid{grid-template-columns:1fr}
  .cms-span2{grid-column:auto}
  .cms-check{align-items:flex-start}
}

/* =========================================================
   Block 31: frontend dead-selector and missing-contract cleanup
   Purpose: bind used view/JS classes to canonical design tokens without
   renaming hooks or creating parallel component implementations.
   ========================================================= */
.link{color:var(--link);text-decoration:none;font-weight:700;overflow-wrap:anywhere}.link:hover,.link:focus{text-decoration:underline}.link:focus-visible{outline:var(--focus-outline-w) solid var(--focus-color);outline-offset:var(--focus-outline-offset);border-radius:var(--radius-xs)}
.code,code{font-family:var(--font-mono);font-size:.92em;color:var(--fallback-text);background:var(--editor-surface-muted);border:var(--border-w) solid var(--component-border);border-radius:var(--radius-xs);padding:.1rem .35rem;overflow-wrap:anywhere}pre.code{display:block;padding:var(--space-3);border-radius:var(--radius-sm);background:var(--surface-editor);overflow:auto}
.cms-2cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.42fr);gap:var(--space-5);align-items:start}.cms-figure{margin:var(--space-4) 0}.cms-figure img,.cms-figure .img-responsive{display:block;max-width:100%;height:auto;border-radius:var(--radius);border:var(--border-w) solid var(--line)}.cms-video{position:relative;overflow:hidden;border-radius:var(--radius);border:var(--border-w) solid var(--line);background:var(--surface-editor)}.cms-video iframe,.cms-video video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border:0}.cms-cta{padding:clamp(18px,4vw,34px);border:var(--border-w) solid var(--line);border-radius:var(--radius-lg);background:var(--cms-cta-bg);overflow-wrap:anywhere}
.builder-logic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}.summary-preview-row{min-width:0;overflow-wrap:anywhere}.verification-filter-search{min-width:min(100%,320px)}
.profile-head{min-width:0;display:flex;flex-direction:column;gap:var(--space-2);overflow-wrap:anywhere}
.wb-wz-progress,.wb-wz-steps{min-width:0}.wb-wz-steps{overflow-x:auto;scrollbar-width:thin}.wb-trade-list{display:flex;flex-direction:column;gap:var(--space-3)}.wb-trade-group{border:var(--border-w) solid var(--line);border-radius:var(--radius);background:var(--surface-muted);padding:var(--space-3);overflow:hidden}.wb-trade-group summary{cursor:pointer;min-height:var(--tap-target);display:flex;align-items:center;overflow-wrap:anywhere}.wb-trade-group-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-2);margin-top:var(--space-2)}
.ico-left{display:inline-flex;align-items:center;gap:var(--space-2)}.col{min-width:0}
@media (max-width:860px){.cms-2cols,.builder-logic-grid{grid-template-columns:1fr}.verification-filter-search{width:100%}.wb-wz-progress{align-items:stretch}.wb-wz-steps{width:100%;padding-bottom:4px}.wb-trade-group-items{grid-template-columns:1fr}}

/* ------------------------------------------------------------------
   Block 34: keyboard focus affordances for role-based interactive media
-------------------------------------------------------------------*/
.wbp-avatar[role="button"]{cursor:pointer}
.wbp-avatar[role="button"]:focus-visible{outline:var(--focus-outline-w) solid var(--focus-color);outline-offset:var(--focus-outline-offset);box-shadow:var(--focus-shadow)}
.mobile-drawer[aria-hidden="true"]{visibility:hidden}
.mobile-drawer[aria-hidden="false"]{visibility:visible}

/* Block 35: account table accessibility semantics */
.account-payments-table td,
.account-purchased-table td,
.document-table td {
  overflow-wrap: anywhere;
}
.account-purchased-table .account-contact-actions {
  min-width: 220px;
}
@media (max-width: 720px) {
  .account-purchased-table-wrap,
  .account-payments-table-wrap,
  .document-table-wrap {
    margin-inline: calc(var(--space-3) * -1);
    border-radius: var(--radius-lg);
  }
  .account-purchased-table .table-actions,
  .account-payments-table .table-actions,
  .document-table .table-actions {
    align-items: stretch;
  }
  .account-purchased-table .table-actions .btn,
  .account-payments-table .table-actions .btn,
  .document-table .table-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   Block 46: contact page canonical field states
   Keeps contact form fields on token-based input/focus states.
   ========================================================= */
.kontakt-form .input,
.kontakt-form textarea,
.kontakt-form select{
  border-color:var(--border);
  background:var(--input-bg);
}

/* =========================================================
   Block 43: contact page desktop/tablet/mobile layout polish
   Keeps the contact page on a premium readable width and fixes
   title/form spacing without changing backend form handling.
   ========================================================= */
.kontakt-section{padding-top:var(--space-8);}
.kontakt-shell{max-width:none;margin:0 auto;min-width:0;}
.kontakt-page-head{max-width:none;margin:0 0 var(--space-6);}
.kontakt-page-head .h1{margin:var(--space-2) 0 10px;overflow-wrap:anywhere;}
.kontakt-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);width:100%;}
.kontakt-form-card,.kontakt-info-card{min-width:0;}
.kontakt-info-stack{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
.kontakt-facts{display:grid;gap:var(--space-2);overflow-wrap:anywhere;}
.kontakt-form .input{width:100%;}

@media (max-width:900px){
  .kontakt-shell{max-width:none;}
  .kontakt-page-head{margin-bottom:var(--space-4);}
}

@media (max-width:640px){
  .kontakt-section{padding-top:var(--space-6);}
  .kontakt-page-head .h1{font-size:clamp(28px,8vw,var(--fs-h1));line-height:1.12;}
  .kontakt-grid{gap:var(--space-3);}
  .kontakt-form .gtc-2{grid-template-columns:1fr;}
}


/* =========================================================
   Block 44: contact page form, card spacing and responsive CTA polish
   Tightens the contact page without changing backend handling.
   ========================================================= */
.kontakt-grid{gap:28px;align-items:stretch;}
.kontakt-card{padding:var(--space-6);}
.kontakt-form-card{display:flex;flex-direction:column;gap:var(--space-4);}
.kontakt-card-head{display:flex;flex-direction:column;gap:var(--contact-card-head-gap);margin-bottom:var(--contact-card-head-mb);min-width:0;}
.kontakt-form{display:flex;flex-direction:column;gap:0;}
.kontakt-form .form-row{margin-bottom:var(--space-4);}
.kontakt-form textarea.input{min-height:168px;resize:vertical;}
.kontakt-actions{margin-top:var(--space-3);}
.kontakt-info-card{height:100%;}
.kontakt-info-stack{height:100%;}

@media (max-width:900px){
  .kontakt-grid{gap:18px;align-items:start;}
  .kontakt-card{padding:var(--space-5);}
}

@media (max-width:640px){
  .kontakt-section .wrap{padding-left:max(var(--pad-mobile),14px);padding-right:max(var(--pad-mobile),14px);}
  .kontakt-form textarea.input{min-height:150px;}
}

/* Block 45: contact page extra content alignment */
.kontakt-extra-section{padding-top:0;}
@media (max-width:740px){
  .kontakt-extra-shell .card{border-radius:var(--radius-md);}
}

/* =========================================================
   Block 47: contact page microcopy and form semantics
   Keeps contact form helper text readable and tied to the form flow.
   ========================================================= */
#contact-consent-note{max-width:64ch;line-height:1.5;overflow-wrap:anywhere;}
@media (max-width:640px){
  #contact-consent-note{font-size:var(--fs-small);}
}


/* Block 50: public content typography hierarchy */
.cms-content{
  max-width:78ch;
  line-height:1.72;
}

.cms-content h1,
.cms-content .h1{
  max-width:18ch;
  margin:0 0 18px;
  line-height:1.08;
}

.cms-content h2,
.cms-content .h2{
  margin:42px 0 14px;
  line-height:1.18;
}

.cms-content h3,
.cms-content .h3{
  margin:28px 0 10px;
  line-height:1.24;
}

.cms-content p,
.cms-content ul,
.cms-content ol{
  margin:0 0 18px;
}

.cms-content ul,
.cms-content ol{
  padding-left:1.3rem;
}

.cms-content li + li{
  margin-top:8px;
}

.cms-content table{
  width:100%;
}

.cms-content hr{
  margin:36px 0;
}

.cms-content blockquote{
  margin:26px 0;
  padding:var(--cms-content-quote-pad-y) var(--cms-content-quote-pad-x);
  border-left:4px solid var(--accent);
  background:var(--surface-soft);
  border-radius:0 var(--radius) var(--radius) 0;
}

@media (max-width:900px){
  .cms-content{
    max-width:100%;
    line-height:1.66;
  }

  .cms-content h1,
  .cms-content .h1{
    max-width:100%;
  }
}

/* =========================================================
   Block 64: public service/marketplace heading and form semantics
   Purpose: clean public heading rhythm, readable leads and safe filter controls on desktop/tablet/mobile.
   ========================================================= */
.wb-public-lead{
  max-width:760px;
  margin-top:var(--space-2);
  line-height:1.55;
  overflow-wrap:anywhere;
}
.page-head .wb-public-lead{
  margin-bottom:0;
}
.marketplace-filter-grid .field,
.wb-filterbar > div{
  min-width:0;
}
.marketplace-filter-grid .card-title,
.card-header .card-title,
.region-auftrag-card .h2,
body.home .feature-card .h2{
  margin-top:0;
  overflow-wrap:anywhere;
}
body.home .feature-card .h2,
.marketplace-card-grid .h3{
  margin-bottom:var(--space-2);
}
@media (max-width:720px){
  .page-head .wb-public-lead{
    font-size:var(--fs-body);
  }
  .marketplace-filter-grid .field,
  .wb-filterbar > div,
  .wb-filterbar > button{
    width:100%;
  }
}


/* =========================================================
   Block 65: public marketplace card hierarchy and CTA consistency
   Purpose: semantic heading scale, robust action wrapping and readable marketplace/detail cards on desktop/tablet/mobile.
   ========================================================= */
.public-section-title{
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:900;
  color:var(--text);
  overflow-wrap:anywhere;
}
.public-card-title{
  margin:0 0 var(--space-2);
  font-size:clamp(20px,2.2vw,26px);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:900;
  color:var(--text);
  overflow-wrap:anywhere;
}
.marketplace-card-actions,
.wb-detail-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  align-items:center;
}
.marketplace-card-actions .btn,
.wb-detail-actions .btn{
  min-height:var(--tap-target);
}
.wb-auftrag-card{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  min-width:0;
  text-decoration:none;
}
.wb-auftrag-card-title,
.wb-auftrag-card-meta,
.wb-detail-title,
.wb-detail-side-title,
.wb-detail-section-title{
  overflow-wrap:anywhere;
}
.wb-detail-section-title,
.wb-detail-side-title{
  margin-top:0;
}
.marketplace-card-grid .row-between{
  gap:var(--space-3);
  align-items:flex-start;
}
@media (max-width:720px){
  .public-section-title{
    font-size:clamp(26px,7vw,34px);
  }
  .public-card-title{
    font-size:clamp(19px,5.6vw,24px);
  }
  .marketplace-card-actions,
  .wb-detail-actions{
    align-items:stretch;
  }
  .marketplace-card-actions .btn,
  .wb-detail-actions .btn{
    width:100%;
    justify-content:center;
  }
  .marketplace-card-grid .row-between{
    flex-direction:column;
  }
  .marketplace-card-grid .badge-wrap{
    align-self:flex-start;
  }
}


/* =========================================================
   Block 66: public marketplace empty-state and width polish
   Purpose: keep no-result states useful, readable and aligned with public marketplace cards on desktop/tablet/mobile.
   ========================================================= */
.wb-public-empty{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  align-items:center;
  text-align:center;
  padding:clamp(18px,3vw,28px);
}
.wb-public-empty .empty-text{
  max-width:560px;
  line-height:1.55;
}
.wb-public-empty .empty-actions{
  justify-content:center;
}
@media (max-width:720px){
  .wb-public-empty{
    align-items:stretch;
    text-align:left;
  }
  .wb-public-empty .empty-actions{
    justify-content:stretch;
  }
  .wb-public-empty .empty-actions .btn{
    width:100%;
  }
}

/* =========================================================
   Block 69: account heading and spacing semantics
   Auth-specific layout, input and action rules live in the canonical
   Auth/session access surfaces block above.
   ========================================================= */
.card > h2.h2:first-child{margin-top:0;}

.grid-steps h2.h2{overflow-wrap:anywhere;}

.grid-steps{max-width:none;}


@media (max-width:900px){
  .grid-steps{grid-template-columns:1fr;}
}

@media (max-width:640px){
}

/* =========================================================
   Block 71: account dashboard/card responsive hierarchy
   Keeps customer dashboards semantically clear and mobile-safe.
   ========================================================= */
body.account .card > h2.h2,
body.account .ds-card > h2.h2,
body.account .auth-card > h2.h2{
  margin-top:0;
  overflow-wrap:anywhere;
}
body.account .wb-filterbar .label{display:block;}
body.account .account-purchased-table td,
body.account .account-favorites-table td,
body.account .account-payments-table td{overflow-wrap:anywhere;}
@media (max-width:900px){
  body.account .grid2{grid-template-columns:1fr;}
  body.account .wb-filterbar{align-items:stretch;}
  body.account .wb-filterbar .fx-1-260{flex:1 1 100%;}
}
@media (max-width:640px){
  body.account .table-actions .btn,
  body.account .account-payments-actions .btn{width:100%;justify-content:center;}
}

/* ------------------------------------------------------------------
   Block 73: public order wizard form/accessibility/responsive polish
-------------------------------------------------------------------*/
.wb-wizard-page > .container{
  max-width:none;
  width:100%;
  margin-inline:auto;
  overflow:visible;
}
.wb-wizard-page .page-head{
  max-width:none;
}
.wb-wizard-page .page-sub{
  max-width:var(--copy-max);
  overflow-wrap:anywhere;
}
.wb-wz-step:focus-visible{
  outline:var(--focus-outline-w) solid var(--focus-color);
  outline-offset:3px;
  box-shadow:var(--focus-shadow);
}
.wb-wz-panel > h2{
  margin-bottom:var(--space-4);
  overflow-wrap:anywhere;
}
.wb-wizard-page label{
  display:inline-block;
  margin-bottom:var(--space-2);
  font-weight:700;
  color:var(--text);
}
.wb-wizard-page .input{
  min-height:46px;
}
.wb-wizard-page textarea.input{
  min-height:156px;
}
.wb-step5-submit-card,
.wb-summary-preview,
.wb-photo-upload-form{
  overflow-wrap:anywhere;
}
.wb-step5-main-actions .btn,
.wb-step5-upload-actions .btn,
.wb-wz-bottombar .btn{
  min-height:var(--tap-target);
}
@media (max-width:980px){
  .wb-wizard-page > .container{
    max-width:100%;
  }
  .wb-wizard-page .page-head{
    max-width:100%;
  }
}
@media (max-width:740px){
  .wb-wizard-page .card{
    border-radius:var(--radius-md);
  }
  .wb-wz-bottombar{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-3);
  }
  .wb-wz-bottombar > .btn,
  .wb-wz-bottombar > div,
  .wb-wz-bottombar > div .btn{
    width:100%;
  }
}

/* Block 74: order wizard step navigation state */
.wb-wz-step.is-locked{
  opacity:.56;
  cursor:not-allowed;
}
.wb-wz-step[aria-disabled="true"]:hover{
  transform:none;
}
@media (max-width:640px){
  .wb-wz-step.is-locked{opacity:.48;}
}

/* =========================================================
   Block 75: public order detail and init layout semantics
   Purpose: strengthen detail page reading hierarchy, aside semantics and responsive CTA surfaces without changing routes or JS hooks.
   ========================================================= */
.wb-detail-main,
.wb-detail-aside,
.wb-order-init-card{
  min-width:0;
}
.wb-detail-description{
  margin-top:var(--space-2);
  color:var(--text);
  line-height:1.72;
  overflow-wrap:anywhere;
  hyphens:auto;
}
.wb-detail-aside{
  align-self:start;
}
.wb-order-init{
  width:100%;
}
.wb-order-init-card{
  padding:clamp(22px,4vw,34px);
}
.wb-order-init-head{
  margin-bottom:var(--space-4);
}
@media (max-width:720px){
  .wb-detail-description{line-height:1.64;}
  .wb-order-init-card{padding:var(--card-order-init-mobile-pad);}
  .wb-order-init-card .btn{width:100%;justify-content:center;min-height:var(--tap-target);}
}


/* ------------------------------------------------------------------
   Block 76: account order management dashboard polish
   Keeps Auftraggeber order management aligned with the wizard flow.
-------------------------------------------------------------------*/
.wb-orders-dashboard-cta{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.wb-table-empty-state{
  max-width:520px;
  margin:0 auto;
  padding:var(--space-4);
  text-align:center;
}
.wb-table-empty-state .empty-actions{
  margin-top:var(--space-4);
}
@media (max-width:640px){
  .wb-orders-dashboard-cta .btn,
  .wb-table-empty-state .btn{
    width:100%;
    justify-content:center;
  }
}

/* ------------------------------------------------------------------
   Block 77: account order list filter/readability polish
   Keeps the dedicated "Meine Aufträge" page aligned with dashboard UX.
-------------------------------------------------------------------*/
.wb-orders-filter-card{
  overflow:hidden;
}
.wb-orders-filter-card .wb-orders-filters{
  row-gap:var(--space-3);
}
.wb-orders-filter-card .label{
  white-space:nowrap;
}
@media (min-width:761px){
  .wb-orders-filter-card .input{
    min-width:180px;
  }
}
@media (max-width:760px){
  .wb-orders-filter-card{
    padding:var(--space-4);
  }
  .wb-orders-filter-card .label{
    width:100%;
  }
}


/* ------------------------------------------------------------------
   Block 78: account order action/status accessibility and mobile fill
   Keeps order cards action forms/buttons aligned and contextual for assistive tech.
-------------------------------------------------------------------*/
.wb-order-actions > form{
  flex:1 1 120px;
  min-width:0;
}
.wb-order-actions > form .btn{
  width:100%;
}
@media (max-width:760px){
  .wb-order-actions > form{
    flex-basis:100%;
  }
}


/* ------------------------------------------------------------------
   Block 79: account order dashboard final regression polish
   Aligns dashboard filters and table actions with the dedicated order list.
-------------------------------------------------------------------*/
.wb-orders-dashboard-filter{
  overflow:hidden;
}
.wb-orders-dashboard-filter .filters-grid{
  row-gap:var(--space-3);
}
@media (max-width:740px){
  .wb-orders-dashboard-filter{
    padding:var(--space-4);
  }
  .wb-orders-dashboard-filter .f,
  .wb-orders-dashboard-filter .f.small{
    width:100%;
  }
  .wb-orders-dashboard-filter .input{
    width:100%;
  }
}

/* ------------------------------------------------------------------
   Block 80: company dashboard card/action responsive consistency
-------------------------------------------------------------------*/
.wb-company-dashboard-filter .wb-filterbar{
  width:100%;
}
.wb-company-dashboard-grid > .card{
  min-width:0;
}
.wb-company-favorite-card{
  min-width:0;
}
.wb-company-favorite-title{
  margin:0 0 6px;
  font:inherit;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.wb-company-favorite-title .truncate{
  display:inline-block;
  max-width:100%;
  vertical-align:bottom;
}
@media (max-width:720px){
  .wb-company-dashboard-filter{
    padding:var(--space-4);
  }
  .wb-company-dashboard-filter .wb-filterbar{
    align-items:stretch;
  }
  .wb-company-dashboard-filter .fx-1-260{
    flex:1 1 100%;
  }
  .wb-company-dashboard-filter select,
  .wb-company-dashboard-filter .input{
    width:100%;
    font-size:16px;
  }
  .wb-company-dashboard-grid .btn,
  .wb-company-dashboard-grid .table-actions .btn{
    width:100%;
    justify-content:center;
    min-height:var(--tap-target);
  }
}


/* ------------------------------------------------------------------
   Block 81: company unlocked contact detail responsive semantics
-------------------------------------------------------------------*/
.account-contact-detail-grid{
  align-items:start;
}
.account-contact-detail-card{
  min-width:0;
}
.account-contact-detail-card .h2{
  margin-top:0;
  overflow-wrap:anywhere;
}
.account-contact-detail-card .gtc-media > div{
  min-width:0;
  overflow-wrap:anywhere;
}
@media (max-width:720px){
  .account-contact-detail-grid{
    grid-template-columns:1fr;
    gap:var(--space-4);
  }
  .account-contact-detail-card{
    padding:var(--space-4);
  }
  .account-contact-detail-card .gtc-media{
    grid-template-columns:1fr;
  }
}

/* Block 82: purchased contacts final hierarchy and amount readability */
.account-purchased-card .card-title{
  margin:0;
}
.account-purchased-amount{
  white-space:nowrap;
  font-weight:700;
}
@media (max-width:720px){
  .account-purchased-card .card-header{
    align-items:flex-start;
  }
  .account-purchased-amount{
    white-space:normal;
  }
}

/* Block 83: account finance document/action readability */
.account-finance-amount,
.account-payment-id,
.account-document-number{
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.account-payment-title{
  max-width:34ch;
  overflow-wrap:anywhere;
}
@media (max-width:720px){
  .account-finance-amount,
  .account-payment-id,
  .account-document-number{
    white-space:normal;
  }
  .account-payment-title{
    max-width:none;
  }
}


/* ------------------------------------------------------------------
   Block 84: account finance final semantic/readability regression
-------------------------------------------------------------------*/
.document-card .card-title,
.account-payments-card .h2{
  margin:0;
  overflow-wrap:anywhere;
}
.account-finance-date{
  white-space:nowrap;
}
@media (max-width:720px){
  .document-card,
  .account-payments-card{
    padding:var(--space-4);
  }  .account-finance-date{
    white-space:normal;
  }
}


/* =========================================================
   Block 85: account notification center semantics and responsive polish
   ========================================================= */
.account-notification-panel{
  min-width:0;
}
.account-notification-panel .card-title,
.account-notification-detail .card-title,
.note-title{
  margin:0;
  overflow-wrap:anywhere;
}
.account-notification-detail{
  max-width:none;
  width:100%;
}
.notification-offer-description{
  margin-top:var(--notification-description-gap);
  line-height:1.65;
  overflow-wrap:anywhere;
}
.notification-offer-description .section-title{
  margin:0 0 8px;
}
.note{
  min-width:0;
  overflow-wrap:anywhere;
}
.note.is-read{
  background:var(--surface);
}
@media (max-width:720px){
  .account-notification-detail .actions{
    flex-direction:column;
    align-items:stretch;
  }
  .account-notification-detail .actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   Block 86: notification center final table/status accessibility
   ========================================================= */
.account-notifications-table .table-actions-col{
  width:1%;
  white-space:nowrap;
}
.account-notifications-actions{
  justify-content:flex-end;
}
.note.is-unread{
  border-color:color-mix(in srgb,var(--accent) 28%,var(--border));
}
@media (max-width:720px){
  .account-notifications-actions,
  .account-notifications-actions form{
    width:100%;
  }
  .account-notifications-actions .btn{
    width:100%;
    justify-content:center;
    min-height:var(--tap-target);
  }
}


.account-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}

/* =========================================================
   Block 87: account profile/verification documents responsive semantics
   ========================================================= */
.account-phone-card,
.account-verification-card{
  min-width:0;
}
.account-phone-card .h2,
.account-verification-card .h2{
  margin-top:0;
  overflow-wrap:anywhere;
}
.account-verification-card .upload-field{
  min-width:0;
}
.verification-doc-card{
  overflow-wrap:anywhere;
}
.verification-doc-card b{
  min-width:0;
}
@media (max-width:720px){
  .account-verification-card .account-actions,
  .account-verification-card .verification-doc-actions,
  .account-phone-card .auth-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .account-verification-card .account-actions .btn,
  .account-verification-card .verification-doc-actions .btn,
  .account-phone-card .auth-actions .btn{
    width:100%;
    justify-content:center;
    min-height:var(--tap-target);
  }
}


/* Block 88: profile/settings section semantics and mobile readability */
.account-profile-card{
  min-width:0;
}
.account-profile-card .h2{
  overflow-wrap:anywhere;
}
@media (max-width: 760px){
  .account-profile-card{
    padding:var(--space-4);
  }
  .account-profile-card .inline-form,
  .account-profile-card .auth-actions,
  .account-profile-card form .btn{
    width:100%;
  }
  .account-profile-card .inline-form .btn{
    width:100%;
  }
}

/* =========================================================
   Block 8.14: verified frontend/design-system corrections
   Scope: CSS-only cascade fixes for existing classes/hooks.
   No JS hook/class renames; no parallel component implementation.
   ========================================================= */
/* Button visual contract lives in the canonical component layer above. */
/* Panels/cards: consistent internal spacing,
but keep intentionally p-0 tables intact. */
.card:not(.p-0),
.ds-card:not(.p-0),
.panel:not(.p-0),
.profile-card:not(.p-0),
.kontakt-card:not(.p-0),
.doc-card:not(.p-0),
.invoice-card:not(.p-0),
.invoice-box:not(.p-0),
.wbp-card:not(.p-0),
.wb-order-card:not(.p-0){
  padding:var(--space-card);
}

.card > .table-wrap:first-child,
.ds-card > .table-wrap:first-child,
.panel > .table-wrap:first-child{
  margin:calc(var(--space-card) * -1);
  width:calc(100% + (var(--space-card) * 2));
}

/* Table wrappers/actions are defined once in the canonical table/listing contract below. */
/* Native details/dropdown-like surfaces used in admin/CMS. */
details.card,
details.panel{
  overflow:hidden;
}

details > summary{
  cursor:pointer;
  min-height:var(--tap-target);
  display:flex;
  align-items:center;
  gap:var(--space-2);
  list-style-position:inside;
}

/* Profile avatar modal uses legacy wbp-* hooks; normalize it to the same modal contract. */
.wbp-modal.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--modal-viewport-gap);
  overflow:auto;
  overscroll-behavior:contain;
}

.wbp-modal-body{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(860px, calc(100vw - (var(--modal-viewport-gap) * 2)));
  max-width:calc(100vw - (var(--modal-viewport-gap) * 2));
  max-height:calc(100dvh - (var(--modal-viewport-gap) * 2));
  margin:0;
  background:var(--surface-1);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius-lg);
  box-shadow:var(--shadow-modal);
  overflow:auto;
  box-sizing:border-box;
  padding:var(--lightbox-pad-desktop);
}

.wbp-modal-close{
  min-width:var(--tap-target);
  min-height:var(--tap-target);
}

@media (max-width:700px){
  .wbp-modal-body{padding:var(--lightbox-pad-tablet);}
  .wbp-modal-body img{max-height:calc(100dvh - 72px);}
}

/* Desktop and tablet grid safety for long German compounds outside canonical card surfaces. */
.page,
.table-wrap,
.table-responsive,
.footer,
.mobile-drawer{
  overflow-wrap:anywhere;
}


@media (max-width:640px){
  .card:not(.p-0),
  .ds-card:not(.p-0),
  .panel:not(.p-0),
  .profile-card:not(.p-0),
  .doc-card:not(.p-0),
  .invoice-box:not(.p-0),
  .wbp-card:not(.p-0),
  .wb-order-card:not(.p-0){
    padding:var(--space-3);
  }

  .card > .table-wrap:first-child,
  .ds-card > .table-wrap:first-child,
  .panel > .table-wrap:first-child{
    margin:calc(var(--space-3) * -1);
    width:calc(100% + (var(--space-3) * 2));
  }

  .table-wrap::after,
  .table-responsive::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:var(--table-scroll-fade-w);
    height:100%;
    pointer-events:none;
    background:var(--table-scroll-fade);
  }

  details > summary{
    min-height:var(--tap-target);
  }
}


/* =========================================================
   Block 93: contractor directory canonical UX contract
   Purpose: keep directory filters, contractor cards and action CTAs consistent after the global design-system pass.
   ========================================================= */
.marketplace-filter-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--marketplace-grid-gap);
  align-items:end;
}
.marketplace-filter-grid .check{
  align-items:center;
  min-height:var(--control-min-h);
  padding-block:var(--space-2);
}
.marketplace-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--marketplace-grid-gap);
}
.marketplace-card-grid .card-inner{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}
.marketplace-card-grid .h3,
.marketplace-card-grid .muted,
.marketplace-card-actions .muted{
  overflow-wrap:anywhere;
  hyphens:auto;
}
.marketplace-card-actions{
  margin-top:auto;
}
.marketplace-card-actions .btn{
  flex:0 1 auto;
}
@media (max-width:1024px){
  .marketplace-filter-grid,
  .marketplace-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:720px){
  .marketplace-filter-grid,
  .marketplace-card-grid{grid-template-columns:1fr;}
  .marketplace-card-grid .badge-wrap{width:100%;justify-content:flex-start;}
}


/* ------------------------------------------------------------------
   Block 94: purchase/checkout canonical account surfaces
   Canonical owner for purchase payment/contact actions in account views.
-------------------------------------------------------------------*/
.account-payments-card,
.account-purchased-card,
.account-contact-detail-card{
  overflow:hidden;
}
.account-payments-table-wrap table,
.account-purchased-table-wrap table{
  min-width:var(--account-finance-table-min);
}
.account-payments-actions,
.account-contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
  align-items:center;
}
.account-payments-actions form,
.account-contact-actions form{
  margin:0;
}
.account-payments-actions .btn,
.account-contact-actions .btn{
  min-height:var(--tap-target);
}
.account-payment-title,
.account-purchased-table td,
.account-contact-detail-card{
  overflow-wrap:anywhere;
  hyphens:auto;
}
@media (max-width:720px){
  .account-payments-table-wrap,
  .account-purchased-table-wrap{
    max-width:calc(100% + (var(--space-3) * 2));
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .account-payments-actions,
  .account-contact-actions{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    align-items:stretch;
  }
  .account-payments-actions .btn,
  .account-contact-actions .btn,
  .account-payments-actions form,
  .account-contact-actions form,
  .account-payments-actions form .btn,
  .account-contact-actions form .btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   Block 96: animated home hero photo entrance
   Purpose: make the three horizontal hero photos slide in from right to left in sequence.
   ========================================================= */
body.home .hero-service-stack{
  overflow:hidden;
  perspective:1200px;
}
body.home .hero-service-card{
  aspect-ratio:16 / 4.45;
  transform:translateX(0);
  will-change:transform, opacity;
}
@keyframes heroPhotoSlideIn{
  0%{opacity:0;transform:translateX(118%) scale(.985)}
  72%{opacity:1;transform:translateX(-1.5%) scale(1)}
  100%{opacity:1;transform:translateX(0) scale(1)}
}
body.home .hero-service-card-renovation,
body.home .hero-service-card-bathroom,
body.home .hero-service-card-building{
  opacity:0;
  animation:heroPhotoSlideIn .86s cubic-bezier(.19,1,.22,1) forwards;
}
body.home .hero-service-card-renovation{animation-delay:.06s}
body.home .hero-service-card-bathroom{animation-delay:.24s}
body.home .hero-service-card-building{animation-delay:.42s}
@media (prefers-reduced-motion: reduce){
  body.home .hero-service-card-renovation,
  body.home .hero-service-card-bathroom,
  body.home .hero-service-card-building{
    opacity:1;
    animation:none;
    transform:none;
  }
}
@media(max-width:720px){
  body.home .hero-service-card{aspect-ratio:16 / 6.4}
}
@media(max-width:460px){
  body.home .hero-service-card{aspect-ratio:16 / 8.2}
}

/* =========================================================
   Block 97: delayed hero photo overlays
   Purpose: after each hero photo slides in, reveal the icon and German label on top of it.
   ========================================================= */
body.home .hero-service-card .hero-service-icon,
body.home .hero-service-card .hero-service-copy{
  opacity:0;
  transform:translateY(14px);
  will-change:opacity, transform;
}
@keyframes heroOverlayReveal{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
body.home .hero-service-card-renovation .hero-service-icon,
body.home .hero-service-card-renovation .hero-service-copy{
  animation:heroOverlayReveal .48s cubic-bezier(.19,1,.22,1) .86s forwards;
}
body.home .hero-service-card-bathroom .hero-service-icon,
body.home .hero-service-card-bathroom .hero-service-copy{
  animation:heroOverlayReveal .48s cubic-bezier(.19,1,.22,1) 1.04s forwards;
}
body.home .hero-service-card-building .hero-service-icon,
body.home .hero-service-card-building .hero-service-copy{
  animation:heroOverlayReveal .48s cubic-bezier(.19,1,.22,1) 1.22s forwards;
}
@media (prefers-reduced-motion: reduce){
  body.home .hero-service-card .hero-service-icon,
  body.home .hero-service-card .hero-service-copy{
    opacity:1;
    transform:none;
    animation:none;
  }
}


/* =========================================================
   Block 98: frontend/design-system re-check consolidation
   Scope: final token-backed component contract without JS hook changes.
   ========================================================= */

@media (min-width:741px){
  .table-wrap,
  .table-responsive{
    overflow-x:auto;
  }
}

@media (max-width:740px){
  .page-head,
  .toolbar,
  .card-header,
  .form-actions,
  .card-header-actions,
  .actions{
    width:100%;
    min-width:0;
  }

  .form-actions .btn,
  .card-header-actions .btn,
  .actions .btn{
    width:100%;
  }
}

/* =========================================================
   Block 99: home page visual refinement
   Scope: only the public homepage. No JS hooks or global component classes changed.
   ========================================================= */
body.home .page{
  background:
    radial-gradient(circle at 16% 8%, var(--home-page-ambient-left), transparent 30%),
    radial-gradient(circle at 88% 18%, var(--home-page-ambient-right), transparent 34%),
    linear-gradient(180deg, var(--home-page-ambient-wash), transparent 460px);
}
body.home .hero{
  position:relative;
  border:var(--border-w) solid var(--home-hero-shell-border);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  /* Visual background and shell shadow are defined once in the final home hero token contract below. */
  overflow:hidden;
}
body.home .hero-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(460px,.98fr);
  gap:var(--home-hero-grid-gap);
  align-items:center;
  width:100%;
  max-width:none;
  padding:var(--home-hero-shell-pad);
  box-sizing:border-box;
}
body.home .hero-left{
  padding:clamp(18px,3vw,34px);
  border:var(--border-w) solid var(--home-hero-panel-border);
  border-radius:var(--radius-xl);
  -webkit-backdrop-filter:var(--home-hero-panel-glass-blur);
  backdrop-filter:var(--home-hero-panel-glass-blur);
}
body.home .hero .hero-title{
  max-width:780px;
  font-family:var(--font-sans);
  font-weight:800;
  font-size:clamp(42px,5vw,66px);
  line-height:1.12;
  letter-spacing:-.045em;
}
body.home .hero .hero-sub{
  color:var(--home-hero-sub-color);
  font-size:clamp(18px,1.45vw,23px);
}
body.home .hero .hero-input{
  min-height:var(--home-hero-input-h);
  border-radius:var(--control-radius);
}
body.home .hero .hero-service-card{
  min-height:190px;
}
body.home .hero .hero-service-icon{
  background:var(--home-hero-service-icon-bg);
  border-color:var(--home-hero-service-icon-line);
}
body.home .home-region-section,
body.home .home-pricing-section,
body.home .home-transparency-section,
body.home .home-faq-section{
  margin-top:var(--home-section-gap);
  margin-bottom:0;
  padding-top:0;
  padding-bottom:0;
}
body.home .home-region-section > .wrap,
body.home .home-pricing-section > .wrap,
body.home .home-transparency-section > .wrap,
body.home .home-faq-section > .wrap{
  padding:clamp(22px,3vw,34px);
  border:var(--border-w) solid transparent;
  border-radius:var(--radius-xl);
}
body.home .home-pricing-section,
body.home .home-faq-section{
  border:0;
}
body.home .home-region-section .section-head,
body.home .home-faq-section .section-head{
  overflow-wrap:anywhere;
  hyphens:auto;
}
@media (max-width:820px){
  body.home .hero-left{
    padding:22px;
  }
}

@media (max-width:640px){
  body.home .hero{
    border-radius:var(--component-radius-lg);
  }
  body.home .hero-left,
  body.home .home-region-section > .wrap,
  body.home .home-pricing-section > .wrap,
  body.home .home-transparency-section > .wrap,
  body.home .home-faq-section > .wrap{
    border-radius:var(--radius-lg);
  }
}


/* =========================================================
   Block 100: home header/menu/hero contrast pass
   Scope: homepage only. Uses existing hooks/classes; no alternate component system.
   ========================================================= */
body.home .hero .hero-service-copy{
  text-shadow:var(--home-hero-card-copy-shadow);
}
body.home .hero .hero-service-copy p{
  color:var(--home-hero-card-copy-color);
}
@media (max-width:420px){
  body.home .hero .hero-title{
    letter-spacing:-.035em;
  }
}

/* =========================================================
   Block 101: home lower-section premium readability pass
   Scope: homepage sections after hero only. Reuses the existing button/card/form tokens and classes.
   ========================================================= */
body.home .home-region-section,
body.home .home-pricing-section,
body.home .home-transparency-section,
body.home .home-faq-section{
  position:relative;
}
body.home .home-region-section > .wrap,
body.home .home-pricing-section > .wrap,
body.home .home-transparency-section > .wrap,
body.home .home-faq-section > .wrap{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%, var(--home-section-surface-glow-left), transparent 34%),
    radial-gradient(circle at 92% 8%, var(--home-section-surface-glow-right), transparent 36%),
    linear-gradient(180deg, var(--home-section-surface-glass-top), var(--home-section-surface-glass-bottom));
  border-color:var(--home-section-surface-border);
  box-shadow:var(--home-section-surface-shadow);
}
body.home .home-region-section > .wrap:after,
body.home .home-pricing-section > .wrap:after,
body.home .home-transparency-section > .wrap:after,
body.home .home-faq-section > .wrap:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(135deg, var(--home-section-overlay-glow), transparent 38%);
  opacity:.58;
}
body.home .home-region-section > .wrap > *,
body.home .home-pricing-section > .wrap > *,
body.home .home-transparency-section > .wrap > *,
body.home .home-faq-section > .wrap > *{
  position:relative;
  z-index:1;
}
body.home .home-region-section .section-head,
body.home .home-faq-section .section-head{
  max-width:980px;
}
body.home .home-faq-section .section-head.ta-center{
  margin-left:auto;
  margin-right:auto;
}
body.home .home-region-section .public-section-title,
body.home .home-pricing-section .public-section-title,
body.home .home-transparency-section .public-section-title,
body.home .home-faq-section .public-section-title{
  color:var(--text);
  letter-spacing:-.026em;
}
body.home .home-region-section .feature-grid{
  gap:var(--home-section-grid-gap);
}
body.home .home-region-section .feature-card{
  display:flex;
  flex-direction:column;
  min-height:168px;
  padding:22px;
}
body.home .home-region-section .feature-card .icon-ring{
  width:56px;
  height:56px;
  margin-bottom:14px;
}
body.home .home-pricing-section .checklist{
  gap:var(--space-4);
}
body.home .home-pricing-section .checklist li{
  display:flex;
  align-items:flex-start;
  gap:var(--space-2);
  padding:12px 0;
  border-bottom:var(--border-w) solid var(--home-lower-row-line);
}
body.home .home-pricing-section .checklist li:last-child{
  border-bottom:0;
}
body.home .home-pricing-section .checklist .check{
  flex:0 0 var(--home-check-size);
  width:var(--home-check-size);
  height:var(--home-check-size);
  margin-right:0;
  margin-top:1px;
}
body.home .home-pricing-section .kpi{
  background:
    radial-gradient(circle at 100% 0%, var(--home-kpi-glow), transparent 36%),
    linear-gradient(180deg, var(--home-kpi-glass-top), var(--home-kpi-glass-bottom));
}
body.home .home-pricing-section .kpi-row{
  align-items:center;
  padding:var(--home-kpi-row-pad-y) 0;
  border-bottom:var(--border-w) solid var(--home-lower-row-line);
}
body.home .home-pricing-section .kpi .hr + .kpi-row{
  border-bottom:0;
}
body.home .home-transparency-section .card{
  min-height:100%;
}
body.home .home-transparency-section .bullets{
  padding-left:2px;
}
body.home .home-transparency-section .bullets li{
  margin:8px 0;
}
body.home .home-faq-section .faq{
  gap:var(--space-3);
}
body.home .home-faq-section .faq-item{
  padding:0;
  overflow:hidden;
}
body.home .home-faq-section .faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  min-height:56px;
  padding:var(--home-faq-summary-pad-y) var(--home-faq-summary-pad-x);
  color:var(--text);
  list-style:none;
  outline:none;
}
body.home .home-faq-section .faq-item summary:after{
  float:none;
  flex:0 0 auto;
  width:30px;
  height:30px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--home-faq-toggle-bg);
  border:var(--border-w) solid var(--home-faq-toggle-line);
}
body.home .home-faq-section .faq-item[open] summary{
  border-bottom:var(--border-w) solid var(--home-lower-row-line);
}
body.home .home-faq-section .faq-item .muted{
  padding:var(--home-faq-body-pad-y) var(--home-faq-summary-pad-x) var(--home-faq-body-pad-bottom);
}
@media (max-width:980px){
  body.home .home-region-section .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.home .home-region-section .feature-card{
    min-height:150px;
  }
}
@media (max-width:740px){
  body.home .home-region-section > .wrap,
  body.home .home-pricing-section > .wrap,
  body.home .home-transparency-section > .wrap,
  body.home .home-faq-section > .wrap{
    padding:var(--space-5);
  }
  body.home .home-region-section .feature-grid{
    grid-template-columns:1fr;
    gap:var(--space-3);
  }
  body.home .home-region-section .feature-card{
    min-height:0;
    padding:18px;
  }
  body.home .home-pricing-section .kpi-row{
    align-items:flex-start;
  }
  body.home .home-faq-section .faq-item summary{
    align-items:flex-start;
    min-height:54px;
    padding:var(--home-faq-summary-mobile-pad-y) var(--home-faq-item-pad-x);
  }
  body.home .home-faq-section .faq-item .muted{
    padding:var(--home-faq-body-mobile-pad-y) var(--home-faq-item-pad-x) var(--home-faq-item-pad-x);
  }
}
@media (max-width:420px){
  body.home .home-region-section > .wrap,
  body.home .home-pricing-section > .wrap,
  body.home .home-transparency-section > .wrap,
  body.home .home-faq-section > .wrap{
    padding-left:var(--pad-mobile);
    padding-right:var(--pad-mobile);
  }
  body.home .home-region-section .feature-card .icon-ring{
    width:52px;
    height:52px;
  }
}

/* =========================================================
   Block 102: home mobile/tablet interaction polish
   Scope: homepage only. Tightens responsive layout without introducing alternate component classes or changing JS hooks.
   ========================================================= */
body.home .hero .hero-actions .btn,
body.home .home-faq-section .center-cta .btn,
body.home .hero .hero-search-row .btn{
  overflow-wrap:anywhere;
  hyphens:auto;
}
body.home .hero-right{
  min-width:0;
}
body.home .hero .hero-service-stack{
  width:100%;
}
body.home .hero .hero-service-copy{
  max-width:min(560px, 100%);
}
body.home .home-pricing-section .grid2 > *,
body.home .home-transparency-section .grid2 > *,
body.home .home-region-section .feature-grid > *,
body.home .home-faq-section .faq > *{
  min-width:0;
}
body.home .home-pricing-section .kpi-row{
  gap:var(--space-4);
}
body.home .home-pricing-section .kpi-row > :last-child{
  text-align:right;
  white-space:nowrap;
}
@media (min-width:741px) and (max-width:1120px){
  body.home .hero-inner{
    gap:var(--space-6);
  }
  body.home .hero-left{
    max-width:920px;
  }
  body.home .hero .hero-service-stack{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  body.home .hero .hero-service-card{
    aspect-ratio:auto;
    min-height:220px;
    align-items:flex-end;
  }
  body.home .hero .hero-service-copy h2{
    font-size:clamp(18px,2vw,22px);
  }
  body.home .hero .hero-service-copy p{
    font-size:var(--table-fs);
  }
}
@media (max-width:740px){
  body.home .hero{
    padding-top:var(--space-7);
  }
  body.home .hero .hero-title{
    font-size:var(--home-mobile-title-size);
    line-height:1.08;
  }
  body.home .hero .hero-sub{
    font-size:var(--home-mobile-sub-size);
  }
  body.home .hero .hero-actions,
  body.home .home-faq-section .center-cta{
    width:100%;
  }
  body.home .hero .hero-actions .btn,
  body.home .home-faq-section .center-cta .btn,
  body.home .hero .hero-search-row .btn{
    width:100%;
    min-height:var(--home-mobile-cta-min-h);
    padding-left:var(--btn-pad-x);
    padding-right:var(--btn-pad-x);
  }
  body.home .hero .hero-input{
    min-height:var(--home-mobile-cta-min-h);
  }
  body.home .hero .hero-service-card{
    min-height:var(--home-mobile-service-card-min-h);
  }
  body.home .home-pricing-section .grid2,
  body.home .home-transparency-section .grid2{
    gap:var(--space-4);
  }
  body.home .home-region-section .section-head,
  body.home .home-faq-section .section-head{
    margin-bottom:var(--home-section-head-mobile-mb);
  }
  body.home .home-pricing-section .kpi-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
  }
}
@media (max-width:480px){
  body.home .hero-left{
    padding:var(--space-4);
  }
  body.home .hero .hero-service-card{
    min-height:var(--home-mobile-service-card-min-h-compact);
    padding:var(--space-4);
  }
  body.home .hero .hero-service-icon{
    width:var(--home-mobile-service-icon-size);
    height:var(--home-mobile-service-icon-size);
    font-size:var(--home-mobile-service-icon-font-size);
  }
  body.home .hero .hero-service-copy h2{
    font-size:var(--home-mobile-service-title-size);
    line-height:1.15;
  }
  body.home .hero .hero-service-copy p{
    font-size:var(--table-fs);
    line-height:1.35;
  }
  body.home .home-region-section .public-section-title,
  body.home .home-pricing-section .public-section-title,
  body.home .home-transparency-section .public-section-title,
  body.home .home-faq-section .public-section-title{
    font-size:clamp(24px,8vw,32px);
  }
  body.home .home-faq-section .faq-item summary{
    gap:var(--space-3);
  }
  body.home .home-faq-section .faq-item summary:after{
    width:28px;
    height:28px;
  }
}
@media (max-width:360px){
  body.home .home-pricing-section .kpi-row{
    grid-template-columns:1fr;
    gap:var(--home-mobile-kpi-gap);
  }
  body.home .home-pricing-section .kpi-row > :last-child{
    text-align:left;
    white-space:normal;
  }
}

/* Block 103: home final visual hierarchy refinement
   Scope: homepage only. Tightens contrast, CTA hierarchy, depth and section rhythm without introducing alternate components. */

body.home .hero .badge{
  background:var(--home-hero-badge-bg);
  border-color:var(--home-hero-badge-line);
  box-shadow:var(--home-hero-badge-shadow);
}

body.home .hero{
  isolation:isolate;
  background:
    radial-gradient(circle at 24% 18%, var(--home-premium-glow), transparent 34%),
    radial-gradient(circle at 86% 12%, var(--home-soft-glow), transparent 30%),
    linear-gradient(180deg, var(--hero-bg-start), var(--hero-bg-end));
  box-shadow:var(--home-hero-shell-shadow);
}
body.home .hero-left{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(145deg, var(--home-hero-panel-glass-top), var(--home-hero-panel-glass-bottom)),
    var(--home-hero-panel-bg);
  border-color:var(--home-hero-panel-border);
  box-shadow:var(--home-hero-panel-shadow);
}
body.home .hero-left:before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg, var(--home-hero-panel-sheen-left), transparent 34%, var(--home-hero-panel-sheen-right));
  opacity:.55;
}
body.home .hero-left > *{
  position:relative;
  z-index:1;
}
body.home .hero .hero-service-card{
  box-shadow:var(--home-photo-card-shadow);
}
body.home .hero .hero-service-card:hover{
  transform:translateY(-3px);
  border-color:var(--home-photo-card-border-hover);
  box-shadow:var(--home-photo-card-shadow-hover);
}
body.home .home-region-section > .wrap:before,
body.home .home-pricing-section > .wrap:before,
body.home .home-transparency-section > .wrap:before,
body.home .home-faq-section > .wrap:before{
  content:"";
  position:absolute;
  left:var(--pad-desktop);
  right:var(--pad-desktop);
  top:0;
  z-index:2;
  height:var(--border-w);
  background:linear-gradient(90deg, transparent, var(--home-section-hairline), transparent);
  pointer-events:none;
}
@media (max-width:980px){
  body.home .home-region-section > .wrap:before,
body.home .home-pricing-section > .wrap:before,
body.home .home-transparency-section > .wrap:before,
body.home .home-faq-section > .wrap:before{
    left:var(--pad-tablet);
    right:var(--pad-tablet);
  }
}
body.home .home-region-section > .wrap:before{
  display:none;
}
body.home .home-pricing-section,
body.home .home-faq-section{
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--link) 11%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 18%, transparent), color-mix(in srgb, var(--surface) 9%, transparent));
}
@media (max-width:740px){
  body.home .hero-left{
    box-shadow:var(--home-hero-panel-shadow-mobile);
  }
  body.home .home-region-section > .wrap:before,
body.home .home-pricing-section > .wrap:before,
body.home .home-transparency-section > .wrap:before,
body.home .home-faq-section > .wrap:before{
    left:var(--pad-mobile);
    right:var(--pad-mobile);
  }
}

/* Block 107: home hero CTA/search strip integrity
   Scope: homepage only. Refines existing .hero-search/.hero-actions contracts without adding alternate button systems or changing JS/HTML hooks. */
body.home .hero .hero-search{
  max-width:var(--home-search-max);
  padding:var(--space-4);
  border:var(--border-w) solid var(--home-search-line);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, var(--home-search-glass-top), var(--home-search-glass-bottom)),
    var(--home-search-surface);
  box-shadow:var(--home-search-glass-shadow);
}
body.home .hero .hero-search-row{
  display:grid;
  width:100%;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--home-hero-search-gap);
  align-items:center;
  min-width:0;
}
body.home .hero .hero-search-row .btn,
body.home .hero .hero-actions .btn,
body.home .home-faq-section .center-cta .btn{
  flex:0 1 auto;
  min-width:min(100%, 196px);
  min-height:var(--tap-target);
  white-space:normal;
  text-align:center;
}
body.home .hero .hero-input{
  min-width:0;
  background:var(--home-search-input-bg);
  border-color:var(--home-search-line);
  color:var(--text);
  box-shadow:var(--home-search-input-shadow);
}
body.home .hero .hero-input::placeholder{
  color:var(--home-search-placeholder);
}
body.home .hero .hero-input:focus{
  background:var(--home-search-input-bg-focus);
  border-color:color-mix(in srgb, var(--link) 56%, white 16%);
  box-shadow:var(--home-search-input-focus-shadow);
}
body.home .hero .hero-actions,
body.home .home-faq-section .center-cta{
  align-items:center;
}
body.home .hero .hero-search .muted.small{
  display:block;
  max-width:68ch;
  margin-top:var(--home-hero-action-gap);
  line-height:1.5;
}
@media (max-width:740px){
  body.home .hero .hero-search{
    padding:var(--space-3);
    border-radius:var(--radius-lg);
  }
  body.home .hero .hero-search-row{
    grid-template-columns:1fr;
    gap:var(--space-3);
  }
  body.home .hero .hero-actions,
  body.home .home-faq-section .center-cta{
    gap:var(--home-hero-action-gap);
  }
  body.home .hero .hero-actions .btn,
  body.home .home-faq-section .center-cta .btn,
  body.home .hero .hero-search-row .btn{
    min-width:0;
  }
}
@media (max-width:380px){
  body.home .hero .hero-input,
  body.home .hero .hero-search-row .btn,
  body.home .hero .hero-actions .btn,
  body.home .home-faq-section .center-cta .btn{
    min-height:50px;
  }
}

/* Block 108: home lower cards/CTA surface integrity
   Scope: homepage lower sections only. Uses existing component classes and adds one canonical home surface contract for cards, FAQ, KPI rows and section CTAs. */
body.home .home-region-section .feature-card,
body.home .home-pricing-section .card,
body.home .home-transparency-section .card,
body.home .home-faq-section .faq-item{
  background:var(--home-lower-card-bg);
  border-color:var(--home-lower-card-line);
  box-shadow:var(--home-lower-card-shadow);
}
body.home .home-region-section .feature-card:hover,
body.home .home-pricing-section .card:hover,
body.home .home-transparency-section .card:hover,
body.home .home-faq-section .faq-item:hover{
  background:var(--home-lower-card-bg-hover);
  border-color:var(--home-lower-card-line-hover);
  box-shadow:var(--home-lower-card-shadow-hover);
}
body.home .home-region-section .feature-card .icon-ring{
  background:var(--home-lower-icon-bg);
  border-color:var(--home-lower-icon-line);
  box-shadow:var(--home-lower-icon-shadow);
}
body.home .home-region-section .feature-card .muted,
body.home .home-pricing-section .card .muted,
body.home .home-transparency-section .card .muted,
body.home .home-pricing-section .checklist,
body.home .home-transparency-section .bullets,
body.home .home-faq-section .faq-item .muted{
  color:var(--home-lower-copy);
}
body.home .home-pricing-section .checklist li,
body.home .home-faq-section .faq-item[open] summary{
  border-bottom-color:var(--home-lower-row-line);
}
body.home .home-pricing-section .hero-actions,
body.home .home-faq-section .center-cta{
  padding-top:0;
}
body.home .home-transparency-section .btn,
body.home .home-pricing-section .hero-actions .btn{
  min-height:var(--tap-target);
}
@media (max-width:740px){
  body.home .home-region-section .feature-card,
  body.home .home-pricing-section .card,
  body.home .home-transparency-section .card,
  body.home .home-faq-section .faq-item{
    border-radius:var(--radius-lg);
  }
  body.home .home-pricing-section .hero-actions,
  body.home .home-faq-section .center-cta{
    width:100%;
  }
  body.home .home-transparency-section .btn,
  body.home .home-pricing-section .hero-actions .btn,
  body.home .home-faq-section .center-cta .btn{
    width:100%;
  }
}


/* Block 113: home typography and long-word wrapping integrity
   Scope: homepage only. Refines readable text flow, FAQ flex wrapping and mobile copy rhythm without adding a new component standard. */
body.home .hero .hero-sub,
body.home .home-region-section .section-head .muted,
body.home .home-faq-section .section-head .muted,
body.home .home-region-section .feature-card .muted,
body.home .home-pricing-section .card .muted,
body.home .home-transparency-section .card .muted,
body.home .home-faq-section .faq-item .muted,
body.home .home-pricing-section .checklist,
body.home .home-transparency-section .bullets{
  max-width:var(--home-copy-max);
  line-height:1.62;
  overflow-wrap:anywhere;
  hyphens:auto;
}
body.home .home-faq-section .section-head.ta-center .muted{
  max-width:var(--home-narrow-copy-max);
}
body.home .hero .hero-title,
body.home .home-region-section .public-section-title,
body.home .home-pricing-section .public-section-title,
body.home .home-transparency-section .public-section-title,
body.home .home-faq-section .public-section-title,
body.home .home-region-section .public-card-title,
body.home .home-transparency-section .public-card-title,
body.home .hero .hero-service-copy h2,
body.home .home-faq-section .faq-item summary{
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
  text-wrap:balance;
}
body.home .home-faq-section .faq-item summary{
  min-width:0;
}
body.home .home-faq-section .faq-item summary:after{
  margin-left:auto;
}
body.home .home-pricing-section .checklist li,
body.home .home-transparency-section .bullets li,
body.home .hero .hero-service-copy p{
  overflow-wrap:anywhere;
  hyphens:auto;
}
@media (max-width:740px){
  body.home .hero .hero-sub,
  body.home .home-region-section .section-head .muted,
  body.home .home-faq-section .section-head .muted,
  body.home .home-region-section .feature-card .muted,
  body.home .home-pricing-section .card .muted,
  body.home .home-transparency-section .card .muted,
  body.home .home-faq-section .faq-item .muted,
  body.home .home-pricing-section .checklist,
  body.home .home-transparency-section .bullets{
    line-height:1.58;
  }
  body.home .home-faq-section .faq-item summary{
    line-height:1.35;
  }
}
@media (max-width:380px){
  body.home .hero .hero-title,
  body.home .home-region-section .public-section-title,
  body.home .home-pricing-section .public-section-title,
  body.home .home-transparency-section .public-section-title,
  body.home .home-faq-section .public-section-title{
    letter-spacing:-.03em;
  }
  body.home .home-faq-section .faq-item summary:after{
    width:var(--home-faq-icon-size-xs);
    height:var(--home-faq-icon-size-xs);
  }
}

/* Block 114: home hero photo overlay single-source cleanup
   Scope: homepage only. Removes superseded photo overlay declarations and keeps the latest readable image contrast contract as the single active home standard. */
body.home .hero:before{
  opacity:.82;
  background:linear-gradient(90deg, var(--home-hero-overlay-left), var(--home-hero-overlay-right));
}
body.home .hero .hero-service-card:before{
  background:
    linear-gradient(90deg, var(--home-photo-overlay-soft-left) 0%, var(--home-photo-overlay-soft-mid) 50%, var(--home-photo-overlay-soft-right) 100%),
    linear-gradient(180deg, var(--home-photo-highlight-top), var(--home-photo-highlight-bottom));
}
body.home .hero .hero-service-card:after{
  background:linear-gradient(180deg, var(--home-photo-top-shade), var(--home-photo-mid-shade) 72%, var(--home-photo-bottom-shade));
  box-shadow:var(--home-photo-overlay-shadow);
}

/* Block 118: home FAQ interactive-state integrity
   Scope: homepage FAQ only. Restores an explicit keyboard focus state after the home FAQ summary removes the native outline and keeps the disclosure affordance inside the existing home surface contract. */
body.home .home-faq-section .faq-item summary:focus-visible{
  outline:none;
  box-shadow:var(--home-faq-summary-focus-shadow);
}
body.home .home-faq-section .faq-item summary:hover:after,
body.home .home-faq-section .faq-item[open] summary:after{
  background:var(--home-lower-card-bg-hover);
  border-color:var(--home-lower-card-line-hover);
}
body.home .home-faq-section .faq-item[open]{
  border-color:var(--home-lower-card-line-hover);
}


/* No-JS filter fallback: canonical CSS rule instead of an inline style block. */
body:has(.wb-filterbar-noscript-flag) .wb-filterbar .ms-btn{display:none}
body:has(.wb-filterbar-noscript-flag) .wb-filterbar .ms-panel,
body:has(.wb-filterbar-noscript-flag) .wb-filterbar .ms-panel[hidden]{
  display:block !important;
  position:relative;
  top:0;
  margin-top:var(--space-2);
}


/* =========================================================
   Block 82: canonical spacing / typography / responsive guardrails
   Keeps long German business copy readable and prevents one-off spacing drift.
   ========================================================= */
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
}
p, li, .muted, .hint, .ok{
  overflow-wrap:anywhere;
  hyphens:auto;
}
@media (max-width:740px){
  .container, .wrap{width:100%;}
}

/* Canonical page edge contract: desktop content and shell are exactly 40px from the viewport edge. */
@media (min-width:981px){
  header.top .bar, .topbar-inner, footer.footer > .wrap, main.page > .wrap{
    padding-left:var(--pad-desktop);
    padding-right:var(--pad-desktop);
  }
}

/* Block: account shell canonical token closure. */
body.account .card,
body.account .ds-card,
body.account .auth-card,
body.account .table-wrap,
body.account .table-responsive{
  border-color:var(--account-border);
}
body.account .card-header,
body.account .card-subtitle,
body.account .muted{
  overflow-wrap:anywhere;
}
body.account .table-actions form{
  margin:0;
}
@media (max-width:740px){
  body.account .card,
  body.account .ds-card,
  body.account .auth-card{
    border-radius:var(--component-radius);
  }
  body.account .card-header{
    gap:var(--space-3);
  }
}


/* Block 100: payment/invoice/refund canonical finance surfaces
   Keeps routes, forms and JS hooks intact; normalizes financial document UI. */
.invoice-page .invoice-box,
.admin-finance-card,
.account-payments-card,
.account-purchased-card{
  border-color:var(--finance-border);
  border-radius:var(--component-radius);
  background:var(--finance-surface-bg);
}
.invoice-table,
.admin-purchases-table,
.account-payments-table,
.account-purchased-table{
  font-size:var(--table-fs);
}
.invoice-table th,
.invoice-table td,
.admin-purchases-table th,
.admin-purchases-table td,
.account-payments-table th,
.account-payments-table td,
.account-purchased-table th,
.account-purchased-table td{
  vertical-align:top;
}
.admin-purchase-document-actions{
  gap:var(--space-2);
}
.admin-purchase-buyer,
.admin-purchase-title,
.admin-document-reference,
.account-payment-title,
.account-finance-amount{
  overflow-wrap:anywhere;
  hyphens:auto;
}
@media (max-width:720px){
  .invoice-wrap{
    padding-top:var(--space-4);
    padding-bottom:var(--space-4);
  }
  .invoice-head,
  .invoice-total-row{
    gap:var(--space-2);
  }
  .invoice-total-row{
    flex-wrap:wrap;
  }
}


/* =========================================================
   Block 75: public marketplace/Auftrag canonical token guard
   Purpose: keep listing/detail/gallery/wizard surfaces on one premium component system without changing JS hooks.
   ========================================================= */
.wb-detail-facts,
.wb-auftrag-grid{
  gap:var(--marketplace-grid-gap);
}
.wb-detail-fact,
.wb-photo-card,
.region-auftrag-card{
  border:var(--border-w) solid var(--marketplace-card-border);
  border-radius:var(--marketplace-card-radius);
  background:var(--marketplace-card-bg-muted);
}
.wb-auftrag-card,
.region-auftrag-card,
.marketplace-card-grid > .card{
  border-color:var(--marketplace-card-border);
  border-radius:var(--marketplace-card-radius);
}
.wb-gallery-strip .wb-thumb:focus-visible{
  outline:0;
  box-shadow:var(--focus-shadow);
}
.wb-photo-delete:focus-visible,
.wb-lb-btn:focus-visible{
  outline:0;
  box-shadow:var(--focus-shadow);
}
@media (max-width:720px){
  .wb-auftrag-grid{
    gap:var(--marketplace-grid-gap);
  }
  .wb-gallery-strip{
    gap:var(--space-2);
  }
}


/* =========================================================
   Block 103: canonical table/listing consistency
   Keeps admin/account/public tables readable on desktop and safely scrollable on tablet/mobile.
   ========================================================= */
:where(.table-wrap, .table-responsive, .admin-table-wrap, .document-table-wrap, .admin-purchases-table-wrap, .admin-report-table-wrap, .admin-report-detail-table-wrap, .account-payments-table-wrap, .account-purchased-table-wrap, .account-favorites-table-wrap, .account-notifications-table-wrap){
  position:relative;
  max-width:100%;
  background:var(--surface-1);
  border:var(--border-w) solid var(--component-border);
  border-radius:var(--component-radius);
  box-shadow:var(--component-shadow);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-gutter:stable;
}

:where(.table-wrap, .table-responsive, .admin-table-wrap, .document-table-wrap, .admin-purchases-table-wrap, .admin-report-table-wrap, .admin-report-detail-table-wrap, .account-payments-table-wrap, .account-purchased-table-wrap, .account-favorites-table-wrap, .account-notifications-table-wrap) > table{
  min-width:max(var(--table-mobile-min), 100%);
}

.admin-purchases-table-wrap > table{min-width:var(--finance-doc-table-min)}
.document-table-wrap > table{min-width:var(--document-table-min)}
.admin-email-card .table-wrap > table{min-width:var(--admin-email-table-min)}

:where(.table, table) th{
  color:var(--table-head-fg);
  background:var(--table-sticky-bg);
}

:where(.table, table) :where(th,td){
  line-height:1.35;
}

:where(.table-actions, td.actions, td.table-actions){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2);
}

:where(.table-actions, td.actions, td.table-actions) > form{
  margin:0;
}

:where(.table-actions, td.actions, td.table-actions) :where(.btn, button, a){
  min-height:var(--table-action-min-h);
  white-space:nowrap;
}
@media (max-width:740px){
  :where(td.actions, td.table-actions, .table-actions){
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    align-items:stretch;
  }
  :where(td.actions, td.table-actions, .table-actions) > :where(.btn, a, button, form){
    width:100%;
    margin:var(--table-action-mobile-gap-y) 0;
    justify-content:center;
  }
}

/* Design System Regression Block: missing static classes from rendered views */
.lead,
.page-lead{
  color:var(--muted);
  font-size:var(--fs-5);
  line-height:var(--lh-copy);
  max-width:72ch;
  margin:0 0 var(--space-4);
  overflow-wrap:anywhere;
}
.page-lead{
  margin-top:calc(var(--space-2) * -1);
}
@media (max-width: 720px){
  .lead,
  .page-lead{
    font-size:var(--fs-4);
    margin-bottom:var(--space-3);
  }
}

/* Design System Regression Block: JS interaction hook states
   Scope: visual feedback for existing JavaScript hooks only; selectors are not renamed. */
#wz_save_state{
  color:var(--success);
  font-weight:700;
  opacity:0;
  transform:translateY(2px);
  transition:opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease);
}
#wz_save_state.is-visible{
  opacity:1;
  transform:translateY(0);
}
[data-wb-submit-locked="1"] :where(button[aria-disabled="true"], input[aria-disabled="true"]){
  box-shadow:none;
}
@media (prefers-reduced-motion: reduce){
  #wz_save_state{
    transition:none;
    transform:none;
  }
}

/* Block 109: verified home hero layout contract from visual QA
   One source of truth for the homepage hero shell, search/action gaps and photo-card spacing. */
body.home .hero{
  margin-left:var(--pad-desktop);
  margin-right:var(--pad-desktop);
  padding:0;
}
body.home .hero .hero-service-stack{
  gap:var(--home-hero-card-gap);
}
@media (max-width:1180px){
  body.home .hero{margin-left:var(--pad-tablet);margin-right:var(--pad-tablet)}
}
@media (max-width:740px){
  body.home .hero{margin-left:var(--pad-mobile);margin-right:var(--pad-mobile)}
  body.home .hero-inner{padding:var(--space-4)}
}

/* Block 30: public service filter single-source UI
   Scope: Dienstleistungen public filter only; uses the canonical .filters/.btn/.empty contracts and keeps existing routes/hooks unchanged. */
.public-filter-card .public-service-filter{
  align-items:end;
}
.public-filter-card .public-filter-actions{
  display:flex;
  flex-direction:row;
  gap:var(--form-filter-gap);
  align-items:end;
  justify-content:flex-start;
  min-width:0;
}
.public-filter-card .public-filter-actions .btn{
  min-height:var(--tap-target);
}
@media (min-width:721px){
  .public-filter-card .public-service-filter{
    grid-template-columns:minmax(260px,1fr) auto;
  }
}
@media (max-width:720px){
  .public-filter-card .public-filter-actions{
    align-items:stretch;
  }
  .public-filter-card .public-filter-actions .btn{
    width:100%;
  }
}
/* =========================================================
   Block 8.20: frontend design-system consolidation
   Scope: CSS-only normalization for rendered view classes and responsive UI contracts.
   No JS hook/class rename; existing route/view contracts remain unchanged.
   ========================================================= */
/* Missing rendered utility/component classes: give every used class a canonical token-backed style. */
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.h4{font-size:var(--fs-4);line-height:1.25;font-weight:900;color:var(--text);margin:0 0 var(--space-2);overflow-wrap:anywhere;}
.pad{padding:var(--space-card);}
.cms-colors{min-width:0;}
.ico-center,.ico-right{display:inline-block;width:1.1em;height:1.1em;position:relative;}
.ico-center::before,.ico-center::after,.ico-right::before,.ico-right::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:var(--radius-pill);background:currentColor;}
.ico-center::before{top:.32em;left:.16em;right:.16em;}
.ico-center::after{bottom:.32em;left:.16em;right:.16em;}
.ico-right::before{top:.32em;left:.28em;}
.ico-right::after{bottom:.32em;left:.08em;}
.top{min-width:0;}
.soft{background:var(--surface-muted);}
.icon-action.disabled,
.disabled[aria-disabled="true"]{opacity:var(--disabled-opacity);cursor:not-allowed;pointer-events:none;filter:saturate(.75);}
.wb-admin-table-empty{margin:0;min-height:var(--admin-table-empty-min-h);justify-content:center;align-items:flex-start;}

/* Button action baseline remains here only for native buttons; visual states live in the canonical component layer. */
:where(button,input[type=submit],input[type=button],input[type=reset]){touch-action:manipulation;}

@media (min-width:741px) and (max-width:1180px){
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  :where(.toolbar,.filters,.filters-row,.wb-filterbar,.form-actions,.card-header-actions){flex-wrap:wrap;}
}
@media (max-width:740px){
  .cols-2,.cols-3{grid-template-columns:1fr;}
  .pad{padding:var(--space-3);}
  /* Button/action mobile layout is owned by the canonical mobile portrait action block above. */
}


/* Block 8 footer: canonical configurable production footer */
.wb-footer{
  margin-top:var(--space-8);
  border-top:var(--border-w) solid var(--line);
  background:linear-gradient(180deg, var(--bg2), var(--bg));
  color:var(--text);
}
.wb-footer__wrap{padding:var(--space-8) 0 var(--space-4)}
.wb-footer__top{
  display:grid;
  grid-template-columns:1.05fr 1fr 1fr 1fr;
  gap:var(--space-7);
  align-items:start;
}
.wb-footer__top > *{min-width:0}
.wb-footer__brand,
.wb-footer__nav{
  min-width:0;
}
.wb-footer__nav{
  border-left:var(--border-w) solid var(--line);
  padding-left:var(--space-6);
}
.wb-footer__logo{
  font-weight:900;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1;
  letter-spacing:var(--letter-tight);
  overflow-wrap:anywhere;
}
.wb-footer__logo::first-letter{color:var(--text)}
.wb-footer__claim{
  margin:var(--space-5) 0 var(--space-3);
  font-size:var(--fs-lg);
  line-height:var(--lh-tight);
  font-weight:800;
  color:var(--text);
  max-width:28rem;
}
.wb-footer__text{
  margin:0;
  color:var(--muted);
  line-height:var(--lh-normal);
  max-width:32rem;
}
.wb-footer__cta{margin-top:var(--space-5);display:inline-flex;gap:var(--space-3);align-items:center}
.wb-footer h4{
  margin:0 0 var(--space-4);
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  font-weight:900;
  color:var(--text);
}
.wb-footer__nav a,
.wb-footer__region-card a{
  min-height:var(--tap-target);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  color:var(--shell-footer-link);
  text-decoration:none;
  border-radius:var(--radius-sm);
  overflow-wrap:anywhere;
  hyphens:auto;
}
.wb-footer__nav a::before{
  content:'›';
  color:var(--link);
  font-size:1.5em;
  line-height:1;
}
.wb-footer__nav a:hover,
.wb-footer__region-card a:hover{color:var(--text)}
.wb-footer a:focus-visible,
.wb-footer button:focus-visible{
  outline:var(--focus-outline-w) solid var(--focus-color);
  outline-offset:3px;
}
.wb-footer__regions{margin-top:var(--space-8)}
.wb-footer__section-title{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--space-4);
  color:var(--link);
}
.wb-footer__section-title::before,
.wb-footer__section-title::after{
  content:'';
  height:var(--border-w);
  background:var(--line);
}
.wb-footer__section-title h4{margin:0;color:var(--text)}
.wb-footer__region-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-5);
  margin-top:var(--space-4);
}
.wb-footer__region-card{
  min-width:0;
  padding:var(--space-4) var(--space-5);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.wb-footer__region-card a span{color:var(--link)}
.wb-footer__trust{
  margin-top:var(--space-5);
  display:grid;
  grid-template-columns:1.55fr .7fr 1.25fr;
  gap:var(--space-5);
  align-items:stretch;
  padding:var(--space-5);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-xl);
  background:linear-gradient(180deg, var(--card), var(--surface-muted));
  box-shadow:var(--shadow-md);
}
.wb-footer__payments,
.wb-footer__provider,
.wb-footer__social{
  min-width:0;
}
.wb-footer__provider,
.wb-footer__social{
  border-left:var(--border-w) solid var(--line);
  padding-left:var(--space-5);
}
.wb-footer__trust-head{
  display:flex;
  gap:var(--space-4);
  align-items:flex-start;
}
.wb-footer__trust-head > span{
  width:var(--tap-target);
  height:var(--tap-target);
  display:grid;
  place-items:center;
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  color:var(--link);
  flex:0 0 auto;
}
.wb-footer__trust-head h4{margin:0;font-size:var(--fs-xl)}
.wb-footer__trust-head p{margin:var(--space-1) 0 0;color:var(--muted);line-height:var(--lh-normal)}
.wb-footer__payment-list,
.wb-footer__social-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  margin-top:var(--space-4);
}
.wb-footer__payment{
  min-height:var(--tap-target);
  min-width:72px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 var(--space-3);
  border-radius:var(--radius-sm);
  border:var(--border-w) solid var(--line);
  background:var(--text);
  color:var(--bg);
  font-weight:900;
  line-height:1;
}
.wb-footer__provider{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-3);
}
.wb-footer__provider strong{font-size:clamp(1.6rem, 3vw, 2.25rem);letter-spacing:var(--letter-tight)}
.wb-footer__provider span{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  justify-content:center;
  padding:0 var(--space-3);
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--muted);
}
.wb-footer__social-link{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:var(--border-w) solid var(--line);
  border-radius:var(--radius-md);
  background:var(--bg2);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  box-shadow:var(--shadow-sm);
}
.wb-footer__social-link:hover{transform:translateY(-1px);color:var(--link)}
.wb-footer__bottom{
  margin-top:var(--space-5);
  padding-top:var(--space-4);
  border-top:var(--border-w) solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:var(--space-4);
  align-items:center;
  color:var(--shell-footer-copy);
  font-size:var(--fs-sm);
}
.wb-footer__bottom-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--space-4);
}
.wb-footer__bottom-links a,
.wb-footer__bottom-links button{
  color:var(--shell-footer-link);
  text-decoration:none;
}
.wb-footer__bottom-links .link-button{
  appearance:none;
  border:0;
  background:transparent;
  font:inherit;
  padding:0;
  cursor:pointer;
}
.wb-footer__bottom-links a:hover,
.wb-footer__bottom-links button:hover{color:var(--text)}
@media(max-width:1100px){
  .wb-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-footer__region-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wb-footer__trust{grid-template-columns:1fr 1fr}
  .wb-footer__provider{border-left:0;border-top:var(--border-w) solid var(--line);padding-left:0;padding-top:var(--space-5);grid-column:1 / -1;order:3}
}
@media(max-width:740px){
  .wb-footer__wrap{padding-top:var(--space-6)}
  .wb-footer__top,
  .wb-footer__region-grid,
  .wb-footer__trust{grid-template-columns:1fr}
  .wb-footer__nav,
  .wb-footer__social,
  .wb-footer__provider{border-left:0;padding-left:0}
  .wb-footer__nav{border-top:var(--border-w) solid var(--line);padding-top:var(--space-5)}
  .wb-footer__trust{padding:var(--space-4)}
  .wb-footer__social{border-top:var(--border-w) solid var(--line);padding-top:var(--space-5)}
  .wb-footer__bottom{align-items:flex-start;flex-direction:column}
  .wb-footer__bottom-links{justify-content:flex-start}
}
@media(max-width:420px){
  .wb-footer__section-title{grid-template-columns:1fr;justify-items:start}
  .wb-footer__section-title::before,
  .wb-footer__section-title::after{width:100%}
  .wb-footer__region-card{padding:var(--space-3) var(--space-4)}
  .wb-footer__payment{min-width:0;flex:1 1 45%}
  .wb-footer__social-link{width:46px;height:46px}
}