/* Wizard-specific surfaces on top of cms-app theme `schlauesocke-2026`
 * (see theme-cms-schlauesocke-2026-tokens.css + landing-kit.css). */

html[data-theme="schlauesocke-2026"] {
  color-scheme: light;

  /* Local aliases — align names with cms tokens where useful for wizard-only rules. */
  --schlauesocke-yellow: #f8d749;
  --schlauesocke-yellow-hover: #eacb3e;
  --schlauesocke-green: #5ba54a;
  --schlauesocke-green-hover: #4f9240;
  --schlauesocke-dark-blue: #1f2340;
  --schlauesocke-text-primary: #1f2340;
  --schlauesocke-text-secondary: #475569;
  --schlauesocke-border: #ededed;
  --schlauesocke-alert-bg: #fffef5;

  /* Wizard layout tokens — page canvas matches cms cream (`--ss-page-*`). */
  --bg: var(--ss-page-end);
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-3: #eef1f6;

  --text: var(--ss-page-body);
  --muted: var(--ss-text-muted);

  --border: rgba(15, 23, 42, 0.1);

  /* Yellow kept for step dots, chips; primary actions use saturated green below. */
  --accent: var(--schlauesocke-yellow);
  --accent-text: var(--schlauesocke-text-primary);
  --success: #16a34a;
  --danger: #dc2626;
  --wizard-steps-sticky-top: 16px;
  --wizard-sticky-nav-top: 180px;

  /* Wizard-only: bump the page max-width by 60px above the shared CMS token
   * (1280px → 1340px) so the wizard hero + grid have a touch more horizontal
   * breathing room. The shared token in `theme-cms-schlauesocke-2026-tokens.css`
   * stays untouched so the main CMS layout is unaffected. */
  --ss-max-width: 1340px;

  /* Primary button chrome: see `landing-kit.css` (--ss-btn-primary-* on schlauesocke-2026). */
}

/* Page canvas: cream base + soft yellow "shine" glow at the top.
 * The radial gradient sits behind the white site header and fades out before
 * the hero content starts, giving the header band a warm brand tint similar
 * to the cream/yellow halo on schlauesocke.de marketing pages. The
 * `background-attachment: fixed` is intentional so the glow stays anchored
 * to the viewport top while the wizard scrolls. */
html[data-theme="schlauesocke-2026"] body {
  background:
    radial-gradient(
      ellipse 70% 520px at 50% 0%,
      rgba(248, 215, 73, 0.28) 0%,
      rgba(248, 215, 73, 0.14) 28%,
      rgba(248, 215, 73, 0.05) 55%,
      transparent 78%
    ),
    linear-gradient(180deg, var(--ss-page-start) 0%, var(--ss-page-end) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ss-page-body);
  font-family: var(--ss-font);
}

/* Primary actions — same treatment as header CTAs (rounded rect, brand green gradient). */
html[data-theme="schlauesocke-2026"] .btn-primary,
html[data-theme="schlauesocke-2026"] .btn-cta-pulse {
  background: var(--ss-btn-primary-gradient);
  color: var(--ss-text-inverse);
  border: 1px solid rgba(26, 110, 72, 0.42);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-btn-primary-shadow);
  font-weight: 700;
  min-height: 48px;
}

html[data-theme="schlauesocke-2026"] .btn-cta-pulse {
  animation: none;
}

html[data-theme="schlauesocke-2026"] .btn-primary:hover,
html[data-theme="schlauesocke-2026"] .btn-cta-pulse:hover {
  background: var(--ss-btn-primary-gradient-hover);
  color: var(--ss-text-inverse);
  border-color: rgba(20, 92, 60, 0.5);
  box-shadow: var(--ss-btn-primary-shadow-hover);
}

html[data-theme="schlauesocke-2026"] .btn-primary.btn-with-subheadline small,
html[data-theme="schlauesocke-2026"] .btn-cta-pulse.btn-with-subheadline small {
  color: rgba(255, 255, 255, 0.92);
}

html[data-theme="schlauesocke-2026"] .btn-primary:focus-visible,
html[data-theme="schlauesocke-2026"] .btn-cta-pulse:focus-visible {
  outline: 2px solid rgba(8, 207, 111, 0.55);
  outline-offset: 2px;
}

