/** * TinyMCE-Inhaltsvorschau – zuletzt geladen, überschreibt Site-CSS im iframe. * Kein body.skk: Theme-Variablen kommen über content_style, Inhaltsklassen (.skk-page) wirken weiter. * Ziel: iframe verhält sich wie das Frontend-Fenster – Body ist die "Seite" (volle Breite), * Sektionen laufen randlos, .skk-wrap zentriert sich mit seiner eigenen Live-Breite. */ html { height: auto !important; min-height: 100% !important; overflow: visible !important; background: var(--paper, var(--bg, var(--skk-paper, #eef2f7))); } body.website-preview, body.mce-content-body { --cms-preview-pad: clamp(0.75rem, 2vw, 1.5rem); box-sizing: border-box !important; height: auto !important; min-height: 480px !important; max-height: none !important; overflow: visible !important; opacity: 1 !important; transform: none !important; filter: none !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 1rem var(--cms-preview-pad) 2.5rem !important; border-radius: 0; box-shadow: none; background: var(--paper, var(--bg, var(--skk-paper, #fff))) !important; color: var(--ink, #1f1f1f); font-size: 16px; line-height: 1.6; font-family: var(--skk-sans, var(--cms-font-body, system-ui, sans-serif)); } body.website-preview *, body.mce-content-body * { box-sizing: border-box; } /* Sektionen randlos wie im Frontend: Body-Padding wieder herausrechnen */ body.mce-content-body > :where(.skk-section, .skk-page, .skk-hero, .skk-top, section, header, footer, main), body.website-preview > :where(.skk-section, .skk-page, .skk-hero, .skk-top, section, header, footer, main) { width: auto !important; max-width: none !important; min-width: 0 !important; margin-left: calc(-1 * var(--cms-preview-pad)) !important; margin-right: calc(-1 * var(--cms-preview-pad)) !important; } /* Verschachtelte Sektionen: nur entsperren, nicht noch einmal randlos ziehen */ body.mce-content-body :where(.skk-section, .skk-page), body.website-preview :where(.skk-section, .skk-page) { min-width: 0; } /* .skk-wrap behält seine Live-Breite (ai_css gewinnt dank :where = Spezifität 0) */ :where(body.mce-content-body, body.website-preview) :where(.skk-wrap) { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; } body.mce-content-body .skk-wrap, body.website-preview .skk-wrap { min-width: 0; } /* Grid-Kinder dürfen nicht über ihre Spalte hinauswachsen (2-Spalten-News) */ body.mce-content-body :where(.skk-wrap, .skk-section) > * > *, body.website-preview :where(.skk-wrap, .skk-section) > * > * { min-width: 0; } /* Fließtext ohne Site-Wrapper bleibt lesbar (Domains ohne .skk-Markup) */ body.mce-content-body > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure, table), body.website-preview > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, pre, figure, table) { max-width: 72rem; margin-left: auto; margin-right: auto; } /* Chrome (Nav/Hero) im Editor entschärfen – gehört nicht in den Baustein-Inhalt */ body.mce-content-body .skk-top, body.mce-content-body .skk-nav, body.mce-content-body .skk-hero, body.website-preview .skk-top, body.website-preview .skk-nav, body.website-preview .skk-hero { min-height: 0 !important; height: auto !important; max-height: none !important; position: static !important; } body.mce-content-body .skk-hero .carousel-item, body.website-preview .skk-hero .carousel-item { min-height: 0 !important; height: auto !important; } /* Viewport-Höhen im iframe abschalten (dvh/vh sind hier die Editorhöhe) */ body.mce-content-body :where(.skk-section, .skk-page, .skk-wrap), body.website-preview :where(.skk-section, .skk-page, .skk-wrap) { min-height: 0; } /* AOS / Animationen im Editor sofort sichtbar */ body.mce-content-body [data-aos], body.website-preview [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* animate.css: Inhalt im Editor nie unsichtbar (fadeIn & Co. starten bei opacity 0) */ body.mce-content-body [class*="animate__"], body.website-preview [class*="animate__"] { opacity: 1 !important; transform: none !important; animation: none !important; visibility: visible !important; } body.website-preview img, body.mce-content-body img { max-width: 100% !important; height: auto !important; } body.website-preview table, body.mce-content-body table { max-width: 100%; border-collapse: collapse; } body.website-preview td, body.website-preview th, body.mce-content-body td, body.mce-content-body th { padding: 0.35rem 0.5rem; } body.mce-content-body h1, body.mce-content-body h2, body.mce-content-body h3, body.website-preview h1, body.website-preview h2, body.website-preview h3 { font-family: var(--skk-display, var(--cms-font-heading, inherit)); } body.mce-content-body a, body.website-preview a { color: var(--navy, var(--cms-accent, #0d6efd)); } /* ========================================================= Grid-Grundgeruest ohne Bootstrap-Datei --------------------------------------------------------- content_css sucht Bootstrap nur unter bootstrap/dist/, bootstrap/ und admin/vendor/. Fehlt die Datei auf einer Domain, bleibt .row ein Block: die Spalten bekommen zwar ueber die Remaps unten schon 33 % Breite, stehen aber untereinander - genau das Bild "Karten gestapelt, jede ein Drittel breit". Diese Basis bildet das Bootstrap-Grid im Editor nach. Bewusst ohne !important, damit eine vorhandene bootstrap.min.css und die Breakpoint-Remaps weiter unten unveraendert gewinnen. ========================================================= */ .mce-content-body .container, .mce-content-body .container-fluid, .mce-content-body .container-sm, .mce-content-body .container-md, .mce-content-body .container-lg, .mce-content-body .container-xl, .mce-content-body .container-xxl { width: 100%; margin-right: auto; margin-left: auto; padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5); padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); } .mce-content-body .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); margin-right: calc(-0.5 * var(--bs-gutter-x)); margin-left: calc(-0.5 * var(--bs-gutter-x)); } .mce-content-body .row > * { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .mce-content-body .col { flex: 1 0 0%; } .mce-content-body .col-auto { flex: 0 0 auto; width: auto; } .mce-content-body .col-1 { flex: 0 0 auto; width: 8.333333%; } .mce-content-body .col-2 { flex: 0 0 auto; width: 16.666667%; } .mce-content-body .col-3 { flex: 0 0 auto; width: 25%; } .mce-content-body .col-4 { flex: 0 0 auto; width: 33.333333%; } .mce-content-body .col-5 { flex: 0 0 auto; width: 41.666667%; } .mce-content-body .col-6 { flex: 0 0 auto; width: 50%; } .mce-content-body .col-7 { flex: 0 0 auto; width: 58.333333%; } .mce-content-body .col-8 { flex: 0 0 auto; width: 66.666667%; } .mce-content-body .col-9 { flex: 0 0 auto; width: 75%; } .mce-content-body .col-10 { flex: 0 0 auto; width: 83.333333%; } .mce-content-body .col-11 { flex: 0 0 auto; width: 91.666667%; } .mce-content-body .col-12 { flex: 0 0 auto; width: 100%; } .mce-content-body .row-cols-1 > * { flex: 0 0 auto; width: 100%; } .mce-content-body .row-cols-2 > * { flex: 0 0 auto; width: 50%; } .mce-content-body .row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; } .mce-content-body .row-cols-4 > * { flex: 0 0 auto; width: 25%; } .mce-content-body .row-cols-5 > * { flex: 0 0 auto; width: 20%; } .mce-content-body .row-cols-6 > * { flex: 0 0 auto; width: 16.666667%; } .mce-content-body .g-0, .mce-content-body .gx-0 { --bs-gutter-x: 0; } .mce-content-body .g-0, .mce-content-body .gy-0 { --bs-gutter-y: 0; } .mce-content-body .g-1, .mce-content-body .gx-1 { --bs-gutter-x: 0.25rem; } .mce-content-body .g-1, .mce-content-body .gy-1 { --bs-gutter-y: 0.25rem; } .mce-content-body .g-2, .mce-content-body .gx-2 { --bs-gutter-x: 0.5rem; } .mce-content-body .g-2, .mce-content-body .gy-2 { --bs-gutter-y: 0.5rem; } .mce-content-body .g-3, .mce-content-body .gx-3 { --bs-gutter-x: 1rem; } .mce-content-body .g-3, .mce-content-body .gy-3 { --bs-gutter-y: 1rem; } .mce-content-body .g-4, .mce-content-body .gx-4 { --bs-gutter-x: 1.5rem; } .mce-content-body .g-4, .mce-content-body .gy-4 { --bs-gutter-y: 1.5rem; } .mce-content-body .g-5, .mce-content-body .gx-5 { --bs-gutter-x: 3rem; } .mce-content-body .g-5, .mce-content-body .gy-5 { --bs-gutter-y: 3rem; } /* ========================================================= Bootstrap-Breakpoints im Editor emulieren --------------------------------------------------------- Media Queries messen im iframe die EDITOR-Breite, nicht die Fensterbreite. Deshalb blieb z. B. "col-12 col-md-4" im Editor bei 100 % (Karten untereinander), obwohl die Website 3 Spalten nebeneinander zeigt. Die Bootstrap-Stufen werden hier auf die schmalere Editorbreite umgerechnet (~0,7 x Fensterbreite): sm 576->400, md 768->540, lg 992->700, xl 1200->860, xxl 1400->1000. Aufsteigend notiert: die groesste passende Stufe gewinnt. Unter der kleinsten Stufe bleibt die Mobil-Darstellung. Fallback, falls diese Datei fehlt: cms_tinymce_grid_breakpoint_css() in admin/inc/cms_tinymce.inc. ========================================================= */ /* sm – Website ab 576px, Editor ab 400px */ @media (min-width: 400px) { .mce-content-body .col-sm { flex: 1 0 0% !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-sm-auto { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-sm-1 { flex: 0 0 auto !important; width: 8.333333% !important; max-width: 8.333333% !important; } .mce-content-body .col-sm-2 { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .col-sm-3 { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .col-sm-4 { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .col-sm-5 { flex: 0 0 auto !important; width: 41.666667% !important; max-width: 41.666667% !important; } .mce-content-body .col-sm-6 { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .col-sm-7 { flex: 0 0 auto !important; width: 58.333333% !important; max-width: 58.333333% !important; } .mce-content-body .col-sm-8 { flex: 0 0 auto !important; width: 66.666667% !important; max-width: 66.666667% !important; } .mce-content-body .col-sm-9 { flex: 0 0 auto !important; width: 75% !important; max-width: 75% !important; } .mce-content-body .col-sm-10 { flex: 0 0 auto !important; width: 83.333333% !important; max-width: 83.333333% !important; } .mce-content-body .col-sm-11 { flex: 0 0 auto !important; width: 91.666667% !important; max-width: 91.666667% !important; } .mce-content-body .col-sm-12 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-sm-1 > * { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-sm-2 > * { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .row-cols-sm-3 > * { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .row-cols-sm-4 > * { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .row-cols-sm-5 > * { flex: 0 0 auto !important; width: 20% !important; max-width: 20% !important; } .mce-content-body .row-cols-sm-6 > * { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .row-cols-sm-auto > * { flex: 0 0 auto !important; width: auto !important; } .mce-content-body .offset-sm-0 { margin-left: 0 !important; } .mce-content-body .offset-sm-1 { margin-left: 8.333333% !important; } .mce-content-body .offset-sm-2 { margin-left: 16.666667% !important; } .mce-content-body .offset-sm-3 { margin-left: 25% !important; } .mce-content-body .offset-sm-4 { margin-left: 33.333333% !important; } .mce-content-body .offset-sm-5 { margin-left: 41.666667% !important; } .mce-content-body .offset-sm-6 { margin-left: 50% !important; } .mce-content-body .offset-sm-7 { margin-left: 58.333333% !important; } .mce-content-body .offset-sm-8 { margin-left: 66.666667% !important; } .mce-content-body .offset-sm-9 { margin-left: 75% !important; } .mce-content-body .offset-sm-10 { margin-left: 83.333333% !important; } .mce-content-body .offset-sm-11 { margin-left: 91.666667% !important; } .mce-content-body .d-sm-none { display: none !important; } .mce-content-body .d-sm-inline { display: inline !important; } .mce-content-body .d-sm-inline-block { display: inline-block !important; } .mce-content-body .d-sm-block { display: block !important; } .mce-content-body .d-sm-grid { display: grid !important; } .mce-content-body .d-sm-inline-grid { display: inline-grid !important; } .mce-content-body .d-sm-table { display: table !important; } .mce-content-body .d-sm-table-row { display: table-row !important; } .mce-content-body .d-sm-table-cell { display: table-cell !important; } .mce-content-body .d-sm-flex { display: flex !important; } .mce-content-body .d-sm-inline-flex { display: inline-flex !important; } .mce-content-body .flex-sm-row { flex-direction: row !important; } .mce-content-body .flex-sm-row-reverse { flex-direction: row-reverse !important; } .mce-content-body .flex-sm-column { flex-direction: column !important; } .mce-content-body .flex-sm-column-reverse { flex-direction: column-reverse !important; } .mce-content-body .flex-sm-wrap { flex-wrap: wrap !important; } .mce-content-body .flex-sm-nowrap { flex-wrap: nowrap !important; } .mce-content-body .flex-sm-wrap-reverse { flex-wrap: wrap-reverse !important; } .mce-content-body .text-sm-start { text-align: left !important; } .mce-content-body .text-sm-center { text-align: center !important; } .mce-content-body .text-sm-end { text-align: right !important; } } /* md – Website ab 768px, Editor ab 540px */ @media (min-width: 540px) { .mce-content-body .col-md { flex: 1 0 0% !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-md-auto { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-md-1 { flex: 0 0 auto !important; width: 8.333333% !important; max-width: 8.333333% !important; } .mce-content-body .col-md-2 { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .col-md-3 { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .col-md-4 { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .col-md-5 { flex: 0 0 auto !important; width: 41.666667% !important; max-width: 41.666667% !important; } .mce-content-body .col-md-6 { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .col-md-7 { flex: 0 0 auto !important; width: 58.333333% !important; max-width: 58.333333% !important; } .mce-content-body .col-md-8 { flex: 0 0 auto !important; width: 66.666667% !important; max-width: 66.666667% !important; } .mce-content-body .col-md-9 { flex: 0 0 auto !important; width: 75% !important; max-width: 75% !important; } .mce-content-body .col-md-10 { flex: 0 0 auto !important; width: 83.333333% !important; max-width: 83.333333% !important; } .mce-content-body .col-md-11 { flex: 0 0 auto !important; width: 91.666667% !important; max-width: 91.666667% !important; } .mce-content-body .col-md-12 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-md-1 > * { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-md-2 > * { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .row-cols-md-3 > * { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .row-cols-md-4 > * { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .row-cols-md-5 > * { flex: 0 0 auto !important; width: 20% !important; max-width: 20% !important; } .mce-content-body .row-cols-md-6 > * { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .row-cols-md-auto > * { flex: 0 0 auto !important; width: auto !important; } .mce-content-body .offset-md-0 { margin-left: 0 !important; } .mce-content-body .offset-md-1 { margin-left: 8.333333% !important; } .mce-content-body .offset-md-2 { margin-left: 16.666667% !important; } .mce-content-body .offset-md-3 { margin-left: 25% !important; } .mce-content-body .offset-md-4 { margin-left: 33.333333% !important; } .mce-content-body .offset-md-5 { margin-left: 41.666667% !important; } .mce-content-body .offset-md-6 { margin-left: 50% !important; } .mce-content-body .offset-md-7 { margin-left: 58.333333% !important; } .mce-content-body .offset-md-8 { margin-left: 66.666667% !important; } .mce-content-body .offset-md-9 { margin-left: 75% !important; } .mce-content-body .offset-md-10 { margin-left: 83.333333% !important; } .mce-content-body .offset-md-11 { margin-left: 91.666667% !important; } .mce-content-body .d-md-none { display: none !important; } .mce-content-body .d-md-inline { display: inline !important; } .mce-content-body .d-md-inline-block { display: inline-block !important; } .mce-content-body .d-md-block { display: block !important; } .mce-content-body .d-md-grid { display: grid !important; } .mce-content-body .d-md-inline-grid { display: inline-grid !important; } .mce-content-body .d-md-table { display: table !important; } .mce-content-body .d-md-table-row { display: table-row !important; } .mce-content-body .d-md-table-cell { display: table-cell !important; } .mce-content-body .d-md-flex { display: flex !important; } .mce-content-body .d-md-inline-flex { display: inline-flex !important; } .mce-content-body .flex-md-row { flex-direction: row !important; } .mce-content-body .flex-md-row-reverse { flex-direction: row-reverse !important; } .mce-content-body .flex-md-column { flex-direction: column !important; } .mce-content-body .flex-md-column-reverse { flex-direction: column-reverse !important; } .mce-content-body .flex-md-wrap { flex-wrap: wrap !important; } .mce-content-body .flex-md-nowrap { flex-wrap: nowrap !important; } .mce-content-body .flex-md-wrap-reverse { flex-wrap: wrap-reverse !important; } .mce-content-body .text-md-start { text-align: left !important; } .mce-content-body .text-md-center { text-align: center !important; } .mce-content-body .text-md-end { text-align: right !important; } } /* lg – Website ab 992px, Editor ab 700px */ @media (min-width: 700px) { .mce-content-body .col-lg { flex: 1 0 0% !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-lg-auto { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-lg-1 { flex: 0 0 auto !important; width: 8.333333% !important; max-width: 8.333333% !important; } .mce-content-body .col-lg-2 { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .col-lg-3 { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .col-lg-4 { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .col-lg-5 { flex: 0 0 auto !important; width: 41.666667% !important; max-width: 41.666667% !important; } .mce-content-body .col-lg-6 { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .col-lg-7 { flex: 0 0 auto !important; width: 58.333333% !important; max-width: 58.333333% !important; } .mce-content-body .col-lg-8 { flex: 0 0 auto !important; width: 66.666667% !important; max-width: 66.666667% !important; } .mce-content-body .col-lg-9 { flex: 0 0 auto !important; width: 75% !important; max-width: 75% !important; } .mce-content-body .col-lg-10 { flex: 0 0 auto !important; width: 83.333333% !important; max-width: 83.333333% !important; } .mce-content-body .col-lg-11 { flex: 0 0 auto !important; width: 91.666667% !important; max-width: 91.666667% !important; } .mce-content-body .col-lg-12 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-lg-1 > * { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-lg-2 > * { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .row-cols-lg-3 > * { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .row-cols-lg-4 > * { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .row-cols-lg-5 > * { flex: 0 0 auto !important; width: 20% !important; max-width: 20% !important; } .mce-content-body .row-cols-lg-6 > * { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .row-cols-lg-auto > * { flex: 0 0 auto !important; width: auto !important; } .mce-content-body .offset-lg-0 { margin-left: 0 !important; } .mce-content-body .offset-lg-1 { margin-left: 8.333333% !important; } .mce-content-body .offset-lg-2 { margin-left: 16.666667% !important; } .mce-content-body .offset-lg-3 { margin-left: 25% !important; } .mce-content-body .offset-lg-4 { margin-left: 33.333333% !important; } .mce-content-body .offset-lg-5 { margin-left: 41.666667% !important; } .mce-content-body .offset-lg-6 { margin-left: 50% !important; } .mce-content-body .offset-lg-7 { margin-left: 58.333333% !important; } .mce-content-body .offset-lg-8 { margin-left: 66.666667% !important; } .mce-content-body .offset-lg-9 { margin-left: 75% !important; } .mce-content-body .offset-lg-10 { margin-left: 83.333333% !important; } .mce-content-body .offset-lg-11 { margin-left: 91.666667% !important; } .mce-content-body .d-lg-none { display: none !important; } .mce-content-body .d-lg-inline { display: inline !important; } .mce-content-body .d-lg-inline-block { display: inline-block !important; } .mce-content-body .d-lg-block { display: block !important; } .mce-content-body .d-lg-grid { display: grid !important; } .mce-content-body .d-lg-inline-grid { display: inline-grid !important; } .mce-content-body .d-lg-table { display: table !important; } .mce-content-body .d-lg-table-row { display: table-row !important; } .mce-content-body .d-lg-table-cell { display: table-cell !important; } .mce-content-body .d-lg-flex { display: flex !important; } .mce-content-body .d-lg-inline-flex { display: inline-flex !important; } .mce-content-body .flex-lg-row { flex-direction: row !important; } .mce-content-body .flex-lg-row-reverse { flex-direction: row-reverse !important; } .mce-content-body .flex-lg-column { flex-direction: column !important; } .mce-content-body .flex-lg-column-reverse { flex-direction: column-reverse !important; } .mce-content-body .flex-lg-wrap { flex-wrap: wrap !important; } .mce-content-body .flex-lg-nowrap { flex-wrap: nowrap !important; } .mce-content-body .flex-lg-wrap-reverse { flex-wrap: wrap-reverse !important; } .mce-content-body .text-lg-start { text-align: left !important; } .mce-content-body .text-lg-center { text-align: center !important; } .mce-content-body .text-lg-end { text-align: right !important; } } /* xl – Website ab 1200px, Editor ab 860px */ @media (min-width: 860px) { .mce-content-body .col-xl { flex: 1 0 0% !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-xl-auto { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-xl-1 { flex: 0 0 auto !important; width: 8.333333% !important; max-width: 8.333333% !important; } .mce-content-body .col-xl-2 { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .col-xl-3 { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .col-xl-4 { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .col-xl-5 { flex: 0 0 auto !important; width: 41.666667% !important; max-width: 41.666667% !important; } .mce-content-body .col-xl-6 { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .col-xl-7 { flex: 0 0 auto !important; width: 58.333333% !important; max-width: 58.333333% !important; } .mce-content-body .col-xl-8 { flex: 0 0 auto !important; width: 66.666667% !important; max-width: 66.666667% !important; } .mce-content-body .col-xl-9 { flex: 0 0 auto !important; width: 75% !important; max-width: 75% !important; } .mce-content-body .col-xl-10 { flex: 0 0 auto !important; width: 83.333333% !important; max-width: 83.333333% !important; } .mce-content-body .col-xl-11 { flex: 0 0 auto !important; width: 91.666667% !important; max-width: 91.666667% !important; } .mce-content-body .col-xl-12 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-xl-1 > * { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-xl-2 > * { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .row-cols-xl-3 > * { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .row-cols-xl-4 > * { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .row-cols-xl-5 > * { flex: 0 0 auto !important; width: 20% !important; max-width: 20% !important; } .mce-content-body .row-cols-xl-6 > * { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .row-cols-xl-auto > * { flex: 0 0 auto !important; width: auto !important; } .mce-content-body .offset-xl-0 { margin-left: 0 !important; } .mce-content-body .offset-xl-1 { margin-left: 8.333333% !important; } .mce-content-body .offset-xl-2 { margin-left: 16.666667% !important; } .mce-content-body .offset-xl-3 { margin-left: 25% !important; } .mce-content-body .offset-xl-4 { margin-left: 33.333333% !important; } .mce-content-body .offset-xl-5 { margin-left: 41.666667% !important; } .mce-content-body .offset-xl-6 { margin-left: 50% !important; } .mce-content-body .offset-xl-7 { margin-left: 58.333333% !important; } .mce-content-body .offset-xl-8 { margin-left: 66.666667% !important; } .mce-content-body .offset-xl-9 { margin-left: 75% !important; } .mce-content-body .offset-xl-10 { margin-left: 83.333333% !important; } .mce-content-body .offset-xl-11 { margin-left: 91.666667% !important; } .mce-content-body .d-xl-none { display: none !important; } .mce-content-body .d-xl-inline { display: inline !important; } .mce-content-body .d-xl-inline-block { display: inline-block !important; } .mce-content-body .d-xl-block { display: block !important; } .mce-content-body .d-xl-grid { display: grid !important; } .mce-content-body .d-xl-inline-grid { display: inline-grid !important; } .mce-content-body .d-xl-table { display: table !important; } .mce-content-body .d-xl-table-row { display: table-row !important; } .mce-content-body .d-xl-table-cell { display: table-cell !important; } .mce-content-body .d-xl-flex { display: flex !important; } .mce-content-body .d-xl-inline-flex { display: inline-flex !important; } .mce-content-body .flex-xl-row { flex-direction: row !important; } .mce-content-body .flex-xl-row-reverse { flex-direction: row-reverse !important; } .mce-content-body .flex-xl-column { flex-direction: column !important; } .mce-content-body .flex-xl-column-reverse { flex-direction: column-reverse !important; } .mce-content-body .flex-xl-wrap { flex-wrap: wrap !important; } .mce-content-body .flex-xl-nowrap { flex-wrap: nowrap !important; } .mce-content-body .flex-xl-wrap-reverse { flex-wrap: wrap-reverse !important; } .mce-content-body .text-xl-start { text-align: left !important; } .mce-content-body .text-xl-center { text-align: center !important; } .mce-content-body .text-xl-end { text-align: right !important; } } /* xxl – Website ab 1400px, Editor ab 1000px */ @media (min-width: 1000px) { .mce-content-body .col-xxl { flex: 1 0 0% !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-xxl-auto { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; } .mce-content-body .col-xxl-1 { flex: 0 0 auto !important; width: 8.333333% !important; max-width: 8.333333% !important; } .mce-content-body .col-xxl-2 { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .col-xxl-3 { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .col-xxl-4 { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .col-xxl-5 { flex: 0 0 auto !important; width: 41.666667% !important; max-width: 41.666667% !important; } .mce-content-body .col-xxl-6 { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .col-xxl-7 { flex: 0 0 auto !important; width: 58.333333% !important; max-width: 58.333333% !important; } .mce-content-body .col-xxl-8 { flex: 0 0 auto !important; width: 66.666667% !important; max-width: 66.666667% !important; } .mce-content-body .col-xxl-9 { flex: 0 0 auto !important; width: 75% !important; max-width: 75% !important; } .mce-content-body .col-xxl-10 { flex: 0 0 auto !important; width: 83.333333% !important; max-width: 83.333333% !important; } .mce-content-body .col-xxl-11 { flex: 0 0 auto !important; width: 91.666667% !important; max-width: 91.666667% !important; } .mce-content-body .col-xxl-12 { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-xxl-1 > * { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .mce-content-body .row-cols-xxl-2 > * { flex: 0 0 auto !important; width: 50% !important; max-width: 50% !important; } .mce-content-body .row-cols-xxl-3 > * { flex: 0 0 auto !important; width: 33.333333% !important; max-width: 33.333333% !important; } .mce-content-body .row-cols-xxl-4 > * { flex: 0 0 auto !important; width: 25% !important; max-width: 25% !important; } .mce-content-body .row-cols-xxl-5 > * { flex: 0 0 auto !important; width: 20% !important; max-width: 20% !important; } .mce-content-body .row-cols-xxl-6 > * { flex: 0 0 auto !important; width: 16.666667% !important; max-width: 16.666667% !important; } .mce-content-body .row-cols-xxl-auto > * { flex: 0 0 auto !important; width: auto !important; } .mce-content-body .offset-xxl-0 { margin-left: 0 !important; } .mce-content-body .offset-xxl-1 { margin-left: 8.333333% !important; } .mce-content-body .offset-xxl-2 { margin-left: 16.666667% !important; } .mce-content-body .offset-xxl-3 { margin-left: 25% !important; } .mce-content-body .offset-xxl-4 { margin-left: 33.333333% !important; } .mce-content-body .offset-xxl-5 { margin-left: 41.666667% !important; } .mce-content-body .offset-xxl-6 { margin-left: 50% !important; } .mce-content-body .offset-xxl-7 { margin-left: 58.333333% !important; } .mce-content-body .offset-xxl-8 { margin-left: 66.666667% !important; } .mce-content-body .offset-xxl-9 { margin-left: 75% !important; } .mce-content-body .offset-xxl-10 { margin-left: 83.333333% !important; } .mce-content-body .offset-xxl-11 { margin-left: 91.666667% !important; } .mce-content-body .d-xxl-none { display: none !important; } .mce-content-body .d-xxl-inline { display: inline !important; } .mce-content-body .d-xxl-inline-block { display: inline-block !important; } .mce-content-body .d-xxl-block { display: block !important; } .mce-content-body .d-xxl-grid { display: grid !important; } .mce-content-body .d-xxl-inline-grid { display: inline-grid !important; } .mce-content-body .d-xxl-table { display: table !important; } .mce-content-body .d-xxl-table-row { display: table-row !important; } .mce-content-body .d-xxl-table-cell { display: table-cell !important; } .mce-content-body .d-xxl-flex { display: flex !important; } .mce-content-body .d-xxl-inline-flex { display: inline-flex !important; } .mce-content-body .flex-xxl-row { flex-direction: row !important; } .mce-content-body .flex-xxl-row-reverse { flex-direction: row-reverse !important; } .mce-content-body .flex-xxl-column { flex-direction: column !important; } .mce-content-body .flex-xxl-column-reverse { flex-direction: column-reverse !important; } .mce-content-body .flex-xxl-wrap { flex-wrap: wrap !important; } .mce-content-body .flex-xxl-nowrap { flex-wrap: nowrap !important; } .mce-content-body .flex-xxl-wrap-reverse { flex-wrap: wrap-reverse !important; } .mce-content-body .text-xxl-start { text-align: left !important; } .mce-content-body .text-xxl-center { text-align: center !important; } .mce-content-body .text-xxl-end { text-align: right !important; } } /* ========================================================= .container-Stufen mitremappen --------------------------------------------------------- Ohne das behielt .container die Original-Bootstrap-Stufen (576->540, 768->720, 992->960, 1200->1140, 1400->1320), waehrend die Spalten schon auf die Editorbreite umgerechnet waren. Folge: der Inhalt wurde im Editor auf z. B. 540px zusammengezogen, daneben blieb grosser Weissraum und die Karten wirkten viel schmaler als auf der Website. Die Live-Breite bleibt erhalten, nur die Stufe wandert auf die Editorbreite. Der Anteil von 94% deckelt zusaetzlich, damit im schmalen Editor ein Seitenrand wie live bleibt und der Inhalt nicht randlos klebt. Die erste Zeile ist der Fallback fuer Browser ohne min(). ========================================================= */ /* Die Pixelwerte stehen im Core in admin/inc/cms_container_widths.inc und kommen als --cms-container-* in den Editor. Die Zahlen hier sind nur der Fallback, falls die Variablen fehlen. Nicht auseinanderlaufen lassen. */ :root { --cms-container-sm: 560px; --cms-container-md: 736px; --cms-container-lg: 976px; --cms-container-xl: 1200px; --cms-container-xxl: 1440px; } /* sm – Website ab 576px, Editor ab 400px */ @media (min-width: 400px) { .mce-content-body .container, .mce-content-body .container-sm { max-width: 560px !important; max-width: min(var(--cms-container-sm, 560px), 94%) !important; } } /* md – Website ab 768px, Editor ab 540px */ @media (min-width: 540px) { .mce-content-body .container, .mce-content-body .container-sm, .mce-content-body .container-md { max-width: 736px !important; max-width: min(var(--cms-container-md, 736px), 94%) !important; } } /* lg – Website ab 992px, Editor ab 700px */ @media (min-width: 700px) { .mce-content-body .container, .mce-content-body .container-sm, .mce-content-body .container-md, .mce-content-body .container-lg { max-width: 976px !important; max-width: min(var(--cms-container-lg, 976px), 94%) !important; } } /* xl – Website ab 1200px, Editor ab 860px */ @media (min-width: 860px) { .mce-content-body .container, .mce-content-body .container-sm, .mce-content-body .container-md, .mce-content-body .container-lg, .mce-content-body .container-xl { max-width: 1200px !important; max-width: min(var(--cms-container-xl, 1200px), 94%) !important; } } /* xxl – Website ab 1400px, Editor ab 1000px */ @media (min-width: 1000px) { .mce-content-body .container, .mce-content-body .container-sm, .mce-content-body .container-md, .mce-content-body .container-lg, .mce-content-body .container-xl, .mce-content-body .container-xxl { max-width: 1440px !important; max-width: min(var(--cms-container-xxl, 1440px), 94%) !important; } }