/** Shopify CDN: Minification failed

Line 1545:0 Unexpected "}"

**/
/* =====================================================
   Wordcloud Silhouette – Design System v2 (wcs-*)
   Story 1.1: CSS Design System & Mobile-Grundlagen
   ===================================================== */

/* Layer-Reihenfolge festlegen */
@layer tokens, components, utilities;

/* --- LAYER: tokens ---
   CORYVE-Brand-DNA-Migration (P1, 2026-05-08):
   Alle --wcs-*-Tokens mappen jetzt auf --coryve-*-Variablen aus
   theme/assets/coryve-tokens.css (synchronisiert via sync-tokens.sh).

   Editor-Block ist jetzt visuell konsistent mit Theme.
   P2 (Editor-Redesign) nutzt diese Mappings + restrukturiert das Layout.
*/
@layer tokens {
  .wcs-editor {
    /* === Primitive Tokens (Backwards-Compat-Aliasse) === */
    --wcs-gold: var(--coryve-color-brass);
    --wcs-silver: var(--coryve-color-stone);
    --wcs-dark: var(--coryve-color-ink);
    --wcs-dark-raised: var(--coryve-color-paper-raised);
    --wcs-light: var(--coryve-color-paper);
    --wcs-muted: var(--coryve-color-mist);
    --wcs-error: var(--coryve-color-error);
    --wcs-white: var(--coryve-color-paper);

    /* === Semantic Tokens — CORYVE Quiet Luxury LIGHT THEME ===
       Alter Editor war Dark, neuer Editor ist Light (Warm-White-Background)
       gemaess Brand-Masterplan + Research-Brief. */
    --wcs-color-primary: var(--coryve-color-ink);          /* Buttons schwarz, nicht gold */
    --wcs-color-secondary: var(--coryve-color-brass);      /* Accent fuer Highlights */
    --wcs-color-surface: var(--coryve-color-paper);        /* Warm-White-Background */
    --wcs-color-surface-raised: var(--coryve-color-paper-raised);
    --wcs-color-text: var(--coryve-color-ink);             /* Off-Black-Text */
    --wcs-color-text-muted: var(--coryve-color-mist);
    --wcs-color-error: var(--coryve-color-error);
    --wcs-color-border: var(--coryve-color-line);

    /* === Typography === */
    --wcs-font-body: var(--coryve-font-body);
    --wcs-font-display: var(--coryve-font-display);
    --wcs-font-size-sm: var(--coryve-font-size-sm);
    --wcs-font-size-base: var(--coryve-font-size-base);
    --wcs-font-size-lg: var(--coryve-font-size-md);
    --wcs-font-size-xl: var(--coryve-font-size-2xl);

    /* === Spacing — grosszuegiger Editorial-Stil === */
    --wcs-space-xs: var(--coryve-space-1);  /* 8px */
    --wcs-space-sm: var(--coryve-space-2);  /* 16px */
    --wcs-space-md: var(--coryve-space-3);  /* 24px */
    --wcs-space-lg: var(--coryve-space-4);  /* 32px */
    --wcs-space-xl: var(--coryve-space-6);  /* 64px */

    /* === Border === */
    --wcs-radius: var(--coryve-radius);     /* 0 — Editorial */
    --wcs-radius-sm: var(--coryve-radius);

    /* === Component Tokens === */
    --wcs-btn-primary-bg: var(--coryve-color-ink);
    --wcs-btn-primary-text: var(--coryve-color-paper);
    --wcs-input-bg: var(--coryve-color-paper);
    --wcs-input-border: var(--coryve-color-line);
    --wcs-input-text: var(--coryve-color-ink);
    --wcs-input-focus-border: var(--coryve-color-ink);
  }
}