/* Header: match wizard primary (was full pill + stronger green glow from landing-kit). */
html[data-theme="schlauesocke-2026"] .ss-topbar .ss-btn.ss-btn--green {
  border-radius: var(--ss-radius-md);
  font-weight: 700;
  min-height: 48px;
  padding: 0 1.25rem;
  background: var(--ss-btn-primary-gradient);
  color: var(--ss-text-inverse);
  border: 1px solid rgba(26, 110, 72, 0.42);
  box-shadow: var(--ss-btn-primary-shadow);
}

html[data-theme="schlauesocke-2026"] .ss-topbar .ss-btn.ss-btn--green:hover {
  background: var(--ss-btn-primary-gradient-hover);
  border-color: rgba(20, 92, 60, 0.5);
  box-shadow: var(--ss-btn-primary-shadow-hover);
}

html[data-theme="schlauesocke-2026"] .ss-topbar .ss-btn:hover {
  transform: none;
}

/* Secondary / outline — same radius & weight as primary. */
html[data-theme="schlauesocke-2026"] .btn-secondary {
  background: transparent;
  color: var(--ss-page-heading);
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: var(--ss-radius-md);
  font-weight: 600;
  min-height: 48px;
  box-shadow: none;
}

html[data-theme="schlauesocke-2026"] .btn-secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.28);
}

html[data-theme="schlauesocke-2026"] .btn-secondary.active {
  border-color: rgba(8, 207, 111, 0.42);
  background: rgba(220, 252, 241, 0.55);
  box-shadow: none;
}

html[data-theme="schlauesocke-2026"] .site-shell-footer {
  border-top-color: rgba(15, 23, 42, 0.1);
  color: var(--muted);
}

html[data-theme="schlauesocke-2026"] .panel {
  background: var(--ss-elevated-bg);
  border: 1px solid var(--ss-elevated-border);
  border-radius: var(--ss-radius-2xl);
  box-shadow: var(--ss-elevated-shadow);
  backdrop-filter: none;
}

/* On step 1 the hero is meant to sit directly on the cream + yellow-shine
 * page canvas (matching website-page sections that span full width with the
 * background flowing edge-to-edge). The default white card chrome on
 * `.panel.wizard-main` would visually narrow the hero into a card, so we
 * strip it for step 1 only. Other steps keep the elevated white surface. */
