/* ═══════════════════════════════════════════════════════════════════ EASY WAY 365 — GUTENBERG-EDITOR-KORREKTUREN Datei: assets/css/ew365-editor.css Diese Datei wird NUR im Editor geladen. Sie sorgt dafür, dass die Klassen aus ew365-design-system.css auch in der Editor-Ansicht korrekt greifen (der Editor rendert ohne ). ═══════════════════════════════════════════════════════════════════ */ /* ─── 1. BODY-SCOPE IM EDITOR EMULIEREN ───────────────────────────── Im Frontend greifen viele Regeln über body.ew365. Im Editor gibt es diese Klasse nicht — deshalb hier dieselben Regeln über den Editor-Wrapper duplizieren. ─────────────────────────────────────────────────────────────────── */ .editor-styles-wrapper { font-family: var(--ew-f-ui); color: var(--ew-ink); background: var(--ew-white); line-height: 1.6; -webkit-font-smoothing: antialiased; } .editor-styles-wrapper .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ew-f-ui); font-weight: 700; font-size: 0.92rem; padding: 12px 22px; border-radius: var(--ew-r-pill); } .editor-styles-wrapper .wp-block-button.is-style-fill .wp-block-button__link { background: var(--ew-orange); color: var(--ew-teal-900); } .editor-styles-wrapper .wp-block-quote.is-style-ew-keyfact { background: var(--ew-teal-900); border-radius: var(--ew-r-xl); padding: 28px 32px; border: none; } .editor-styles-wrapper .wp-block-quote.is-style-ew-keyfact p { font-family: var(--ew-f-display); font-size: 1.25rem; font-weight: 700; color: var(--ew-white); line-height: 1.4; } .editor-styles-wrapper .comment-form, .editor-styles-wrapper .entry.loop-entry { /* Nicht relevant im Editor – neutralisieren */ all: unset; } /* ─── 2. ARTIKEL-TYPOGRAFIE IM EDITOR ────────────────────────────── Damit der Beitragseditor exakt wie der fertige Blogartikel aussieht. ─────────────────────────────────────────────────────────────────── */ body.post-type-post .editor-styles-wrapper, .editor-styles-wrapper.ew-article-body { font-family: var(--ew-f-body); font-size: 1.08rem; line-height: 1.8; color: var(--ew-ink-700); } body.post-type-post .editor-styles-wrapper h2 { font-family: var(--ew-f-display); font-size: 1.55rem; font-weight: 800; color: var(--ew-teal-900); letter-spacing: -0.025em; padding-bottom: 10px; border-bottom: 2px solid var(--ew-teal-100); } body.post-type-post .editor-styles-wrapper h3 { font-family: var(--ew-f-display); font-size: 1.2rem; font-weight: 700; color: var(--ew-teal-800); } body.post-type-post .editor-styles-wrapper ul li::marker { color: var(--ew-orange); } body.post-type-post .editor-styles-wrapper strong { color: var(--ew-teal-800); } /* ─── 3. HILFS-LABELS FÜR REDAKTEURE ──────────────────────────────── Zeigt im Editor an, welche Spezial-Klasse aktiv ist. Erscheint NUR im Backend, nie im Frontend. ─────────────────────────────────────────────────────────────────── */ .editor-styles-wrapper .ew-callout, .editor-styles-wrapper .ew-keyfact, .editor-styles-wrapper .ew-steps, .editor-styles-wrapper .ew-vp, .editor-styles-wrapper .ew-hero { position: relative; } .editor-styles-wrapper .ew-callout::after { content: 'ew-callout'; position: absolute; top: -9px; right: 10px; background: var(--ew-teal-700); color: #fff; font-family: var(--ew-f-ui); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; pointer-events: none; opacity: 0.85; } .editor-styles-wrapper .ew-callout--warning::after { content: 'ew-callout--warning'; background: var(--ew-orange-600); } .editor-styles-wrapper .ew-keyfact::after { content: 'ew-keyfact'; position: absolute; top: -9px; right: 10px; background: var(--ew-orange); color: var(--ew-teal-900); font-family: var(--ew-f-ui); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; pointer-events: none; } .editor-styles-wrapper .ew-steps::after { content: 'ew-steps'; position: absolute; top: -9px; right: 10px; background: var(--ew-teal-700); color: #fff; font-family: var(--ew-f-ui); font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; pointer-events: none; opacity: 0.85; } /* ─── 4. DUNKLE BLÖCKE IM EDITOR LESBAR HALTEN ─────────────────────── */ .editor-styles-wrapper .ew-bg-dark, .editor-styles-wrapper .ew-hero, .editor-styles-wrapper .ew-event { color: var(--ew-white); } .editor-styles-wrapper .ew-bg-dark .block-editor-rich-text__editable, .editor-styles-wrapper .ew-hero .block-editor-rich-text__editable, .editor-styles-wrapper .ew-event .block-editor-rich-text__editable { color: var(--ew-white); } /* Platzhaltertext auf dunklem Grund */ .editor-styles-wrapper .ew-bg-dark [data-rich-text-placeholder]::after, .editor-styles-wrapper .ew-hero [data-rich-text-placeholder]::after { color: rgba(255,255,255,0.4) !important; } /* ─── 5. LAYOUT-BREITEN IM EDITOR ──────────────────────────────────── */ .editor-styles-wrapper .wp-block { max-width: var(--ew-content-width); } .editor-styles-wrapper .wp-block[data-align="wide"] { max-width: var(--ew-wide-width); } .editor-styles-wrapper .wp-block[data-align="full"] { max-width: none; } /* ─── 6. STICKY-SIDEBAR IM EDITOR NEUTRALISIEREN ───────────────────── */ .editor-styles-wrapper .ew-sidebar { position: static; max-height: none; } /* Animationen im Editor abschalten (stören beim Bearbeiten) */ .editor-styles-wrapper .ew-animate, .editor-styles-wrapper .ew-animate-d1, .editor-styles-wrapper .ew-animate-d2, .editor-styles-wrapper .ew-animate-d3, .editor-styles-wrapper .ew-reveal, .editor-styles-wrapper .ew-hero__ring, .editor-styles-wrapper .ew-event__ring, .editor-styles-wrapper .ew-hero__badge { animation: none !important; opacity: 1 !important; transform: none !important; }