/* --- LAYER: components --- */
@layer components {
  /* CSS-Isolation + Container Queries
     HINWEIS: `all: initial` und Root-Properties (color, background, etc.)
     werden im inline {% style %} Block gesetzt (unlayered = hoechste Prioritaet).
     Hier stehen nur Fallback-Werte fuer Standalone-Nutzung ohne Liquid. */
  .wcs-editor {
    font-family: var(--wcs-font-body);
    color: var(--wcs-color-text);
    background: var(--wcs-color-surface);
    max-width: 860px;
    margin: 0 auto;
    padding: var(--wcs-space-md);
    border-radius: var(--wcs-radius);
    /* Container Queries (Task 4) */
    container-type: inline-size;
    container-name: wcs-editor;
  }

  .wcs-editor *,
  .wcs-editor *::before,
  .wcs-editor *::after {
    box-sizing: inherit;
  }

  /* Layout */
  .wcs-layout {
    display: flex;
    flex-direction: column;
    gap: var(--wcs-space-lg);
  }

  /* Preview – order: -1 damit Preview VOR Controls erscheint
     AC-3 (Mobile): "Preview oben, Eingabe unten"
     AC-2 (Desktop): "Preview links, Eingabe rechts" */
  .wcs-editor__preview {
    order: -1;
    position: sticky;
    top: 0;
    max-height: 200px;
    overflow: hidden;
    background: var(--wcs-color-surface-raised);
    border-radius: var(--wcs-radius);
    z-index: 1;
    /* Touch Gestures (Story 5-2) */
    touch-action: pan-y;
    transform-origin: center center;
    will-change: transform;
  }

  /* Form Group */
  .wcs-editor__form-group {
    margin-bottom: var(--wcs-space-lg);
  }

  /* Title */
  .wcs-editor__title {
    font-size: var(--wcs-font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--wcs-space-lg);
    color: var(--wcs-color-text);
    text-align: center;
  }

  /* Labels */
  .wcs-editor__label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wcs-color-text);
    margin-bottom: var(--wcs-space-xs);
  }

  .wcs-editor__hint {
    font-weight: 400;
    color: var(--wcs-color-text-muted);
    margin-left: var(--wcs-space-xs);
    font-size: var(--wcs-font-size-sm);
  }

  .wcs-editor__sublabel {
    font-size: var(--wcs-font-size-sm);
    color: var(--wcs-color-text-muted);
    margin-bottom: 10px;
  }

  /* Inputs */
  .wcs-input {
    width: 100%;
    padding: 10px 14px;
    font-size: var(--wcs-font-size-base);
    border: 1.5px solid var(--wcs-input-border);
    border-radius: var(--wcs-radius-sm);
    box-sizing: border-box;
    background: var(--wcs-input-bg);
    color: var(--wcs-input-text);
    font-family: var(--wcs-font-body);
    /* iOS Safari: font-size >= 16px verhindert Auto-Zoom */
    min-height: 44px;
  }

  .wcs-input:focus {
    outline: 2px solid var(--wcs-input-focus-border);
    outline-offset: 2px;
  }

  .wcs-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    border: 1.5px solid var(--wcs-input-border);
    border-radius: var(--wcs-radius-sm);
    box-sizing: border-box;
    resize: vertical;
    min-height: 100px;
    font-family: var(--wcs-font-body);
    background: var(--wcs-input-bg);
    color: var(--wcs-input-text);
  }

  .wcs-textarea:focus {
    outline: 2px solid var(--wcs-input-focus-border);
    outline-offset: 2px;
  }

  /* Buttons – min 44x44px Touch-Target */
  .wcs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: var(--wcs-radius-sm);
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    min-width: 44px;
    font-family: var(--wcs-font-body);
  }

  .wcs-btn--primary {
    background: var(--wcs-btn-primary-bg);
    color: var(--wcs-btn-primary-text);
  }

  .wcs-btn--primary:hover {
    filter: brightness(1.1);
  }

  .wcs-btn--secondary {
    background: var(--wcs-color-surface-raised);
    color: var(--wcs-color-text);
    border: 1.5px solid var(--wcs-color-border);
  }

  .wcs-btn--secondary:hover {
    filter: brightness(1.15);
  }

  .wcs-btn--full {
    width: 100%;
    padding: 14px 20px;
    font-size: var(--wcs-font-size-lg);
  }

  .wcs-btn--atc {
    background: linear-gradient(135deg, var(--wcs-gold), #b8860b);
    color: var(--wcs-dark);
    font-size: var(--wcs-font-size-lg);
    margin-top: var(--wcs-space-md);
  }

  .wcs-btn--atc:hover {
    filter: brightness(1.1);
  }

  /* Sortable List */
  .wcs-sortable-list {
    list-style: none;
    margin: 0 0 12px;
    padding: var(--wcs-space-sm);
    min-height: 80px;
    border: 2px dashed var(--wcs-color-primary);
    border-radius: var(--wcs-radius);
    background: var(--wcs-color-surface-raised);
    counter-reset: word-counter;
  }

  .wcs-sortable-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--wcs-space-sm) 12px;
    margin-bottom: var(--wcs-space-xs);
    background: var(--wcs-color-surface);
    border: 1px solid var(--wcs-color-border);
    border-radius: var(--wcs-radius-sm);
    cursor: grab;
    font-size: 0.95rem;
    color: var(--wcs-color-text);
    counter-increment: word-counter;
    user-select: none;
    min-height: 44px;
  }

  .wcs-sortable-list li:active {
    cursor: grabbing;
  }

  .wcs-sortable-list li::before {
    content: counter(word-counter);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wcs-color-text-muted);
    min-width: 20px;
    text-align: right;
  }

  /* Color Options */
  .wcs-color-options {
    display: flex;
    gap: var(--wcs-space-md);
  }

  .wcs-color-option {
    display: flex;
    align-items: center;
    gap: var(--wcs-space-sm);
    cursor: pointer;
  }

  .wcs-color-option input[type="radio"] {
    display: none;
  }

  .wcs-color-swatch {
    padding: var(--wcs-space-sm) 20px;
    border: 2px solid var(--wcs-color-border);
    border-radius: var(--wcs-radius);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .wcs-color-option input[type="radio"]:checked + .wcs-color-swatch {
    border-color: var(--wcs-color-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
  }

  .wcs-color-swatch--gold {
    background: linear-gradient(135deg, #D4AF37, #b8860b);
    color: var(--wcs-dark);
  }

  .wcs-color-swatch--silver {
    background: linear-gradient(135deg, #e0e0e0, #C0C0C0);
    color: var(--wcs-dark);
  }

  /* Preview Area */
  .wcs-preview-area {
    margin-top: var(--wcs-space-lg);
    padding-top: var(--wcs-space-lg);
    border-top: 2px solid var(--wcs-color-border);
  }

  .wcs-preview-area__title {
    font-size: var(--wcs-font-size-base);
    font-weight: 600;
    color: var(--wcs-color-text);
    margin: 0 0 12px;
  }

  .wcs-svg-container {
    width: 100%;
    border-radius: var(--wcs-radius);
    border: 2px solid var(--wcs-color-border);
    overflow: hidden;
    background: var(--wcs-color-surface-raised);
  }

  .wcs-preview-note {
    font-size: var(--wcs-font-size-sm);
    color: var(--wcs-color-text-muted);
    text-align: center;
    margin-top: var(--wcs-space-sm);
    font-style: italic;
  }

  /* Add to Cart */
  .wcs-add-to-cart-area {
    margin-top: var(--wcs-space-sm);
  }

  /* Error */
  .wcs-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--wcs-color-error);
    border-radius: var(--wcs-radius-sm);
    padding: 12px var(--wcs-space-md);
    color: var(--wcs-color-error);
    font-size: 0.9rem;
    margin-top: 12px;
  }

  /* Loading */
  .wcs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px var(--wcs-space-md);
    color: var(--wcs-color-text-muted);
  }

  .wcs-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--wcs-color-border);
    border-top-color: var(--wcs-color-primary);
    border-radius: 50%;
  }

  /* Not Configured */
  .wcs-not-configured {
    padding: var(--wcs-space-xl);
    text-align: center;
    background: var(--wcs-color-surface-raised);
    border: 1px dashed var(--wcs-color-border);
    border-radius: var(--wcs-radius);
    color: var(--wcs-color-text-muted);
  }

  /* Add Word */
  .wcs-add-word {
    display: flex;
    gap: var(--wcs-space-sm);
  }

  .wcs-add-word .wcs-input {
    flex: 1;
  }

  /* Bulk Group */
  .wcs-bulk-group {
    margin-top: var(--wcs-space-md);
    padding-top: var(--wcs-space-md);
    border-top: 1px solid var(--wcs-color-border);
  }

  /* Sortable Ghost */
  .wcs-sortable-list .sortable-ghost {
    opacity: 0.4;
    background: rgba(212, 175, 55, 0.2);
  }

  /* Remove Word Button */
  .wcs-remove-word {
    background: none;
    border: none;
    color: var(--wcs-color-error);
    cursor: pointer;
    font-size: 1rem;
    padding: 0 var(--wcs-space-xs);
    line-height: 1;
    opacity: 0.6;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wcs-remove-word:hover {
    opacity: 1;
  }

  /* Drag Handle */
  .wcs-drag-handle {
    color: var(--wcs-color-text-muted);
    font-size: 1rem;
  }

  .wcs-word-text {
    flex: 1;
  }

  /* Desktop Layout via Container Query (Task 4) */
  @container wcs-editor (min-width: 600px) {
    .wcs-layout {
      flex-direction: row;
    }

    .wcs-editor__preview {
      position: static;
      max-height: none;
      flex: 1;
    }

    .wcs-editor__controls {
      flex: 1;
    }
  }

  /* Container Query Fallback (Task 4) */
  @supports not (container-type: inline-size) {
    @media (min-width: 600px) {
      .wcs-layout {
        flex-direction: row;
      }

      .wcs-editor__preview {
        position: static;
        max-height: none;
        flex: 1;
      }

      .wcs-editor__controls {
        flex: 1;
      }
    }
  }

  /* Mobile Add-Word stacked (Task 4) */
  @container wcs-editor (max-width: 599px) {
    .wcs-add-word {
      flex-direction: column;
    }

    .wcs-color-options {
      flex-direction: column;
    }
  }

  /* Keyboard-open: Preview minimieren (Story 1.2, Task 4.5) */
  .wcs-keyboard-open .wcs-editor__preview {
    max-height: 80px;
    transition: max-height 0.2s ease;
  }

  /* =====================================================
     Story 1-3: Name-First-Input & Word-Eingabe
     ===================================================== */

  /* Name-First Section */
  .wcs-editor__name-first {
    text-align: center;
    padding: var(--wcs-space-lg) var(--wcs-space-md);
  }

  .wcs-editor__name-first .wcs-editor__name-label {
    font-size: var(--wcs-font-size-xl);
    font-weight: 700;
    color: var(--wcs-color-primary);
    margin-bottom: var(--wcs-space-md);
  }

  .wcs-editor__name-first .wcs-input {
    font-size: var(--wcs-font-size-lg);
    text-align: center;
    border-color: var(--wcs-color-primary);
    border-width: 2px;
  }

  .wcs-editor__name-first .wcs-input:focus {
    outline-color: var(--wcs-color-primary);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3);
  }

  /* Word List */
  .wcs-editor__word-list {
    list-style: none;
    margin: 0 0 var(--wcs-space-md);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wcs-space-sm);
  }

  .wcs-editor__word-item {
    display: inline-flex;
    align-items: center;
    gap: var(--wcs-space-xs);
    padding: var(--wcs-space-xs) var(--wcs-space-sm);
    background: var(--wcs-color-surface-raised);
    border: 1px solid var(--wcs-color-border);
    border-radius: var(--wcs-radius-sm);
    font-size: var(--wcs-font-size-sm);
    color: var(--wcs-color-text);
    min-height: 36px;
  }

  .wcs-editor__word-item .wcs-remove-word {
    background: none;
    border: none;
    color: var(--wcs-color-error);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    opacity: 0.6;
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wcs-editor__word-item .wcs-remove-word:hover {
    opacity: 1;
  }

  /* Word Counter */
  .wcs-editor__word-counter {
    font-size: var(--wcs-font-size-sm);
    color: var(--wcs-color-text-muted);
    text-align: right;
    margin-bottom: var(--wcs-space-sm);
  }

  /* Min Words Hint */
  .wcs-editor__min-words-hint {
    font-size: var(--wcs-font-size-sm);
    color: var(--wcs-color-primary);
    text-align: center;
    padding: var(--wcs-space-sm);
    min-height: 1.5em;
  }

  /* Error message for word input */
  .wcs-editor__error {
    font-size: var(--wcs-font-size-sm);
    color: var(--wcs-color-error);
    min-height: 1.2em;
    margin-top: var(--wcs-space-xs);
  }

  /* Word Input Row */
  .wcs-editor__word-input-row {
    display: flex;
    gap: var(--wcs-space-sm);
  }

  .wcs-editor__word-input-row .wcs-input {
    flex: 1;
  }

  /* ===  Preview (Story 1.4b)  === */
  .wcs-preview__placeholder {
    color: var(--wcs-color-text, #f5f5f5);
    opacity: 0.6;
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 1rem;
  }

  .wcs-preview__svg-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--wcs-radius, 8px);
    background: rgba(255, 255, 255, 0.03);
    transition: opacity 0.2s ease;
  }

  .wcs-preview__svg-wrapper svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .wcs-preview__partial-hint {
    color: var(--wcs-color-primary, #D4AF37);
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.5rem;
    min-height: 1rem;
  }

  .wcs-preview__note {
    color: var(--wcs-color-text, #f5f5f5);
    opacity: 0.5;
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.5rem;
  }

  /* ===  Add-to-Cart (Story 1.6)  === */
  .wcs-atc {
    margin-top: 1rem;
    text-align: center;
  }

  .wcs-btn--highlighted {
    animation: wcs-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  }

  .wcs-btn--loading {
    position: relative;
    cursor: wait;
  }

  .wcs-btn--success {
    background: #2e7d32;
    border-color: #2e7d32;
  }

  .wcs-btn--error {
    background: #c62828;
    border-color: #c62828;
  }

  .wcs-btn--small {
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    margin-top: 0.5rem;
  }

  .wcs-atc__status {
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--wcs-radius, 8px);
  }

  .wcs-atc__status--success {
    color: #81c784;
    background: rgba(46, 125, 50, 0.15);
  }

  .wcs-atc__status--error {
    color: #ef9a9a;
    background: rgba(198, 40, 40, 0.15);
  }

  @keyframes wcs-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(212, 175, 55, 0.2); }
    50% { box-shadow: 0 0 16px rgba(212, 175, 55, 0.5); }
  }

  /* ===  Onboarding (Story 1.7)  === */
  .wcs-onboarding {
    margin-bottom: var(--wcs-space-lg, 24px);
    padding: var(--wcs-space-md, 16px);
    background: var(--wcs-color-surface-raised, #2A2A2A);
    border-radius: var(--wcs-radius, 8px);
    border: 1px solid var(--wcs-color-border, #3A3A3A);
  }

  .wcs-onboarding__heading {
    font-size: var(--wcs-font-size-lg, 1.1rem);
    font-weight: 700;
    color: var(--wcs-color-primary, #D4AF37);
    margin: 0 0 var(--wcs-space-md, 16px);
    text-align: center;
  }

  .wcs-onboarding__steps {
    display: flex;
    flex-direction: column;
    gap: var(--wcs-space-md, 16px);
  }

  .wcs-onboarding__step {
    display: flex;
    align-items: flex-start;
    gap: var(--wcs-space-sm, 8px);
  }

  .wcs-onboarding__step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: var(--wcs-color-primary, #D4AF37);
    color: var(--wcs-dark, #1A1A1A);
    font-weight: 700;
    font-size: 0.875rem;
  }

  .wcs-onboarding__step-title {
    display: block;
    font-weight: 600;
    color: var(--wcs-color-text, #F5F5F5);
    font-size: 0.9375rem;
  }

  .wcs-onboarding__step-desc {
    margin: 2px 0 0;
    font-size: var(--wcs-font-size-sm, 0.82rem);
    color: var(--wcs-color-text-muted, #A0A0A0);
  }

  .wcs-onboarding__collapse-btn {
    display: block;
    margin: var(--wcs-space-md, 16px) auto 0;
    background: none;
    border: none;
    color: var(--wcs-color-text-muted, #A0A0A0);
    cursor: pointer;
    font-size: var(--wcs-font-size-sm, 0.82rem);
    text-decoration: underline;
    padding: var(--wcs-space-xs, 4px) var(--wcs-space-sm, 8px);
    min-height: 44px;
    min-width: 44px;
  }

  .wcs-onboarding__collapse-btn:hover {
    color: var(--wcs-color-text, #F5F5F5);
  }

  .wcs-onboarding--collapsed .wcs-onboarding__steps {
    display: none;
  }

  .wcs-onboarding--collapsed .wcs-onboarding__collapse-btn {
    margin-top: 0;
  }

  /* Desktop: steps horizontal */
  @container wcs-editor (min-width: 600px) {
    .wcs-onboarding__steps {
      flex-direction: row;
    }

    .wcs-onboarding__step {
      flex: 1;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  }

  @supports not (container-type: inline-size) {
    @media (min-width: 600px) {
      .wcs-onboarding__steps {
        flex-direction: row;
      }

      .wcs-onboarding__step {
        flex: 1;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }
  }

  /* ===  Pricing (Story 1.7)  === */
  .wcs-pricing {
    text-align: center;
    margin-top: var(--wcs-space-md, 16px);
    padding: var(--wcs-space-sm, 8px);
  }

  .wcs-pricing__price {
    display: block;
    font-size: var(--wcs-font-size-xl, 1.4rem);
    font-weight: 700;
    color: var(--wcs-color-primary, #D4AF37);
  }

  .wcs-pricing__shipping {
    display: block;
    font-size: var(--wcs-font-size-sm, 0.82rem);
    color: var(--wcs-color-text-muted, #A0A0A0);
    margin-top: 2px;
  }

  /* ===  Druckfarben-Hinweis (Story 1.7)  === */
  .wcs-editor__color-hint {
    color: var(--wcs-color-text-muted, #A0A0A0);
    font-size: 0.75rem;
    text-align: center;
    margin-top: 0.25rem;
    font-style: italic;
  }

  /* ===  Example Image (Story 1.7)  === */
  .wcs-example-image {
    width: 100%;
    border-radius: var(--wcs-radius, 8px);
    display: block;
  }

  .wcs-example-image--hidden {
    display: none;
  }

  /* ===  Silhouette Switch (Story 1.8)  === */
  .wcs-editor__change-silhouette {
    display: block;
    text-align: center;
    color: var(--wcs-color-text-muted, #A0A0A0);
    font-size: var(--wcs-font-size-sm, 0.82rem);
    text-decoration: underline;
    cursor: pointer;
    padding: var(--wcs-space-sm, 8px);
    margin-top: var(--wcs-space-xs, 4px);
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
  }

  .wcs-editor__change-silhouette:hover {
    color: var(--wcs-color-text, #F5F5F5);
  }

  .wcs-silhouette-dropdown {
    background: var(--wcs-color-surface-raised, #2A2A2A);
    border: 1px solid var(--wcs-color-border, #3A3A3A);
    border-radius: var(--wcs-radius, 8px);
    padding: var(--wcs-space-sm, 8px);
    margin-top: var(--wcs-space-xs, 4px);
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
  }

  .wcs-silhouette-item {
    display: flex;
    align-items: center;
    gap: var(--wcs-space-sm, 8px);
    width: 100%;
    padding: var(--wcs-space-sm, 8px);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--wcs-radius-sm, 6px);
    cursor: pointer;
    color: var(--wcs-color-text, #F5F5F5);
    font-size: var(--wcs-font-size-sm, 0.82rem);
    min-height: 44px;
    text-align: left;
  }

  .wcs-silhouette-item:hover,
  .wcs-silhouette-item:focus {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--wcs-color-primary, #D4AF37);
    outline: none;
  }

  .wcs-silhouette-item--active {
    border-color: var(--wcs-color-primary, #D4AF37);
    background: rgba(212, 175, 55, 0.15);
  }

  .wcs-silhouette-thumb {
    width: 40px;
    height: 40px;
    border-radius: var(--wcs-radius-sm, 6px);
    object-fit: cover;
  }

  .wcs-silhouette-name {
    flex: 1;
  }

  /* ===  Autofill / Vorschlaege (Story 1.9)  === */
  .wcs-autofill {
    margin: var(--wcs-space-md, 16px) 0;
  }

  .wcs-btn--suggest {
    font-size: var(--wcs-font-size-sm, 0.82rem);
    padding: var(--wcs-space-sm, 8px) var(--wcs-space-md, 16px);
  }

  .wcs-autofill__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wcs-space-sm, 8px);
    margin-top: var(--wcs-space-sm, 8px);
  }

  .wcs-autofill__item {
    display: inline-flex;
    align-items: center;
    gap: var(--wcs-space-xs, 4px);
    padding: var(--wcs-space-xs, 4px) var(--wcs-space-sm, 8px);
    background: var(--wcs-color-surface-raised, #2A2A2A);
    border: 1px solid var(--wcs-color-border, #3A3A3A);
    border-radius: var(--wcs-radius-sm, 6px);
    font-size: var(--wcs-font-size-sm, 0.82rem);
    color: var(--wcs-color-text, #F5F5F5);
    opacity: 0;
    animation: wcs-suggest-enter 0.3s ease forwards;
    animation-delay: calc(var(--wcs-index, 0) * 80ms);
  }

  .wcs-autofill__item--fade-out {
    animation: wcs-suggest-exit 0.2s ease forwards;
  }

  .wcs-autofill__accept,
  .wcs-autofill__reject {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    min-width: 28px;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .wcs-autofill__accept {
    color: #81c784;
  }

  .wcs-autofill__accept:hover {
    background: rgba(129, 199, 132, 0.15);
  }

  .wcs-autofill__reject {
    color: var(--wcs-color-error, #EF4444);
    opacity: 0.6;
  }

  .wcs-autofill__reject:hover {
    opacity: 1;
    background: rgba(239, 68, 68, 0.15);
  }

  .wcs-autofill__accept-all {
    display: block;
    margin-top: var(--wcs-space-sm, 8px);
    background: none;
    border: none;
    color: var(--wcs-color-primary, #D4AF37);
    cursor: pointer;
    font-size: var(--wcs-font-size-sm, 0.82rem);
    text-decoration: underline;
    padding: var(--wcs-space-xs, 4px) var(--wcs-space-sm, 8px);
    min-height: 44px;
  }

  .wcs-autofill__hint {
    font-size: var(--wcs-font-size-sm, 0.82rem);
    color: var(--wcs-color-text-muted, #A0A0A0);
    margin-top: var(--wcs-space-xs, 4px);
  }

  @keyframes wcs-suggest-enter {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  @keyframes wcs-suggest-exit {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(10px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wcs-autofill__item {
      opacity: 1;
      animation: none;
    }
    .wcs-autofill__item--fade-out {
      animation: none;
      display: none;
    }
  }
}

/* --- Mobile Keyboard Mode (Story 1.10) --- */
/* When virtual keyboard is open, collapse non-essential UI to save space */
.wcs-editor.wcs-keyboard-open .wcs-onboarding,
.wcs-editor.wcs-keyboard-open .wcs-editor__change-silhouette,
.wcs-editor.wcs-keyboard-open .wcs-autofill {
  display: none;
}

.wcs-editor.wcs-keyboard-open .wcs-editor__canvas-container {
  max-height: 30vh;
  transition: max-height 0.2s ease-out;
}

.wcs-editor.wcs-keyboard-open .wcs-editor__word-input {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--wcs-color-surface, #1a1a1a);
  padding-block: 8px;
}

/* --- Accessibility (Story 1.11) --- */

/* AC-2: Focus ring on all interactive v2 elements */
.wcs-editor *:focus-visible {
  outline: 2px solid var(--wcs-focus-ring, #4A90D9);
  outline-offset: 2px;
}
@supports not selector(:focus-visible) {
  .wcs-editor *:focus {
    outline: 2px solid var(--wcs-focus-ring, #4A90D9);
    outline-offset: 2px;
  }
}

/* AC-5: Placeholder color WCAG AA compliant (4.5:1 on #1a1a1a) */
.wcs-editor input::placeholder,
.wcs-editor textarea::placeholder {
  color: #8c8c8c;
}

/* AC-4: forced-colors (Windows High Contrast Mode) */
@media (forced-colors: active) {
  .wcs-editor__color-swatch {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }
  .wcs-editor__atc-btn,
  #wce-atc-btn {
    border: 1px solid ButtonText;
  }
  .wcs-editor__preview {
    border: 1px solid ButtonText;
  }
  .wcs-editor__word-item {
    border: 1px solid ButtonText;
  }
  .wcs-autofill__suggestion-item {
    border: 1px solid ButtonText;
  }
}

/* AC-6: prefers-reduced-motion – disable all animations globally */
@media (prefers-reduced-motion: reduce) {
  .wcs-editor *,
  .wcs-editor *::before,
  .wcs-editor *::after {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}

/* === Font Picker (Story 4.1) === */

/* Font Picker Layout */
.wcs-font-picker {
  margin: var(--wcs-space-sm) 0;
}

.wcs-font-picker__heading {
  font-size: var(--wcs-font-size-sm);
  font-weight: 600;
  color: var(--wcs-text-muted, #aaa);
  margin-bottom: var(--wcs-space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wcs-font-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.wcs-font-picker__option {
  appearance: none;
  border: 1.5px solid var(--wcs-border, #444);
  background: transparent;
  color: var(--wcs-text, #f5f5f5);
  padding: 6px 12px;
  border-radius: var(--wcs-radius-sm, 6px);
  cursor: pointer;
  font-size: 0.85rem;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}

.wcs-font-picker__option:hover {
  border-color: var(--wcs-primary, #D4AF37);
  background: rgba(212, 175, 55, 0.08);
}

.wcs-font-picker__option--active {
  border-color: var(--wcs-primary, #D4AF37);
  background: rgba(212, 175, 55, 0.15);
  font-weight: 700;
}

/* === Dedication / Widmung (Story 4.2) === */

  .wcs-dedication {
    margin: var(--wcs-space-sm) 0;
  }

  .wcs-dedication__label {
    display: block;
    font-size: var(--wcs-font-size-sm);
    font-weight: 600;
    color: var(--wcs-text-muted, #aaa);
    margin-bottom: var(--wcs-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Atelier-Note unter Anfertigen-Button — Premium Microcopy in Mist-Color */
  .wcs-editor .wcs-atc__atelier-note {
    text-align: center;
    font-size: var(--coryve-font-size-eyebrow, 0.6875rem);
    letter-spacing: var(--coryve-letter-spacing-tracked, 0.16em);
    text-transform: uppercase;
    color: var(--coryve-color-mist, #8A857C);
    margin: var(--coryve-space-2, 8px) 0 0;
    font-family: var(--coryve-font-body, 'Inter', system-ui, sans-serif);
  }

  /* Widmung-Input — User-Feedback 2026-05-08 ("Widmung nicht lesbar"):
     Vorher Dark-Theme (rgba weisser bg + heller Text) → unsichtbar auf
     Cream-Paper. Jetzt CORYVE Editorial-Style mit Off-Black-Text. */
  .wcs-dedication__input {
    width: 100%;
    padding: var(--coryve-space-2, 8px) 0;
    background: var(--coryve-color-paper, #F5F2EE) !important;
    border: 0;
    border-bottom: 1px solid var(--coryve-color-line, #2A2620);
    border-radius: 0;
    color: var(--coryve-color-ink, #0D0D0D) !important;
    -webkit-text-fill-color: var(--coryve-color-ink, #0D0D0D);
    font-family: var(--coryve-font-body, 'Inter', system-ui, sans-serif);
    font-size: var(--coryve-font-size-md, 1rem);
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s;
  }

  .wcs-dedication__input:focus {
    outline: none;
    border-bottom-color: var(--coryve-color-ink, #0D0D0D);
    border-bottom-width: 2px;
  }

  .wcs-dedication__input::placeholder {
    color: var(--coryve-color-line, #2A2620) !important;
    opacity: 0.55;
  }

  .wcs-dedication__counter {
    text-align: right;
    font-size: var(--coryve-font-size-xs, 0.75rem);
    color: var(--coryve-color-mist, #8A857C);
    margin-top: 4px;
  }

  .wcs-dedication__counter--limit {
    color: #e65100;
    font-weight: 600;
  }

/* === Cross-Sell Empfehlung (Story 4.3) === */

.wcs-cross-sell {
  margin: var(--wcs-space-sm) 0;
}

.wcs-cross-sell__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--wcs-border, #444);
  border-radius: var(--wcs-radius-sm, 6px);
  text-decoration: none;
  color: var(--wcs-text, #f5f5f5);
  transition: border-color 0.2s, background 0.2s;
}

.wcs-cross-sell__link:hover {
  border-color: var(--wcs-primary, #D4AF37);
  background: rgba(212, 175, 55, 0.08);
}

.wcs-cross-sell__image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.wcs-cross-sell__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wcs-cross-sell__title {
  font-size: var(--wcs-font-size-base, 1rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wcs-cross-sell__price {
  font-size: var(--wcs-font-size-sm);
  color: var(--wcs-primary, #D4AF37);
  font-weight: 600;
}

/* === Discount Nudge (Story 4-4) === */

.wcs-discount-nudge {
  margin: var(--wcs-space-sm) 0;
  padding: var(--wcs-space-sm) 0;
}

.wcs-discount-nudge__banner {
  padding: var(--wcs-space-sm) var(--wcs-space-md);
  background: var(--wcs-color-surface-raised);
  border: 1px solid var(--wcs-color-primary);
  border-radius: var(--wcs-radius);
  color: var(--wcs-color-text);
  font-size: 0.875rem;
  text-align: center;
}

.wcs-discount-nudge--success,
.wcs-discount-nudge__banner--success {
  background: rgba(76, 175, 80, 0.15);
  border-color: #4CAF50;
  color: #4CAF50;
}

/* === Free Shipping Progress (Story 4-5) === */

.wcs-free-shipping {
  margin: var(--wcs-space-sm) 0;
}

.wcs-free-shipping__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  max-height: 40px;
  padding: 8px 12px;
  background: var(--wcs-color-surface-raised);
  border-radius: var(--wcs-radius);
}

.wcs-free-shipping__track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.wcs-free-shipping__fill {
  height: 100%;
  background: linear-gradient(90deg, #C5A55A, #E8D48B);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.wcs-free-shipping__fill--complete {
  background: linear-gradient(90deg, #D4AF37, #F5E6A3);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
}

.wcs-free-shipping__text {
  font-size: 0.8125rem;
  color: var(--wcs-color-text);
  white-space: nowrap;
}

/* === Undo/Redo Controls (Story 5-1) === */

  .wcs-undo-redo {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .wcs-undo-redo__btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--wcs-color-text);
    transition: opacity 0.15s ease;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .wcs-undo-redo__btn:hover:not(.wcs-undo-redo__btn--disabled) {
    border-color: var(--wcs-color-primary);
  }

  .wcs-undo-redo__btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
  }

  /* === Progress Overlay (Story 5-3) === */

  .wcs-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: none;
  }

  .wcs-progress__overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(26, 26, 26, 0.9);
    border-radius: var(--wcs-radius);
    padding: var(--wcs-space-md);
  }

  .wcs-progress__text {
    color: var(--wcs-color-text);
    font-size: 1rem;
    text-align: center;
  }

  .wcs-progress__hint {
    color: rgba(245, 245, 245, 0.6);
    font-size: 0.8125rem;
    margin-top: var(--wcs-space-xs);
  }

  .wcs-progress__dots {
    animation: wcs-dots-pulse 1.5s infinite;
  }

  .wcs-progress__bar {
    width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: var(--wcs-space-sm);
    overflow: hidden;
  }

  .wcs-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, #C5A55A, #E8D48B);
    border-radius: 2px;
    transition: width 0.3s ease;
  }

  .wcs-progress__check {
    color: #4CAF50;
    font-size: 1.5rem;
    margin-right: 8px;
    animation: wcs-check-fade 0.5s ease;
  }

  .wcs-progress__contact {
    color: var(--wcs-color-primary);
    text-decoration: underline;
  }

  .wcs-progress--active .wcs-progress__overlay {
    animation: wcs-render-pulse 2s infinite;
  }

  /* === AI Suggestions (Story 5-4b) === */

  .wcs-suggestions__buttons {
    display: flex;
    gap: 8px;
    margin-bottom: var(--wcs-space-sm);
  }

  .wcs-suggestions__btn--ai {
    border: 1px solid var(--wcs-color-primary);
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .wcs-suggestions__btn--disabled {
    opacity: 0.5;
    cursor: default;
  }

  .wcs-sparkle {
    width: 16px;
    height: 16px;
  }

  .wcs-suggestions__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .wcs-suggestions__shimmer {
    width: 80px;
    height: 32px;
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: wcs-shimmer 1.5s infinite;
  }

  .wcs-suggestions__chip {
    padding: 6px 12px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.2);
    background: transparent;
    color: var(--wcs-color-text);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: all 0.15s ease;
  }

  .wcs-suggestions__chip:hover {
    border-color: var(--wcs-color-primary);
    background: rgba(212, 175, 55, 0.1);
  }

  .wcs-suggestions__chip--accepted {
    background: rgba(76, 175, 80, 0.15);
    border-color: #4CAF50;
    color: #4CAF50;
  }

  .wcs-suggestions__chip--stagger {
    animation: wcs-chip-fade 0.3s ease forwards;
    opacity: 0;
  }

  @keyframes wcs-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes wcs-chip-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* --- LAYER: utilities --- */
@layer utilities {
  .wcs-visually-hidden,
  .wcs-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .wcs-coryve-hidden {
    display: none !important;
  }
}

/* =====================================================
   CORYVE Editorial Layer (P2, 2026-05-08)
   Visuelles Premium-Override auf der bestehenden v2-Struktur.
   - Light Theme (Warm-White-Background)
   - Editorial Typography (Cormorant Display + Inter Body)
   - 2-Spalten-Grid Desktop / 1-Spalte Mobile (Sticky-Preview)
   - Border-Radius 0
   - Generous Whitespace
   ===================================================== */
@layer components {

  /* --- Editor-Header: Eyebrow + Display-Headline + Lead --- */

  .wcs-editor__header {
    text-align: center;
    margin-bottom: var(--coryve-space-7);
    border-bottom: var(--coryve-border-thin);
    padding-bottom: var(--coryve-space-6);
  }

  .wcs-editor__eyebrow {
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-eyebrow);
    font-weight: var(--coryve-font-weight-medium);
    letter-spacing: var(--coryve-letter-spacing-tracked);
    text-transform: uppercase;
    color: var(--coryve-color-mist);
    margin: 0 0 var(--coryve-space-3);
  }

  .wcs-editor__title {
    font-family: var(--coryve-font-display);
    font-weight: var(--coryve-font-weight-display);
    font-size: var(--coryve-font-size-display);
    letter-spacing: var(--coryve-letter-spacing-display);
    line-height: var(--coryve-line-height-display);
    color: var(--coryve-color-ink);
    margin: 0 0 var(--coryve-space-3);
  }

  .wcs-editor__lead {
    font-size: var(--coryve-font-size-md);
    line-height: var(--coryve-line-height-body);
    color: var(--coryve-color-line);
    max-width: 60ch;
    margin: 0 auto;
  }

  /* --- Onboarding versteckt (Premium-Editor erklaert durch Tun) --- */

  .wcs-onboarding--hidden,
  [hidden].wcs-onboarding {
    display: none !important;
  }

  /* --- Eyebrow-Labels fuer Sektionen (Worte / Material / etc.) --- */

  .wcs-editor__label--eyebrow {
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-eyebrow);
    font-weight: var(--coryve-font-weight-medium);
    letter-spacing: var(--coryve-letter-spacing-tracked);
    text-transform: uppercase;
    color: var(--coryve-color-mist);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: var(--coryve-space-5) 0 var(--coryve-space-3);
    padding-bottom: var(--coryve-space-2);
    border-bottom: var(--coryve-border-hair);
  }

  .wcs-editor__label--eyebrow .wcs-editor__hint {
    font-size: var(--coryve-font-size-xs);
    color: var(--coryve-color-mist);
    letter-spacing: 0;
    text-transform: none;
  }

  /* --- Buttons: Editorial Off-Black + Outline + Link-Variants --- */

  .wcs-editor .wcs-btn--primary {
    background: var(--coryve-color-ink);
    color: var(--coryve-color-paper);
    border: 1px solid var(--coryve-color-ink);
    border-radius: 0;
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-sm);
    font-weight: var(--coryve-font-weight-medium);
    letter-spacing: var(--coryve-letter-spacing-tracked);
    text-transform: uppercase;
    padding: var(--coryve-space-2) var(--coryve-space-4);
    transition: background var(--coryve-duration-fast) var(--coryve-easing-soft),
                color var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor .wcs-btn--primary:hover:not(:disabled) {
    background: var(--coryve-color-paper);
    color: var(--coryve-color-ink);
  }

  .wcs-editor .wcs-btn--secondary {
    background: transparent;
    color: var(--coryve-color-ink);
    border: 1px solid var(--coryve-color-ink);
    border-radius: 0;
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-sm);
    font-weight: var(--coryve-font-weight-medium);
    letter-spacing: var(--coryve-letter-spacing-tracked);
    text-transform: uppercase;
    padding: var(--coryve-space-2) var(--coryve-space-3);
    transition: background var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor .wcs-btn--secondary:hover:not(:disabled) {
    background: var(--coryve-color-ink);
    color: var(--coryve-color-paper);
  }

  /* "Inspirationen" als Text-Link, NICHT als Primary-CTA */
  .wcs-editor .wcs-btn--link,
  .wcs-editor .wcs-btn--suggest {
    background: transparent;
    color: var(--coryve-color-mist);
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    padding: 0 0 1px;
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-sm);
    font-weight: var(--coryve-font-weight-body);
    letter-spacing: 0;
    text-transform: none;
    margin-top: var(--coryve-space-2);
    transition: color var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor .wcs-btn--link:hover,
  .wcs-editor .wcs-btn--suggest:hover {
    color: var(--coryve-color-ink);
  }

  /* --- Color-Toggle: dezente Stoff-Patches statt bunte Kreise --- */

  .wcs-editor .wcs-color-toggle {
    display: flex;
    gap: var(--coryve-space-3);
    margin-top: var(--coryve-space-3);
  }

  .wcs-editor .wcs-color-option {
    background: transparent;
    border: 1px solid var(--coryve-color-mist);
    border-radius: 0;
    padding: var(--coryve-space-2) var(--coryve-space-3);
    display: flex;
    align-items: center;
    gap: var(--coryve-space-2);
    cursor: pointer;
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-sm);
    color: var(--coryve-color-ink);
    transition: border-color var(--coryve-duration-fast) var(--coryve-easing-soft),
                background var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor .wcs-color-option--active {
    border-color: var(--coryve-color-ink);
    background: var(--coryve-color-paper-raised);
  }

  .wcs-editor .wcs-color-swatch {
    width: 16px;
    height: 16px;
    display: inline-block;
    border-radius: 0;
  }

  .wcs-editor .wcs-color-swatch--gold {
    background: var(--coryve-color-brass);
  }

  .wcs-editor .wcs-color-swatch--silver {
    background: var(--coryve-color-stone);
  }

  /* --- Inputs: Editorial flat ---
     User-Feedback 2026-05-08 ("ich kann die Wörter nicht lesen, alles
     weiss"): Hardcoded color fallback und !important, damit selbst in
     Section-Isolation-Sandbox (.wcs-editor mit all: initial) der typed-
     text in lesbarem Off-Black erscheint, falls Tokens nicht propagieren. */

  .wcs-editor .wcs-input,
  .wcs-editor .wcs-textarea {
    background: var(--coryve-color-paper, #F5F2EE) !important;
    color: var(--coryve-color-ink, #0D0D0D) !important;
    border: 0;
    border-bottom: 1px solid var(--coryve-color-line, #2A2620);
    border-radius: 0;
    padding: var(--coryve-space-2) 0;
    font-family: var(--coryve-font-body, 'Inter', system-ui, sans-serif);
    font-size: var(--coryve-font-size-md, 1rem);
    width: 100%;
    -webkit-text-fill-color: var(--coryve-color-ink, #0D0D0D);
    transition: border-color var(--coryve-duration-fast, 200ms) var(--coryve-easing-soft, ease);
  }

  .wcs-editor .wcs-input:focus,
  .wcs-editor .wcs-textarea:focus {
    outline: 0;
    border-bottom-color: var(--coryve-color-ink, #0D0D0D);
    border-bottom-width: 2px;
    padding-bottom: calc(var(--coryve-space-2, 8px) - 1px);
  }

  .wcs-editor .wcs-input::placeholder,
  .wcs-editor .wcs-textarea::placeholder {
    /* Mist auf Paper hat WCAG-Kontrast 3.6:1 — leicht erhoeht auf line-color (kontrast 7.2:1) */
    color: var(--coryve-color-line, #2A2620) !important;
    opacity: 0.55;
  }

  /* --- Word-List: editorial chips, kein Pillen-Stil --- */

  .wcs-editor__word-list {
    list-style: none;
    margin: 0 0 var(--coryve-space-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--coryve-space-1) var(--coryve-space-2);
  }

  .wcs-editor__word-list li,
  .wcs-editor .wcs-word-item {
    display: inline-flex;
    align-items: center;
    gap: var(--coryve-space-1);
    background: transparent;
    border: 1px solid var(--coryve-color-line);
    border-radius: 0;
    padding: 6px 10px;
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-sm);
    color: var(--coryve-color-ink);
  }

  .wcs-editor__word-list li button,
  .wcs-editor .wcs-word-item__remove {
    background: transparent;
    border: 0;
    color: var(--coryve-color-mist);
    cursor: pointer;
    padding: 0 0 0 4px;
    font-size: var(--coryve-font-size-md);
    line-height: 1;
    transition: color var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor__word-list li button:hover,
  .wcs-editor .wcs-word-item__remove:hover {
    color: var(--coryve-color-ink);
  }

  /* --- Word-Counter --- */

  .wcs-editor__word-counter {
    font-size: var(--coryve-font-size-xs);
    color: var(--coryve-color-mist);
    margin-bottom: var(--coryve-space-3);
  }

  /* --- Layout: 2-Spalten Desktop / 1-Spalte Mobile --- */

  @container wcs-editor (min-width: 800px) {
    .wcs-editor .wcs-layout {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: var(--coryve-space-6);
      align-items: start;
    }

    .wcs-editor .wcs-editor__preview {
      position: sticky;
      top: var(--coryve-space-4);
    }
  }

  @container wcs-editor (max-width: 799px) {
    .wcs-editor .wcs-layout {
      display: flex;
      flex-direction: column;
      gap: var(--coryve-space-5);
    }

    /* Mobile: Preview oben, Controls unten */
    .wcs-editor .wcs-editor__preview {
      order: -1;
    }
  }

  /* --- Preview-Frame: editorial 1px-Linie um die Wordcloud --- */

  .wcs-editor .wcs-editor__preview {
    background: var(--coryve-color-paper);
    border: 1px solid var(--coryve-color-line);
    padding: var(--coryve-space-4);
  }

  .wcs-editor .wcs-preview__placeholder {
    text-align: center;
    color: var(--coryve-color-mist);
    font-style: italic;
    padding: var(--coryve-space-7) var(--coryve-space-3);
  }

  .wcs-editor .wcs-preview__note,
  .wcs-editor .wcs-editor__color-hint {
    font-size: var(--coryve-font-size-xs);
    color: var(--coryve-color-mist);
    text-align: center;
    margin-top: var(--coryve-space-3);
  }

  /* --- Pricing: Eyebrow + Preis + Versand --- */

  .wcs-editor .wcs-pricing {
    text-align: center;
    margin-top: var(--coryve-space-4);
    padding-top: var(--coryve-space-3);
    border-top: var(--coryve-border-thin);
  }

  .wcs-editor .wcs-pricing__eyebrow {
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-eyebrow);
    font-weight: var(--coryve-font-weight-medium);
    letter-spacing: var(--coryve-letter-spacing-tracked);
    text-transform: uppercase;
    color: var(--coryve-color-mist);
    margin: 0 0 var(--coryve-space-1);
  }

  .wcs-editor .wcs-pricing__price {
    font-family: var(--coryve-font-display);
    font-size: var(--coryve-font-size-2xl);
    font-weight: var(--coryve-font-weight-display);
    color: var(--coryve-color-ink);
    display: block;
    margin: 0 0 var(--coryve-space-1);
  }

  .wcs-editor .wcs-pricing__shipping {
    font-size: var(--coryve-font-size-xs);
    color: var(--coryve-color-mist);
    display: block;
  }

  /* --- Contact-Link --- */

  .wcs-editor .wcs-contact {
    text-align: center;
    margin-top: var(--coryve-space-3);
  }

  .wcs-editor .wcs-contact__link {
    font-family: var(--coryve-font-body);
    font-size: var(--coryve-font-size-sm);
    color: var(--coryve-color-mist);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor .wcs-contact__link:hover {
    color: var(--coryve-color-ink);
  }

  /* --- ATC-Button: full-width Premium --- */

  .wcs-editor .wcs-btn--atc {
    width: 100%;
    padding: var(--coryve-space-3);
    font-size: var(--coryve-font-size-sm);
    letter-spacing: var(--coryve-letter-spacing-tracked);
    text-transform: uppercase;
    margin-top: var(--coryve-space-3);
  }

  .wcs-editor .wcs-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* --- Sublabels --- */

  .wcs-editor .wcs-editor__sublabel {
    font-size: var(--coryve-font-size-xs);
    color: var(--coryve-color-mist);
    line-height: var(--coryve-line-height-body);
    margin: var(--coryve-space-1) 0 var(--coryve-space-3);
    max-width: none;
  }

  /* --- Name-First Section --- */

  .wcs-editor .wcs-editor__name-first {
    margin-bottom: var(--coryve-space-5);
  }

  .wcs-editor .wcs-editor__name-label {
    font-family: var(--coryve-font-display);
    font-size: var(--coryve-font-size-xl);
    font-weight: var(--coryve-font-weight-display);
    color: var(--coryve-color-ink);
    display: block;
    margin: 0 0 var(--coryve-space-2);
    letter-spacing: var(--coryve-letter-spacing-display);
  }

  /* --- Change-Silhouette-Link --- */

  .wcs-editor .wcs-editor__change-silhouette {
    display: inline-block;
    margin-top: var(--coryve-space-3);
    color: var(--coryve-color-mist);
    font-size: var(--coryve-font-size-sm);
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: color var(--coryve-duration-fast) var(--coryve-easing-soft);
  }

  .wcs-editor .wcs-editor__change-silhouette:hover {
    color: var(--coryve-color-ink);
  }
}

/* --- Animation-Overrides: ruhige Easings --- */
@layer components {
  .wcs-editor *,
  .wcs-editor *::before,
  .wcs-editor *::after {
    transition-timing-function: var(--coryve-easing-soft);
  }
}