html[data-theme="schlauesocke-2026"] .panel.wizard-main.wizard-step-1 {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

html[data-theme="schlauesocke-2026"] .step-item {
  border-color: rgba(15, 23, 42, 0.1);
  background: rgba(241, 245, 249, 0.9);
  border-radius: var(--ss-radius-md);
}

html[data-theme="schlauesocke-2026"] .step-item.active {
  border-color: rgba(212, 168, 0, 0.55);
  background: rgba(248, 215, 73, 0.18);
}

html[data-theme="schlauesocke-2026"] .step-number {
  background: var(--panel-3);
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .sock-option-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  color: var(--ss-page-body);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .sock-option-card.active {
  border-color: rgba(91, 165, 74, 0.85);
  background: var(--ss-elevated-bg);
  box-shadow: 0 0 0 1px rgba(91, 165, 74, 0.25), var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .step-1-template-list {
  border-top-color: rgba(22, 163, 74, 0.35);
}

html[data-theme="schlauesocke-2026"] .template-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .asset-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .template-card.active {
  border-color: rgba(22, 163, 74, 0.72);
  box-shadow: var(--ss-elevated-shadow), 0 0 0 1px rgba(22, 163, 74, 0.28);
}

html[data-theme="schlauesocke-2026"] .media-browser {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-edit-hero {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-render-preview-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .preview-frame {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .preview-frame.request-preview-frame {
  border: none;
  background: transparent;
}

html[data-theme="schlauesocke-2026"] .canvas-source-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .canvas-palette-tooltip {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .canvas-palette-tooltip-item {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-sm);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-mode-chip {
  border: 1px solid var(--ss-elevated-border);
  background: rgba(241, 245, 249, 0.95);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-mode-chip.active {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(219, 234, 254, 0.65);
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .design-sock-variant-select {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(219, 234, 254, 0.65);
  color: var(--text);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-sock-variant-select:hover {
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(219, 234, 254, 0.82);
}

html[data-theme="schlauesocke-2026"] .live-preview-toggle {
  border-color: rgba(212, 168, 0, 0.45);
  background: rgba(254, 252, 232, 0.9);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .live-preview-toggle-slider {
  background: rgba(226, 232, 240, 0.95);
  border-color: rgba(15, 23, 42, 0.15);
}

html[data-theme="schlauesocke-2026"] .mock-segment {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .mock-segment.active {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(219, 234, 254, 0.75);
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .stage-badge {
  border: 1px solid var(--ss-elevated-border);
  background: rgba(241, 245, 249, 0.9);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .stage-badge.active {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(220, 252, 231, 0.85);
  color: #14532d;
}

html[data-theme="schlauesocke-2026"] .media-upload-dropzone {
  border-color: rgba(59, 130, 246, 0.35);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-elevated-shadow);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.95), rgba(241, 245, 249, 0.98)),
    radial-gradient(circle at top, rgba(59, 130, 246, 0.08), transparent 40%);
}

html[data-theme="schlauesocke-2026"] .media-upload-dropzone.prominent-upload {
  border-color: rgba(22, 163, 74, 0.45);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-btn-primary-shadow);
  background:
    linear-gradient(180deg, rgba(236, 253, 245, 0.95), rgba(240, 253, 244, 1)),
    radial-gradient(circle at top left, rgba(34, 197, 94, 0.12), transparent 42%);
}

html[data-theme="schlauesocke-2026"] .media-upload-dropzone.prominent-upload .media-upload-dropzone-copy strong {
  color: #14532d;
}

html[data-theme="schlauesocke-2026"] .media-upload-dropzone-icon::before {
  border-bottom-color: #166534;
}

html[data-theme="schlauesocke-2026"] .media-upload-dropzone-icon::after {
  background: #166534;
}

html[data-theme="schlauesocke-2026"] .design-quote-shortcut,
html[data-theme="schlauesocke-2026"] .design-quote-shortcut-bottom {
  border-color: rgba(212, 168, 0, 0.45);
  background: var(--schlauesocke-alert-bg);
  color: var(--schlauesocke-dark-blue);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-quote-shortcut:hover,
html[data-theme="schlauesocke-2026"] .design-quote-shortcut-bottom:hover {
  border-color: rgba(180, 83, 9, 0.55);
  background: rgba(254, 243, 199, 0.98);
  color: var(--schlauesocke-dark-blue);
}

html[data-theme="schlauesocke-2026"] .btn-secondary-soft {
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: rgba(248, 250, 252, 0.98);
  color: var(--ss-page-heading);
  border-radius: var(--ss-radius-md);
  font-weight: 600;
  min-height: 48px;
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .btn-secondary-soft:hover {
  border-color: rgba(15, 23, 42, 0.28);
  background: #ffffff;
}

html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section > .btn-row:not(.wizard-step-footer-nav),
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section > .render-progress-panel > .btn-row:not(.wizard-step-footer-nav),
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section .yarn-single-image-step .btn-row:not(.wizard-step-footer-nav),
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section .packaging-screen > .btn-row,
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section .request-form-panel > .request-nav-row,
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section > .wizard-step-footer-nav.btn-row,
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section > .render-progress-panel > .wizard-step-footer-nav.btn-row,
html[data-theme="schlauesocke-2026"] .wizard-content .wizard-section .yarn-single-image-step > .wizard-step-footer-nav.btn-row {
  border: none;
  background: transparent;
  backdrop-filter: none;
}

html[data-theme="schlauesocke-2026"] [data-step-section="2"] .btn-row button:disabled.btn-primary {
  background: rgba(148, 163, 184, 0.4);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(148, 163, 184, 0.45);
  box-shadow: none;
}

html[data-theme="schlauesocke-2026"] .meta-note {
  background: rgba(254, 252, 232, 0.95);
  color: var(--muted);
  border: 1px solid rgba(212, 168, 0, 0.2);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .size-quantity-panel {
  border-color: transparent;
  background: transparent;
}

html[data-theme="schlauesocke-2026"] .size-quantity-item {
  border-color: rgba(15, 23, 42, 0.08);
  background: transparent;
  padding: 12px clamp(16px, 3vw, 22px);
}

html[data-theme="schlauesocke-2026"] .size-quantity-item-label {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .size-quantity-active-switch {
  background: rgba(226, 232, 240, 0.95);
  border-color: rgba(15, 23, 42, 0.18);
}

html[data-theme="schlauesocke-2026"] .size-quantity-active-switch::after {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
}

html[data-theme="schlauesocke-2026"] .size-quantity-active-switch[aria-checked="true"] {
  background: rgba(22, 163, 74, 0.35);
  border-color: rgba(22, 163, 74, 0.55);
}

html[data-theme="schlauesocke-2026"] .size-quantity-summary strong {
  color: var(--text);
}

/* Range sliders: visible track + thumb on white cards (native UI is too light) */
html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"] {
  accent-color: #15803d;
  height: 28px;
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  border: 1px solid #64748b;
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  border: 1px solid #64748b;
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #15803d;
  border: 2px solid #ffffff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.3);
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]:disabled::-webkit-slider-runnable-track {
  opacity: 0.5;
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]:disabled::-webkit-slider-thumb {
  opacity: 0.55;
  background: #64748b;
}

html[data-theme="schlauesocke-2026"] .size-quantity-item input[type="range"]:disabled::-moz-range-thumb {
  opacity: 0.55;
  background: #64748b;
}

html[data-theme="schlauesocke-2026"] .packaging-option-card {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .packaging-option-visual {
  min-height: 186px;
  border: 1px solid rgba(22, 163, 74, 0.24);
  border-radius: var(--ss-radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  box-shadow: none;
}

html[data-theme="schlauesocke-2026"] .packaging-option-visual::after {
  background: rgba(148, 163, 184, 0.9);
  color: #fff;
}

html[data-theme="schlauesocke-2026"] .packaging-photo {
  width: 100%;
  height: 100%;
  min-height: 170px;
  max-height: none;
  object-fit: cover;
  border-radius: var(--ss-radius-md);
}

html[data-theme="schlauesocke-2026"] .packaging-option-card strong {
  color: var(--text);
  font-size: 12px;
}

html[data-theme="schlauesocke-2026"] .packaging-option-copy span:last-child {
  color: var(--muted);
  font-size: 12px;
}

html[data-theme="schlauesocke-2026"] .packaging-placeholder-glyph {
  /* Was 0.28 alpha (~2.5:1) — too faint over the soft white card.
   * 0.45 still reads as a placeholder while staying visible. */
  color: rgba(15, 23, 42, 0.45);
}

html[data-theme="schlauesocke-2026"] .packaging-placeholder-label {
  /* Was 0.52 (~4.0:1), bumped to 0.65 (~5.2:1, AA normal). */
  color: rgba(15, 23, 42, 0.65);
}

html[data-theme="schlauesocke-2026"] .packaging-option-card.active {
  border-color: rgba(22, 163, 74, 0.72);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ss-elevated-shadow), 0 0 0 1px rgba(22, 163, 74, 0.28);
}

html[data-theme="schlauesocke-2026"] .packaging-option-card.active strong {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .packaging-option-card.active .packaging-option-visual {
  border-color: rgba(22, 163, 74, 0.44);
}

html[data-theme="schlauesocke-2026"] .packaging-option-card.active .packaging-option-visual::after {
  background: #f6d548;
  color: #1f2937;
}

html[data-theme="schlauesocke-2026"] .packaging-option-card.active::before {
  background: #166534;
  color: #f0fdf4;
  border: 1px solid #14532d;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

html[data-theme="schlauesocke-2026"] .packaging-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .packaging-upload-copy,
html[data-theme="schlauesocke-2026"] .packaging-notes-label {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .packaging-upload-surface {
  border-color: rgba(59, 130, 246, 0.25);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 1), rgba(255, 255, 255, 1)),
    radial-gradient(circle at top, rgba(59, 130, 246, 0.06), transparent 45%);
}

html[data-theme="schlauesocke-2026"] .packaging-upload-surface .media-upload-dropzone-copy strong {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .packaging-upload-surface .media-upload-dropzone-copy span:last-child {
  color: var(--muted);
}

html[data-theme="schlauesocke-2026"] .packaging-file-item {
  background: rgba(248, 250, 252, 0.98);
  border: 1px solid var(--ss-elevated-border);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .request-address-card,
html[data-theme="schlauesocke-2026"] .request-meta-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .request-offer-summary-title,
html[data-theme="schlauesocke-2026"] .request-offer-summary-list strong,
html[data-theme="schlauesocke-2026"] .request-offer-summary-list span {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .request-offer-summary-list {
  color: #334155;
}

html[data-theme="schlauesocke-2026"] .request-address-card input,
html[data-theme="schlauesocke-2026"] .request-address-card select,
html[data-theme="schlauesocke-2026"] .request-meta-card input,
html[data-theme="schlauesocke-2026"] .request-meta-card textarea {
  background: rgba(248, 250, 252, 0.98);
  border-color: var(--border);
}

html[data-theme="schlauesocke-2026"] .request-preview-card {
  border: none;
  background: transparent;
}

html[data-theme="schlauesocke-2026"] .wizard-trustpilot-wrap {
  border-top-color: rgba(15, 23, 42, 0.1);
}

html[data-theme="schlauesocke-2026"] .wizard-step1-benefits-title {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .wizard-step1-benefits-list {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .wizard-step1-advantage-bar {
  border-color: rgba(203, 213, 225, 0.95);
  background: rgba(248, 250, 252, 0.96);
}

html[data-theme="schlauesocke-2026"] .wizard-step1-advantage-item strong {
  color: #0f172a;
}

html[data-theme="schlauesocke-2026"] .wizard-step1-advantage-item span {
  color: rgba(51, 65, 85, 0.85);
}

html[data-theme="schlauesocke-2026"] .wizard-step1-advantage-cta {
  background: var(--ss-btn-primary-gradient);
  color: var(--ss-text-inverse);
  border: 1px solid rgba(26, 110, 72, 0.42);
  border-radius: var(--ss-radius-md);
  font-weight: 700;
  box-shadow: var(--ss-btn-primary-shadow);
}

html[data-theme="schlauesocke-2026"] .wizard-step1-advantage-cta:hover {
  background: var(--ss-btn-primary-gradient-hover);
  border-color: rgba(20, 92, 60, 0.5);
  box-shadow: var(--ss-btn-primary-shadow-hover);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-inner {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-2xl);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-avatar {
  border-color: rgba(212, 168, 0, 0.55);
  background: rgba(241, 245, 249, 0.9);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-kicker {
  color: var(--schlauesocke-dark-blue);
  font-weight: 600;
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-name {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-copy {
  color: var(--muted);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-link {
  color: var(--text);
  background: rgba(248, 250, 252, 0.98);
  border: 1px solid var(--ss-elevated-border);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-link:hover {
  border-color: rgba(212, 168, 0, 0.55);
  background: rgba(255, 251, 235, 0.95);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-link:focus-visible {
  outline-color: rgba(22, 163, 74, 0.45);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-link-label {
  color: var(--schlauesocke-dark-blue);
  font-weight: 600;
}

/* Contact widget icon medallion — match the light card surface (yellow tint
 * with the brand dark-blue glyph for legibility on white). */
html[data-theme="schlauesocke-2026"] .wizard-contact-widget-link-icon {
  background: rgba(248, 215, 73, 0.18);
  border-color: rgba(212, 168, 0, 0.45);
  color: var(--schlauesocke-dark-blue);
}

/* Trust footer below the contact links: light card surface, brand-green
 * shield, dark headline + muted sub. Mirrors the contact card itself so it
 * reads as part of the same widget. */
html[data-theme="schlauesocke-2026"] .wizard-contact-widget-trust {
  background: rgba(243, 250, 239, 0.95);
  border: 1px solid rgba(91, 165, 74, 0.35);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-trust-icon {
  color: var(--schlauesocke-green, #5ba54a);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-trust-text strong {
  color: var(--schlauesocke-text-primary);
}

html[data-theme="schlauesocke-2026"] .wizard-contact-widget-trust-text span {
  color: var(--schlauesocke-text-secondary);
}

html[data-theme="schlauesocke-2026"] input::placeholder,
html[data-theme="schlauesocke-2026"] textarea::placeholder {
  /* Was 0.42 alpha (~3.4:1) — bumped to 0.58 (~4.7:1) so placeholder text
   * still reads on the soft input-background without being mistaken for value text. */
  color: rgba(15, 23, 42, 0.58);
}

html[data-theme="schlauesocke-2026"] .yarn-map-wrap {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .yarn-status-item {
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid var(--ss-elevated-border);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .yarn-preview-render-busy {
  background: rgba(255, 255, 255, 0.88);
}

html[data-theme="schlauesocke-2026"] .yarn-preview-render-busy-headline {
  color: var(--text);
  text-shadow: none;
}

html[data-theme="schlauesocke-2026"] .modal-overlay {
  background: rgba(15, 23, 42, 0.45);
}

html[data-theme="schlauesocke-2026"] .modal-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-2xl);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .asset-editor-control-group {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .suggestion-item {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .suggestion-item:hover,
html[data-theme="schlauesocke-2026"] .suggestion-item:focus-visible {
  background: rgba(240, 253, 244, 0.95);
}

html[data-theme="schlauesocke-2026"] .yarn-suggestion-list-headline {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .yarn-suggestion-canvas-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .editor-guide-popover-card {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .editor-guide-popover-close {
  background: rgba(241, 245, 249, 0.95);
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .render-progress-hero h2 {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .render-progress-copy {
  color: var(--muted);
}

html[data-theme="schlauesocke-2026"] .render-progress-percent {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .render-progress-message {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .render-progress-hash {
  color: var(--muted);
}

html[data-theme="schlauesocke-2026"] .yarn-transition-overlay {
  background: rgba(248, 250, 252, 0.96);
}

html[data-theme="schlauesocke-2026"] .yarn-transition-overlay-headline {
  color: var(--text);
  text-shadow: none;
}

html[data-theme="schlauesocke-2026"] .yarn-transition-overlay-copy {
  color: var(--muted);
}

html[data-theme="schlauesocke-2026"] .design-preview-object-toolbar {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .design-preview-object-toolbar button {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(248, 250, 252, 0.98);
  color: var(--text);
  border-radius: var(--ss-radius-md);
  min-height: 40px;
  font-weight: 600;
}

html[data-theme="schlauesocke-2026"] .design-preview-object-toolbar button:hover {
  background: rgba(241, 245, 249, 1);
}

html[data-theme="schlauesocke-2026"] .design-preview-object-toolbar .toolbar-confirm-btn {
  background: var(--ss-btn-primary-gradient);
  color: var(--ss-text-inverse);
  border: 1px solid rgba(26, 110, 72, 0.42);
  border-radius: var(--ss-radius-md);
  font-weight: 700;
  box-shadow: var(--ss-btn-primary-shadow);
}

html[data-theme="schlauesocke-2026"] .design-preview-object-toolbar .toolbar-confirm-btn:hover {
  background: var(--ss-btn-primary-gradient-hover);
  border-color: rgba(20, 92, 60, 0.5);
  box-shadow: var(--ss-btn-primary-shadow-hover);
}

html[data-theme="schlauesocke-2026"] .design-preview-render-busy.design-canvas-loading-overlay {
  background: rgba(255, 255, 255, 0.88);
}

html[data-theme="schlauesocke-2026"] .design-canvas-loading-label {
  color: var(--text);
  text-shadow: none;
}

html[data-theme="schlauesocke-2026"] .wizard-browser-editor-hint {
  border-color: rgba(14, 165, 233, 0.35);
  background: rgba(224, 242, 254, 0.65);
  color: #0c4a6e;
}

html[data-theme="schlauesocke-2026"] .design-assist-self-switch-headline {
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .assisted-briefing-design-option {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .harmonize-params-panel {
  border: 1px solid var(--ss-elevated-border);
  background: var(--ss-elevated-bg);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .harmonize-params-output {
  background: var(--ss-elevated-bg);
  border: 1px solid var(--ss-elevated-border);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
  color: var(--text);
}

html[data-theme="schlauesocke-2026"] .code-block {
  border: 1px solid var(--ss-elevated-border);
  background: rgba(241, 245, 249, 0.98);
  color: var(--text);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-elevated-shadow);
}

/* Flat hover on uploads (cms cards do not lift). */
html[data-theme="schlauesocke-2026"] .media-upload-dropzone:hover,
html[data-theme="schlauesocke-2026"] .media-upload-dropzone:focus-visible,
html[data-theme="schlauesocke-2026"] .media-upload-dropzone.drag-active {
  transform: none;
  box-shadow: var(--ss-elevated-shadow);
}

html[data-theme="schlauesocke-2026"] .media-upload-dropzone.prominent-upload:hover,
html[data-theme="schlauesocke-2026"] .media-upload-dropzone.prominent-upload:focus-visible,
html[data-theme="schlauesocke-2026"] .media-upload-dropzone.prominent-upload.drag-active {
  transform: none;
  box-shadow: var(--ss-btn-primary-shadow-hover);
}

html[data-theme="schlauesocke-2026"] .delivery-step-card {
  border-radius: var(--ss-radius-xl);
  border: 1px solid var(--ss-elevated-border);
  box-shadow: var(--ss-elevated-shadow);
}