/* * sueco Custom Designer — Frontend-Styles (Phase 3 Block E Etappe 3). * * Mobile-First. Desktop-Refit greift ab 768 px Viewport-Breite und * schaltet den Wizard-Body in ein zweispaltiges Workspace-Layout. * * Token-Konsum (ADR-17): Plugin verbraucht die globalen Theme-Tokens * aus dem Blocksy Child Theme (`--sueco-primary`, `--sueco-text-*`, * `--sueco-bg-cream`, `--sueco-border` etc., definiert in * `blocksy-child/assets/css/brand.css`). Die Fallback-Hex-Werte * spiegeln die Theme-Defaults 1:1, damit das Plugin auch ohne aktives * Theme keine fremden Markenfarben rendert. Plugin pflegt KEIN eigenes * `--sueco-color-*`-Token-Set parallel — bei Erweiterungsbedarf wird * das Website-Design-System ergänzt. */ /* Etappe-2-Smoke-Finding 2: Modal saß ~15 px nach links versetzt, weil * der Scrollbar-Streifen aus 100vw nicht rausgerechnet wurde. Mit * `scrollbar-gutter: stable` reserviert der Browser den Gutter immer, * Modal sitzt exakt mittig. Greift auf das gesamte Dokument — kein * Plugin-spezifischer Selektor, weil Wizard `display: flex` mit * `width: 100vw` braucht. */ html { scrollbar-gutter: stable; } /* Body-Scroll-Lock, solange der Designer- offen ist (Editor.open() setzt/entfernt die Klasse). showModal() macht den Hintergrund nur für Klick/Fokus inert, NICHT fürs Wheel-Scrollen — ohne Lock scrollt die Seite hinter dem Modal mit (Smoke 2026-05-29 Desktop). Lock greift auf (das scrollende Wurzelelement); `scrollbar-gutter: stable` oben hält den Gutter-Platz, daher kein Layout-Shift beim Sperren. */ html.sueco-designer-scroll-lock { overflow: hidden; /* iPhone-Smoke 2026-07-28: `overflow: hidden` stoppt echtes Scrollen, aber nicht den Rubber-Band beim Weiterwischen am Rand — und der verschiebt in Safari die komplette fixierte Ebene inklusive , sodass die Produktseite dahinter durchblitzt. `overscroll-behavior: none` kappt genau diesen Bounce (Touch-Teil: support/sheet-overlay.js). */ overscroll-behavior: none; } /* Etappe-3.1-Smoke-Finding F-E-9: Text-Selektion war im Cream-Theme * praktisch unsichtbar, weil der Browser-Default-Highlight kaum Kontrast * gegen Input-BG und Modal-BG bietet. Wir setzen den Marken-Braunton als * Selektions-BG mit weißem Foreground — funktioniert auf Cream-Modal, * weißen Inputs und Snapshot-Bereich gleichermaßen. Scope nur Modal + * Trigger, damit die Plugin-Regel nicht in den Rest der Seite ausstrahlt. */ .sueco-designer-modal ::selection, .sueco-designer-trigger::selection { background: var(--sueco-primary, #8b5e3c); color: var(--sueco-white, #ffffff); } /* ----------------------------------------------------------------- Trigger („Jetzt personalisieren"-Button auf der Produktseite). ----------------------------------------------------------------- */ /* Trigger („Jetzt personalisieren") UND „Bearbeiten" der Summary-Karte teilen * eine Regel — bewusst zusammen (Julio-Befund 2026-08-04). * * Der Container tauscht beim Personalisieren die Karte, und der Button darin * darf dabei NICHT die Form wechseln. Vorher war „Bearbeiten" eine 999px-Pille * mit `background: transparent` neben einem 12px-Trigger: derselbe Platz, zwei * Formen. Getrennte Regeln driften wieder auseinander, deshalb ist die * Button-Form hier EINE Quelle; nur der Abstand nach oben bleibt pro Kontext. * * Radius aus dem Design-System-Token (--sueco-radius-button = 12px, aus * Theme-brand.css :root), damit die Form dem nativen „In den Warenkorb"-Button * folgt. Fallback 12px, falls das Theme-Token mal nicht geladen ist. * * OUTLINE statt brauner Füllung — ersetzt den gefüllten Stand vom 2026-07-23. * Grund ist die Nachbarschaft: der Button sitzt unmittelbar über dem ebenso * braunen „In den Warenkorb"-Button (Hook-Wechsel in * ProductRenderer::register). Zwei gefüllte Primary-Flächen übereinander * konkurrieren; die Personalisierung ist optional, der Warenkorb-Button der * einzige Weg in den Cart, also ist dieser hier der sekundäre. Design-System: * „kein großflächiger brauner Hintergrund, Primary nur für Buttons/Akzente." * Wer ihn wieder füllt, baut die CTA-Konkurrenz zurück. * * Weiß, nicht transparent: transparent ließe die creme Summary-Karte * durchscheinen — siehe die Marken-Regel weiß + Rahmen für anfassbare Elemente. */ .sueco-designer-trigger, .sueco-designer-summary__edit { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 0.7rem 1.3rem; border-radius: var(--sueco-radius-button, 12px); border: 1px solid var(--sueco-primary, #8b5e3c); background: var(--sueco-white, #ffffff); color: var(--sueco-primary, #8b5e3c); font: inherit; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; } .sueco-designer-trigger:hover:not(:disabled), .sueco-designer-trigger:focus-visible:not(:disabled), .sueco-designer-summary__edit:hover:not(:disabled), .sueco-designer-summary__edit:focus-visible:not(:disabled) { background: var(--sueco-primary, #8b5e3c); color: var(--sueco-white, #ffffff); outline: none; } .sueco-designer-trigger { margin-top: 0.55rem; } /* Hydration-Lock — Trigger startet ausgegraut, bis GET /state durch ist. * Hooks gesetzt aus `index.js` (`dataset.hydrating`, `dataset.hydrationError`). */ .sueco-designer-trigger[data-hydrating="true"] { opacity: 0.65; cursor: progress; } .sueco-designer-trigger[data-hydration-error] { opacity: 0.55; cursor: not-allowed; } /* Wartungs-Hinweis statt Designer-UI bei fehlendem Vorschau-Asset * (ADR-26 + Datenmodell §7.5.4). Greift im Frontend als Hard-Block, * solange `_sueco_preview_svg_id` leer ist. */ .sueco-designer-maintenance { margin: 1.2rem 0; padding: 1rem 1.2rem; border-radius: 8px; border: 1px solid var(--sueco-border, #e7e5e4); background: var(--sueco-bg-cream, #fbf6ec); color: var(--sueco-text-primary, #2d2926); } .sueco-designer-maintenance p { margin: 0; } .sueco-designer-maintenance p + p { margin-top: 0.4rem; color: var(--sueco-text-secondary, #57534e); } /* ----------------------------------------------------------------- Vorschau-Modus-Hinweis (G8) — sieht ausschließlich Shop-Personal auf einem Produkt, das auf „nur fürs Team" steht. Bewusst gestrichelt und damit optisch kein Kunden-Element: der Blick soll sofort sagen „das hier ist noch nicht live". ----------------------------------------------------------------- */ .sueco-designer-team-preview { margin: 1.2rem 0 0.6rem; padding: 0.7rem 1rem; border: 1px dashed var(--sueco-primary, #8b5e3c); border-radius: 8px; background: var(--sueco-white, #fff); color: var(--sueco-primary, #8b5e3c); font-size: 0.9rem; line-height: 1.4; } /* ----------------------------------------------------------------- Zusammenfassungs-Karte (G4.5) — erscheint statt des Triggers, sobald die Personalisierung „übernommen" wurde: Mini-Vorschau + Bestätigung + „Bearbeiten". Nach „Übernehmen" führt highlightNativeCart() zum nativen Warenkorb-Button. ----------------------------------------------------------------- */ .sueco-designer-summary { display: flex; gap: 1rem; align-items: center; margin: 1.2rem 0; padding: 0.9rem 1rem; border: 1px solid var(--sueco-border, #e7e5e4); border-radius: 12px; background: var(--sueco-bg-cream, #fbf6ec); } /* Aufforderungs-Variante (nicht personalisiert, Julio-Entscheid 2026-08-04). * WEISS statt creme: die Karte trägt das interaktive Element (den Trigger), und * weiß + Rahmen ist die Marken-Form für anfassbare Elemente. Der Rahmen bleibt * bewusst NEUTRAL, nicht braun — braun umrandet heißt bei sueco „aktiv / * ausgewählt", und diese Karte sagt gerade das Gegenteil („noch nicht * personalisiert"). Die creme Summary-Karte daneben markiert damit weiterhin * den erledigten Zustand. */ .sueco-designer-summary--prompt { background: var(--sueco-white, #ffffff); } .sueco-designer-summary__media { flex: 0 0 auto; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: var(--sueco-white, #ffffff); border: 1px solid var(--sueco-border, #e7e5e4); } .sueco-designer-summary__thumb { max-width: 100%; max-height: 100%; object-fit: contain; } .sueco-designer-summary__media--placeholder { color: var(--sueco-primary, #8b5e3c); font-size: 1.6rem; font-weight: 700; } /* G2 Befund 3 (2026-06-01): Pinsel-Symbol für die Karte bei mehrseitigen Produkten (statt eines irreführenden Einzelbild-Snapshots). */ .sueco-designer-summary__symbol { display: flex; } .sueco-designer-summary__symbol svg { width: 30px; height: 30px; } .sueco-designer-summary__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .sueco-designer-summary__heading { margin: 0; font-weight: 600; color: var(--sueco-text-primary, #2d2926); } .sueco-designer-summary__summary { margin: 0; font-size: 0.9rem; color: var(--sueco-text-secondary, #57534e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Optional-Hinweis der Aufforderungs-Karte. Bewusst NICHT `__summary`: dort * kürzt `white-space: nowrap` + Ellipse die Gravur-Kurzfassung auf eine Zeile, * was für einen erklärenden Satz genau falsch ist (mobil abgeschnitten). */ .sueco-designer-summary__hint { margin: 0; font-size: 0.9rem; color: var(--sueco-text-secondary, #57534e); } /* Multi-Page-Karte (G2): pro Seite eine eigene Zeile mit Label, damit sichtbar ist, dass mehrere Seiten personalisiert wurden. */ .sueco-designer-summary__sides { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.1rem; } .sueco-designer-summary__side { font-size: 0.9rem; color: var(--sueco-text-secondary, #57534e); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sueco-designer-summary__side-label { font-weight: 600; color: var(--sueco-text-primary, #2d2926); } /* Form, Farben und Hover kommen aus der geteilten Regel beim Trigger (eine * Quelle, damit der Button beim Wechsel Trigger ↔ Bearbeiten formstabil bleibt). * Hier bleibt nur der kontextabhängige Abstand zur Gravur-Kurzfassung darüber. */ .sueco-designer-summary__edit { margin-top: 0.55rem; } /* Kurz-Hervorhebung des nativen Warenkorb-Buttons nach „Übernehmen" (highlightNativeCart). Bei reduzierter Bewegung kein Puls — die Klasse wird per Timeout-Fallback in index.js trotzdem wieder entfernt. */ @keyframes sueco-designer-cart-pulse { 0% { box-shadow: 0 0 0 0 rgba(139, 94, 60, 0.5); } 70% { box-shadow: 0 0 0 12px rgba(139, 94, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 94, 60, 0); } } .sueco-designer-cart-highlight { animation: sueco-designer-cart-pulse 1.2s ease-out 2; } @media (prefers-reduced-motion: reduce) { .sueco-designer-cart-highlight { animation: none; } } /* ----------------------------------------------------------------- Modal-Frame. ----------------------------------------------------------------- */ .sueco-designer-modal { width: 100vw; max-width: 100vw; /* G4-θ-Mobile-Fix (Julio 2026-05-31): `100dvh` statt `100vh`. `100vh` ist die GROSSE Viewport-Höhe (gerechnet, als wäre die Browser-URL-Leiste bereits ausgeblendet) — bei sichtbarer URL-Leiste ragt der Dialog dann unten dahinter und die sticky `bottom:0`-CTA-Leiste verschwindet hinter der Adressleiste („In den Warenkorb" überdeckt, bis man scrollt). `dvh` misst die TATSÄCHLICH sichtbare Höhe und folgt der ein-/ausfahrenden URL-Leiste live. `vh` bleibt als Fallback für Engines ohne dvh. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 0; /* Der Dialog-Rahmen scrollt NIE selbst — Scroller ist ausschließlich `__content` (bzw. `__body` im Wizard). Die UA-Regel für modale Dialoge (`dialog:modal { overflow: auto }`) macht ihn sonst zum Scroll-Ziel für jede Geste, die im Sheet-Overlay keinen Scroller findet (iPhone-Smoke 2026-07-28). Desktop hatte das schon in der ≥768px-MQ. */ overflow: hidden; border: none; background: var(--sueco-bg-cream, #fbf6ec); color: var(--sueco-text-primary, #2d2926); } /* Display-Layout NUR im offenen Zustand — `display: flex` ohne diese * Bedingung überschreibt das User-Agent-Default * `dialog:not([open]) { display: none }`. */ .sueco-designer-modal[open] { display: flex; flex-direction: column; } .sueco-designer-modal::backdrop { background: rgba(28, 28, 28, 0.55); } /* ----------------------------------------------------------------- Topbar (sticky). ----------------------------------------------------------------- */ .sueco-designer-modal__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--sueco-bg-cream, #fbf6ec); border-bottom: 1px solid var(--sueco-border, #e7e5e4); position: sticky; top: 0; z-index: 2; flex: 0 0 auto; } .sueco-designer-modal__title { flex: 1; font-family: var(--sueco-font-body, "Inter", system-ui, sans-serif); font-size: 15px; font-weight: 600; margin: 0; } .sueco-designer-modal__back, .sueco-designer-modal__close { width: 32px; height: 32px; background: transparent; border: none; font-size: 18px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; color: inherit; } .sueco-designer-modal__back:hover, .sueco-designer-modal__close:hover { background: var(--sueco-bg-gray, #f4f4f5); } .sueco-designer-modal__back[hidden] { visibility: hidden; display: inline-flex; } /* ----------------------------------------------------------------- Progress (sticky unter Topbar). ----------------------------------------------------------------- */ .sueco-designer-modal__progress { display: flex; align-items: center; gap: 10px; padding: 10px 16px 12px; background: var(--sueco-bg-cream, #fbf6ec); border-bottom: 1px solid var(--sueco-border, #e7e5e4); position: sticky; top: 49px; /* Topbar-Höhe (Padding 12 + Inhalt ~25 + Padding 12) */ z-index: 1; flex: 0 0 auto; } .sueco-designer-modal__progress-track { flex: 1; height: 4px; background: var(--sueco-border, #e7e5e4); border-radius: 999px; overflow: hidden; } .sueco-designer-modal__progress-fill { height: 100%; background: var(--sueco-primary, #8b5e3c); transition: width 200ms ease-out; width: 0%; border-radius: inherit; } .sueco-designer-modal__progress-label { font-size: 11px; font-weight: 600; color: var(--sueco-text-secondary, #57534e); letter-spacing: 0.04em; min-width: 36px; text-align: right; } /* ----------------------------------------------------------------- Body — Mobile column, Desktop row. ----------------------------------------------------------------- */ .sueco-designer-modal__body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .sueco-designer-modal__content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 16px 24px; display: flex; flex-direction: column; gap: 18px; } /* ----------------------------------------------------------------- Stage-Pane (Live-Preview, fester DOM-Slot — Spur 3). Mobile: Preview-Card oben (white, border, radius); Desktop: linke Spalte 45 %, transparent. `data-show-stage="false"` am Body blendet die Pane aus (service-type-Step). ----------------------------------------------------------------- */ .sueco-designer-stage-pane { flex: 0 0 auto; margin: 16px 16px 0; padding: 16px; background: var(--sueco-white, #ffffff); border: 1px solid var(--sueco-border, #e7e5e4); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; } .sueco-designer-stage-pane__container { width: 100%; max-width: 280px; /* aspect-ratio wird per JS aus den Produkt-Postmeta-Maßen gesetzt * (Wizard.ensureStage). Fallback hier: quadratisch. */ aspect-ratio: 1 / 1; } .sueco-designer-stage-pane__caption { font-size: 10px; color: var(--sueco-text-secondary, #57534e); text-transform: uppercase; letter-spacing: 0.08em; align-self: flex-end; } .sueco-designer-modal__body[data-show-stage="false"] .sueco-designer-stage-pane { display: none; } /* ----------------------------------------------------------------- Bottombar (sticky). ----------------------------------------------------------------- */ .sueco-designer-modal__bottombar { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); background: var(--sueco-bg-cream, #fbf6ec); border-top: 1px solid var(--sueco-border, #e7e5e4); position: sticky; bottom: 0; z-index: 2; flex: 0 0 auto; } .sueco-designer-modal__bottombar:empty { display: none; } .sueco-designer-modal__bottombar-row { display: flex; gap: 10px; width: 100%; } .sueco-designer-modal__bottombar--stack .sueco-designer-modal__bottombar-row { flex-direction: column; } /* ----------------------------------------------------------------- Desktop-Refit (≥ 768 px). ----------------------------------------------------------------- */ @media (min-width: 768px) { .sueco-designer-modal { /* G4-θ (Julio 2026-05-31): Fenster großzügiger — die rechte Bedien- Spalte trägt jetzt Inhalt + Schrift + Position/Größe + Ebenen-Liste und braucht mehr Höhe, damit alles ohne Scrollen sichtbar ist. */ width: min(1040px, 92vw); max-width: 92vw; height: min(800px, 92vh); max-height: 92vh; margin: auto; border-radius: 20px; overflow: hidden; } .sueco-designer-modal__body { flex-direction: row; } /* 4a.1.2 — Stage-Pane auf Desktop wieder als weißer Container (wie Mobile). Julio-Feedback 2026-05-19 abend: einheitlich mit den Font-/Input-Cards. ~20 px margin zum Modal-Rand, gleiche Border-/ Radius-Tokens wie die Cards. Padding bleibt 24 px für inneren Atemraum. */ .sueco-designer-stage-pane { flex: 0 0 calc(45% - 30px); max-width: calc(45% - 30px); margin: 20px 0 20px 20px; padding: 24px; justify-content: center; } .sueco-designer-stage-pane__container { max-width: 100%; } .sueco-designer-modal__content { flex: 1; padding: 24px; } /* Bug 1 (4a.1): adjust-Step bricht das 45/55-Zweispalten-Layout, weil die rechte Spalte dort nur Heading + Hint zeigt — der User sieht eine links versetzte Stage und einen halbleeren Rest. Im adjust-Step wird der Body stattdessen vertikal gestapelt: Stage-Pane oben mit zentriertem Container, Heading + Hint darunter. Stage-Mitte trifft so die Modal-Mitte. */ .sueco-designer-modal__body[data-active-step="adjust"] { flex-direction: column; } .sueco-designer-modal__body[data-active-step="adjust"] .sueco-designer-stage-pane { flex: 0 0 auto; width: calc(100% - 40px); max-width: calc(100% - 40px); margin: 20px 20px 0 20px; padding: 24px; } .sueco-designer-modal__body[data-active-step="adjust"] .sueco-designer-stage-pane__container { max-width: 480px; } .sueco-designer-modal__body[data-active-step="adjust"] .sueco-designer-modal__content { flex: 1; padding-top: 8px; text-align: center; } } /* ----------------------------------------------------------------- Step-Content-Bausteine (Spur 4 — globale Typo + Form-Polish). ----------------------------------------------------------------- */ .sueco-designer-step { display: flex; flex-direction: column; gap: 16px; } /* Heading auf Playfair 22 px 600 — Markenstimme (brand.css §Headings). * Greift für alle vier Steps; Step-spezifische Größen werden nicht * benötigt. */ .sueco-designer-step__heading { font-family: var(--sueco-font-heading, "Playfair Display", Georgia, serif); font-size: 22px; font-weight: 600; line-height: 1.2; margin: 0; color: var(--sueco-text-primary, #2d2926); } /* Hinweis-Paragraph unter dem Heading — kommt im AdjustStep zum Tragen * (Phase 4 Block F Etappe 4a), wo die Stage-Pane das eigentliche * Interaktions-Surface ist und der Content-Bereich nur den Hinweis * trägt. */ .sueco-designer-step__hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sueco-text-secondary, #57534e); } /* 4a.1.1: Stage-Pane-Clamp-Flash + Persistent-Caption-Marker entfernt * (Julio-Feedback 2026-05-19). Die Item-eigene rote Dash-Outline aus * ContentLayer.buildClampOutline bleibt als subtiler Affordance-Marker. */ .sueco-designer-step__fields { display: flex; flex-direction: column; gap: 14px; } .sueco-designer-field { display: flex; flex-direction: column; gap: 6px; } .sueco-designer-field__label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sueco-text-secondary, #57534e); } .sueco-designer-field__label-optional { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: 0.7; } .sueco-designer-field__input { font: inherit; min-height: 48px; padding: 11px 13px; border: 2px solid var(--sueco-border, #e7e5e4); border-radius: 8px; background: var(--sueco-white, #ffffff); color: var(--sueco-text-primary, #2d2926); transition: border-color 150ms ease-out; } .sueco-designer-field__input::placeholder { color: var(--sueco-text-secondary, #57534e); opacity: 0.5; } /* 4a.1.3 — Specificity-Bump gegen Blocksys Theme-Forms-Regel * `input:is([type="text"], ...)` (0,1,1) für Default und * `input:is([type="text"], ...):focus` (0,2,1) für Focus. * Wrapper-Selector `.sueco-designer-modal` hebt uns auf (0,2,0) * default und (0,3,0) focus, sodass weiß-Background, 2-px-Border * und Primary-Border-Color im Fokus durchschlagen. * * `:focus` statt `:focus-visible`: bei Mausklick auf Inputs ist * `:focus-visible` zwar äquivalent, aber `:focus` greift auch bei * programmatischem `.focus()`-Aufruf und vermeidet Browser- * Sonderfälle. Für Inputs ist das harmlos (Outline-Affordance bei * Keyboard-Nav wird durch den Border-Color-Wechsel ersetzt). */ .sueco-designer-modal .sueco-designer-field__input { border: 2px solid var(--sueco-border, #e7e5e4); background-color: var(--sueco-white, #ffffff); } .sueco-designer-modal .sueco-designer-field__input:focus { outline: none; border-color: var(--sueco-primary, #8b5e3c); background-color: var(--sueco-white, #ffffff); } .sueco-designer-link { align-self: flex-start; background: transparent; border: none; color: var(--sueco-primary, #8b5e3c); font: inherit; padding: 0; cursor: pointer; text-decoration: underline; } .sueco-designer-link[hidden] { display: none; } /* ----------------------------------------------------------------- Buttons (Spur 4 — 48-px-Refit, Ghost-Block-Variante neu). ----------------------------------------------------------------- */ .sueco-designer-button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 600; min-height: 48px; padding: 12px 18px; border-radius: 8px; border: none; cursor: pointer; line-height: 1.2; } .sueco-designer-button:focus-visible { outline: 2px solid var(--sueco-primary, #8b5e3c); outline-offset: 2px; } .sueco-designer-button__icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: inherit; } .sueco-designer-button__icon svg { width: 100%; height: 100%; } .sueco-designer-button--primary { background: var(--sueco-primary, #8b5e3c); color: var(--sueco-white, #ffffff); } .sueco-designer-button--primary:hover:not(:disabled) { background: var(--sueco-primary-hover, #704930); } .sueco-designer-button--primary:disabled { background: var(--sueco-border, #e7e5e4); color: var(--sueco-text-secondary, #57534e); cursor: not-allowed; } .sueco-designer-button--secondary { background: transparent; color: var(--sueco-text-primary, #2d2926); border: 1px solid var(--sueco-border, #e7e5e4); } .sueco-designer-button--secondary:hover { background: var(--sueco-bg-gray, #f4f4f5); } /* Ghost-Block — full-width, dashed Border, für „+ Zeile hinzufügen" * im EnterTextsStep. Hat keine Solid-BG, nur einen dezenten Outline- * Look, damit es nicht mit den Primary-/Secondary-Bottombar-Buttons * konkurriert. */ .sueco-designer-button--ghost-block { flex: 0 0 auto; width: 100%; background: transparent; color: var(--sueco-text-secondary, #57534e); border: 1px dashed var(--sueco-border, #e7e5e4); font-weight: 500; } .sueco-designer-button--ghost-block:hover:not(:disabled) { border-color: var(--sueco-primary, #8b5e3c); color: var(--sueco-primary, #8b5e3c); } .sueco-designer-button--ghost-block[hidden] { display: none; } /* ----------------------------------------------------------------- Service-Type-Cards (Spur 4 — Icon-Pill + Eyebrow + Pill-Preis). Card-Grid: [Icon-Pill] [Body-Col mit Eyebrow/Title/Text] [Price-Pill]. Pro-Card ist disabled, behält aber den vollen Look mit reduzierter Opacity — UX-Mockup §02 Service-Type. ----------------------------------------------------------------- */ .sueco-designer-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border: 1px solid var(--sueco-border, #e7e5e4); border-radius: 12px; background: var(--sueco-white, #ffffff); font: inherit; text-align: left; cursor: pointer; transition: border-color 150ms ease-out; } .sueco-designer-card:hover:not(:disabled), .sueco-designer-card:focus-visible:not(:disabled) { border-color: var(--sueco-primary, #8b5e3c); outline: none; } .sueco-designer-card:disabled { opacity: 0.6; cursor: not-allowed; } /* Service-Card-Variante: Grid mit Icon links, Body-Col mitte, * Price-Pill rechts oben. */ .sueco-designer-card--service { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto; column-gap: 14px; row-gap: 6px; align-items: start; } .sueco-designer-card__icon { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--sueco-bg-cream, #fbf6ec); color: var(--sueco-primary, #8b5e3c); display: inline-flex; align-items: center; justify-content: center; } .sueco-designer-card__icon svg { width: 22px; height: 22px; } .sueco-designer-card__body-col { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sueco-designer-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sueco-primary, #8b5e3c); } .sueco-designer-card__title { font-family: var(--sueco-font-heading, "Playfair Display", Georgia, serif); font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--sueco-text-primary, #2d2926); } .sueco-designer-card__text { font-size: 13px; line-height: 1.45; color: var(--sueco-text-secondary, #57534e); } /* Price-Pill: rechts oben, kompakter Pill mit Variante neutral (grau, * für „Inklusive") und accent (brown, für „+ 17,50 €"). */ .sueco-designer-card__price-pill { grid-column: 3; grid-row: 1; align-self: start; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .sueco-designer-card__price-pill--neutral { background: var(--sueco-bg-cream, #fbf6ec); color: var(--sueco-text-secondary, #57534e); border: 1px solid var(--sueco-border, #e7e5e4); } .sueco-designer-card__price-pill--accent { background: var(--sueco-primary, #8b5e3c); color: var(--sueco-white, #ffffff); } /* ----------------------------------------------------------------- Banner (Tipp-Hinweis im ServiceTypeStep, Spur 4). ----------------------------------------------------------------- */ .sueco-designer-banner { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; } .sueco-designer-banner--info { background: var(--sueco-bg-cream, #fbf6ec); border: 1px solid var(--sueco-border, #e7e5e4); color: var(--sueco-text-secondary, #57534e); } .sueco-designer-banner__icon { flex: 0 0 auto; width: 18px; height: 18px; display: inline-flex; color: var(--sueco-primary, #8b5e3c); } .sueco-designer-banner__icon svg { width: 100%; height: 100%; } .sueco-designer-banner__text { flex: 1; } /* ----------------------------------------------------------------- Font-Cards (Spur 4 — Custom-Radio-Pill). Natives bleibt aus A11y-Gründen, wird aber visuell versteckt und durch einen 18-px-Custom-Radio ersetzt. :checked-State blendet eine „gewählt"-Pill rechts ein. ----------------------------------------------------------------- */ .sueco-designer-font-list { display: flex; flex-direction: column; gap: 10px; } .sueco-designer-font-card { position: relative; display: grid; grid-template-columns: 18px 1fr auto; column-gap: 14px; align-items: center; padding: 13px 15px; border: 2px solid var(--sueco-border, #e7e5e4); border-radius: 10px; background: var(--sueco-white, #ffffff); cursor: pointer; transition: border-color 150ms ease-out, background-color 150ms ease-out; } .sueco-designer-font-card:hover { border-color: var(--sueco-primary, #8b5e3c); } /* Natives Radio absolut positionieren + visuell unsichtbar, aber an der * Custom-Radio-Position, damit Klick/Focus auf den Custom-Radio den * nativen Input erreicht und A11y/Form-Mechanik erhalten bleiben. */ .sueco-designer-font-card__input { position: absolute; width: 18px; height: 18px; margin: 0; left: 16px; top: 50%; transform: translateY(-50%); opacity: 0; cursor: pointer; } .sueco-designer-font-card__radio { width: 18px; height: 18px; border: 2px solid var(--sueco-border, #e7e5e4); border-radius: 50%; background: var(--sueco-white, #ffffff); position: relative; transition: border-color 150ms ease-out; } .sueco-designer-font-card__radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--sueco-primary, #8b5e3c); opacity: 0; transform: scale(0.6); transition: opacity 120ms ease-out, transform 120ms ease-out; } .sueco-designer-font-card__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .sueco-designer-font-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sueco-text-secondary, #57534e); } .sueco-designer-font-card__sample { font-size: 22px; line-height: 1.2; color: var(--sueco-text-primary, #2d2926); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* „gewählt"-Pill — nur sichtbar bei :checked. */ .sueco-designer-font-card__badge { display: none; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--sueco-primary, #8b5e3c); color: var(--sueco-white, #ffffff); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .sueco-designer-font-card__badge svg { width: 12px; height: 12px; } /* Etappe-3.1-Smoke-Finding F-E-10: Selected-State trug zusätzlich zur * Border + Radio-Filling + „GEWÄHLT"-Badge auch noch einen Cream-BG — * insgesamt zu viel beige auf einer Cream-Modal-Fläche. Border + Badge * tragen die Signalwirkung allein, BG bleibt weiß. */ .sueco-designer-font-card:has(input:checked) { border-color: var(--sueco-primary, #8b5e3c); } .sueco-designer-font-card:has(input:checked) .sueco-designer-font-card__radio { border-color: var(--sueco-primary, #8b5e3c); } .sueco-designer-font-card:has(input:checked) .sueco-designer-font-card__radio::after { opacity: 1; transform: scale(1); } .sueco-designer-font-card:has(input:checked) .sueco-designer-font-card__badge { display: inline-flex; } /* 4a.1.2 — focus-within nur noch via Border-Color-Wechsel (keine * zusätzliche Box-Shadow-Outline mehr, da die Border bereits 2 px ist * und sonst doppelt aussieht). */ .sueco-designer-font-card:focus-within { border-color: var(--sueco-primary, #8b5e3c); } /* ----------------------------------------------------------------- Review-Card (Spur 4 — Snapshot + Eyebrow + Edit + Meta + Summary). ----------------------------------------------------------------- */ .sueco-designer-review-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--sueco-border, #e7e5e4); border-radius: 12px; background: var(--sueco-white, #ffffff); } .sueco-designer-review-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sueco-designer-review-card__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sueco-text-secondary, #57534e); } .sueco-designer-review-card__edit { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 4px 8px; margin: -4px -8px; color: var(--sueco-primary, #8b5e3c); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 6px; } .sueco-designer-review-card__edit:hover, .sueco-designer-review-card__edit:focus-visible { background: var(--sueco-bg-cream, #fbf6ec); outline: none; } .sueco-designer-review-card__edit svg { width: 14px; height: 14px; } .sueco-designer-review-card__snapshot { display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--sueco-bg-cream, #fbf6ec); border: 1px solid var(--sueco-border, #e7e5e4); border-radius: 10px; min-height: 140px; } .sueco-designer-review-card__snapshot-img { max-width: 100%; max-height: 240px; height: auto; display: block; } .sueco-designer-review-card__snapshot-fallback { font-size: 12px; color: var(--sueco-text-secondary, #57534e); font-style: italic; } .sueco-designer-review-card__meta { display: grid; grid-template-columns: max-content 1fr; column-gap: 16px; row-gap: 6px; margin: 0; font-size: 14px; } .sueco-designer-review-card__meta dt { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sueco-text-secondary, #57534e); align-self: start; padding-top: 2px; } .sueco-designer-review-card__meta dd { margin: 0; color: var(--sueco-text-primary, #2d2926); } .sueco-designer-review-card__line { line-height: 1.4; } .sueco-designer-review-card__line--empty { color: var(--sueco-text-secondary, #57534e); font-style: italic; } .sueco-designer-review-card__summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--sueco-border, #e7e5e4); font-size: 13px; color: var(--sueco-text-secondary, #57534e); } .sueco-designer-review-card__summary-label strong { color: var(--sueco-text-primary, #2d2926); font-weight: 600; } /* ----------------------------------------------------------------- Badge (für Summary-Row im Review, Spur 4). ----------------------------------------------------------------- */ .sueco-designer-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .sueco-designer-badge--success { background: #e8f1ea; color: #2f6a40; } .sueco-designer-stage { width: 100%; } /* ----------------------------------------------------------------- Spur 6 — Loading / Save / Error. DOM-Hooks aus Block D (`index.js`): - `.dataset.saving` ('true' / 'false') - `.dataset.saveError` (Code-String, gesetzt nur bei Fehler) - Trigger-`