/* * Rankingmax: Layout aller Patterns, von Grund auf nach den Stitch-Entwürfen. * Tokens stehen in theme.json. Nur Sofia Sans. Radien nur 6, 20, 28, 32, 40 px, Pille, Kreis. * Rot nur für Anfrage-Aktionen, Eyebrow-Balken und den geöffneten FAQ-Kreis. * Schatten nur auf schwebenden und hervorgehobenen Elementen. */ :root { --c-canvas: var(--wp--preset--color--canvas); --c-lifted: var(--wp--preset--color--lifted); --c-white: var(--wp--preset--color--surface); --c-ghost: var(--wp--preset--color--ghost); --c-ink: var(--wp--preset--color--ink); --c-anthracite: var(--wp--preset--color--anthracite); --c-elevated: var(--wp--preset--color--dark-elevated); --c-body: var(--wp--preset--color--body); --c-mute: var(--wp--preset--color--mute); --c-line: var(--wp--preset--color--line); --c-line-strong: var(--wp--preset--color--line-strong); --c-red: var(--wp--preset--color--red); --c-red-600: var(--wp--preset--color--red-600); --c-red-700: var(--wp--preset--color--red-700); --c-red-400: var(--wp--preset--color--red-400); --c-on-dark: var(--wp--preset--color--on-dark); --c-on-dark-mute: var(--wp--preset--color--on-dark-mute); --c-line-dark: rgba(255, 255, 255, 0.14); --r-xs: 6px; --r-button: 20px; --r-lg: 28px; --r-card: 32px; --r-stage: 40px; --r-pill: 999px; --shadow-float: var(--wp--custom--shadow--float); --shadow-lift: var(--wp--custom--shadow--lift); --gutter: clamp(1.25rem, 0.75rem + 2vw, 3rem); --section: clamp(3.5rem, 2rem + 6vw, 7rem); --gap: 1.5rem; --head-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); --rm-kopf-abstand: clamp(2rem, 1rem + 3vw, 3.5rem); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --arrow-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E"); --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* ------------------------------------------------------------------ Grundlagen */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 7rem; -webkit-text-size-adjust: 100%; } body { margin: 0; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wp-site-blocks { display: flow-root; } .wp-site-blocks > * { margin-block: 0; } .rm-main, .wp-block-post-content, .rm-page-content { margin: 0; max-width: none; } :where(.rm-main) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote) { margin: 0; } h1, h2 { text-wrap: balance; } h1, h2, h3, .rm-titel, .rm-kpi__wert, .rm-fakt__wert, .rm-kachel__wert { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 18 6 6; } img, svg, video { max-width: 100%; } a { text-underline-offset: 0.16em; text-decoration-thickness: 1px; } :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; } .rm-s { width: 100%; max-width: none; margin: 0; padding-block: var(--section); background: var(--c-canvas); } .rm-s--lifted { background: var(--c-lifted); } .rm-s--join { padding-top: 0; } .rm-s:has(+ .rm-s--join) { padding-bottom: var(--head-gap); } .rm-wrap { width: 100%; max-width: calc(80rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .rm-wrap > * + * { margin-top: var(--head-gap); } /* Fließtext in Sektionen */ :where(.rm-main) :where(p + p, p + ul, p + ol, ul + p, ol + p, p + .wp-block-table, .wp-block-table + p) { margin-top: 1rem; } :where(.rm-main) :where(p, ul, ol) + :where(h2, h3, h4, h5) { margin-top: 2rem; } :where(.rm-main) :where(h2, h3, h4, h5, .rm-titel) + :where(p, ul, ol) { margin-top: 0.75rem; } .rm-main code { font-family: inherit; font-size: 0.95em; font-weight: 500; color: var(--c-ink); } .rm-main strong, .rm-main b { color: var(--c-ink); font-weight: 700; } .rm-main li > ul, .rm-main li > ol { margin-top: 0.5rem; } .rm-main a:not(.wp-element-button) { color: inherit; } .rm-titel { color: var(--c-ink); font-size: var(--wp--preset--font-size--title-lg); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .rm-lead, .rm-lead p { color: var(--c-body); font-size: var(--wp--preset--font-size--lead); font-weight: 450; line-height: 1.5; text-wrap: pretty; } .rm-hinweis { color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); line-height: 1.4; } /* Eyebrow mit drei steigenden Balken */ .rm-eyebrow { display: flex; align-items: center; gap: 0.625rem; color: var(--c-ink); font-size: var(--wp--preset--font-size--label-caps); font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; } .rm-eyebrow::before { content: ""; flex: 0 0 13px; width: 13px; height: 12px; background: linear-gradient(var(--c-red), var(--c-red)) 0 100% / 3px 5px no-repeat, linear-gradient(var(--c-red), var(--c-red)) 5px 100% / 3px 8px no-repeat, linear-gradient(var(--c-red), var(--c-red)) 10px 100% / 3px 12px no-repeat; } .rm-eyebrow + :is(h1, h2, h3, .rm-titel) { margin-top: 1rem; } /* Buttons */ .rm-main .wp-block-buttons, .wp-block-buttons.rm-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; } .wp-block-button { margin: 0; } .wp-block-button .wp-block-button__link.wp-element-button, .wp-element-button.rm-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 46px; padding: 0.625rem 1.5rem; border: 0; border-radius: var(--r-button); background: var(--c-ink); color: var(--c-canvas); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease; } .wp-block-button .wp-block-button__link.wp-element-button:hover { background: #000; color: var(--c-canvas); } .wp-block-button.is-style-rm-anfrage .wp-block-button__link.wp-element-button, .wp-element-button.rm-submit { background: var(--c-red); color: #fff; } .wp-block-button.is-style-rm-anfrage .wp-block-button__link.wp-element-button:hover, .wp-element-button.rm-submit:hover { background: var(--c-red-600); color: #fff; } .wp-block-button.is-style-rm-anfrage .wp-block-button__link.wp-element-button:active, .wp-element-button.rm-submit:active { background: var(--c-red-700); transform: translateY(1px); } .wp-block-button.is-style-rm-outline .wp-block-button__link.wp-element-button { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-ink); color: var(--c-ink); } .wp-block-button.is-style-rm-outline .wp-block-button__link.wp-element-button:hover { background: var(--c-ink); color: var(--c-canvas); } .rm-btns--gross .wp-block-button .wp-block-button__link.wp-element-button { min-height: 56px; padding: 0.875rem 2rem; border-radius: var(--r-lg); font-size: 1.0625rem; } .rm-p-text .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-p-bild-text .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-p-hero-form .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-p-banner .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-p-formular .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-p-ablauf .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-p-vergleich .wp-block-button:not(.rm-ohne-pfeil) .wp-block-button__link::after, .rm-submit::after { content: ""; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; } .rm-btns { margin-top: 1.75rem; } .rm-kopf__r .rm-btns { margin-top: 1.5rem; } /* Listen */ .rm-checks, .rm-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; } .rm-checks > li { position: relative; padding-left: 2.25rem; color: var(--c-ink); line-height: 1.45; } .rm-checks > li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border: 1px solid var(--c-line); border-radius: 50%; background: #fff; } .rm-checks > li::after { content: ""; position: absolute; left: 0.375rem; top: 0.375rem; width: 0.75rem; height: 0.75rem; background: var(--c-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; } .rm-liste { display: block; padding-left: 1.25rem; list-style: disc; } ol.rm-liste { list-style: decimal; } .rm-liste > li { padding-left: 0.25rem; } .rm-liste > li + li { margin-top: 0.5rem; } .rm-liste > li::marker { color: var(--c-ink); } :where(.rm-main) * + .rm-checks { margin-top: 1.5rem; } .rm-iconliste > li { padding-left: 2.25rem; } .rm-iconliste > li::before, .rm-iconliste > li::after { display: none; } .rm-li-ic { position: absolute; left: 0; top: 0.125rem; display: inline-flex; width: 1.25rem; height: 1.25rem; color: var(--c-ink); } .rm-li-ic svg { width: 100%; height: 100%; } /* Bilder im festen Rahmen */ .rm-bild { display: block; width: 100%; margin: 0; } .rm-bild img, .rm-bild > a > img { display: block; width: 100%; height: auto; border-radius: var(--r-card); background: var(--c-ghost); object-fit: cover; object-position: center; } .rm-bild > a { display: block; } .rm-bild--16x9 img { aspect-ratio: 16 / 9; } .rm-bild--3x2 img { aspect-ratio: 3 / 2; } .rm-bild--4x3 img { aspect-ratio: 4 / 3; } .rm-bild--1x1 img { aspect-ratio: 1; } .rm-bild--3x4 img { aspect-ratio: 3 / 4; } .rm-bild--contain img { padding: 0.75rem; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); object-fit: contain; } .rm-bild--extrem img { padding: 0; background: transparent; box-shadow: none; } .rm-bild--logo { width: auto; } .wp-block-image.rm-bild--logo img { width: 9rem; max-width: none; height: auto; padding: 0; border-radius: 0; background: transparent; box-shadow: none; aspect-ratio: auto; object-fit: contain; } .rm-bild--kopf { width: 6rem; flex: 0 0 6rem; } .rm-bild--kopf img { aspect-ratio: 1; border-radius: 50%; padding: 0; background: var(--c-ghost); box-shadow: none; object-fit: cover; } .rm-bild .wp-element-caption { margin-top: 0.5rem; color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); } /* Raster */ .rm-raster { display: grid; gap: var(--gap); align-items: stretch; } .rm-raster--1 { grid-template-columns: minmax(0, 1fr); } .rm-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rm-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rm-raster__fuss { margin-top: 2rem !important; } .rm-raster__notiz, .rm-tabelle__notiz { max-width: 65ch; margin-top: 1.5rem !important; color: var(--c-body); } .rm-vortext { max-width: 72ch; } .rm-nach { max-width: 72ch; } .rm-p-hero .rm-nach { max-width: none; } /* Sektionskopf: Variante 1 unten bündig, 2 oben bündig, 3 gestapelt */ .rm-kopf { display: grid; gap: 1.25rem 4rem; } .rm-kopf--bottom, .rm-kopf--top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } .rm-kopf--top { align-items: start; } .rm-kopf--stack { display: block; max-width: 58rem; } .rm-kopf--stack .rm-lead { margin-top: 1rem; max-width: 65ch; } .rm-kopf .rm-titel { font-size: var(--wp--preset--font-size--headline-lg); line-height: 1.1; } .rm-kopf__r .rm-lead + .rm-lead { margin-top: 0.75rem; } /* 11 Hero */ .rm-p-hero { padding-top: var(--rm-kopf-abstand); } /* Abstand Header zum ersten Element der Seite: überall gleich (Referenz /blog/), Beitragskopf mit Breadcrumb hat eigene Regel */ .rm-main > .rm-s:first-child:not(.rm-beitrag-kopf), .rm-page-content > .rm-s:first-child:not(.rm-beitrag-kopf) { padding-top: var(--rm-kopf-abstand); } .rm-hero__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: start; } .rm-hero__solo { max-width: 58rem; } .rm-hero__r { padding-top: 1.875rem; } .rm-hero__r .rm-btns { margin-top: 1.75rem; } .rm-hero__r > p + p { margin-top: 0.75rem; } .rm-p-hero h1 { font-size: var(--wp--preset--font-size--display); line-height: 1; } .rm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; margin: 0; padding: 0; list-style: none; } .rm-wrap > .rm-chips { margin-top: 1.75rem; } .rm-chips > li { display: inline-flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 1rem 0.5rem 0.75rem; border: 1px solid var(--c-line); border-radius: var(--r-button); background: #fff; color: var(--c-ink); font-size: var(--wp--preset--font-size--label-md); font-weight: 500; line-height: 1.35; } .rm-chips > li::before { content: ""; flex: 0 0 0.875rem; width: 0.875rem; height: 0.875rem; margin-top: 0.125rem; background: var(--c-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; } .rm-stage img { border-radius: var(--r-stage); box-shadow: var(--shadow-lift); } .rm-wrap > .rm-stage { margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); } .rm-hero__seite { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 4rem; align-items: center; } /* Über uns: Text oben bündig zum Bild (Breadcrumb zu Eyebrow 20 px), nur Seite 146 */ body.page-id-146 .rm-hero__seite { align-items: start; } .rm-hero__text .rm-eyebrow + h1 { margin-top: 1rem; } .rm-hero__text h1 + p { margin-top: 1.5rem; } /* H1 ohne Wortbruch (04.11.2026): Seiten, auf denen das längste H1-Wort breiter als die Textspalte ist. Die Schrift wird nur dort auf Spaltenbreite / Wortlänge (em) begrenzt, sonst gilt --display. */ body:is(.page-id-3508, .page-id-146, .page-id-4792, .page-id-287, .postid-13220, .postid-11736) :is(.rm-hero__text, .rm-hero__l, .rm-beitrag-kopf .rm-wrap, .rm-s > .rm-wrap:has(> h1)) { container-type: inline-size; } body:is(.page-id-3508, .page-id-146, .page-id-4792, .page-id-287, .postid-13220, .postid-11736) :is(.rm-hero__text, .rm-hero__l, .rm-wrap) h1 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; font-size: min(var(--wp--preset--font-size--display), calc(100cqw / var(--rm-h1-wort, 12.2))); } body:is(.page-id-3508, .page-id-146) { --rm-h1-wort: 12.2; } body.page-id-4792 { --rm-h1-wort: 11; } body:is(.page-id-287, .postid-11736) { --rm-h1-wort: 8.7; } body.postid-13220 { --rm-h1-wort: 12; } .rm-hero__text .rm-chips { margin-top: 1.75rem; } .rm-hero__bild .rm-bild img { border-radius: var(--r-stage); box-shadow: var(--shadow-lift); } .rm-breadcrumb { margin-bottom: 1.25rem; color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); } .rm-breadcrumb a { color: var(--c-mute); } .rm-wrap > .rm-breadcrumb + * { margin-top: 1.25rem; } /* 4 Hero mit Formular, 13 Formularsektion */ .rm-hf, .rm-fs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2.5rem 4rem; align-items: start; } .rm-hf__text h1 { font-size: var(--wp--preset--font-size--display); line-height: 1; } .rm-hf__text > * + * { margin-top: 1.5rem; } .rm-hf__text > .rm-eyebrow + h1 { margin-top: 1rem; } .rm-p-hero-form { padding-top: var(--rm-kopf-abstand); } .rm-fs { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .rm-fs__text > * + * { margin-top: 1.25rem; } .rm-fs__text > .rm-eyebrow + h2 { margin-top: 1rem; } .rm-formkarte { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-formkarte > * + * { margin-top: 1rem; } .rm-formkarte__titel { font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; } .rm-formkarte__text, .rm-formkarte > p:not(.rm-hinweis) { color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.5; } .rm-punkte { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); } .rm-punkte > li { position: relative; padding-left: 1.125rem; } .rm-punkte > li::before { content: ""; position: absolute; left: 0; top: 0.25rem; width: 0.75rem; height: 0.75rem; background: var(--c-ink); -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat; } .rm-kontakte { display: grid; gap: 0.625rem; } .rm-kontakt { position: relative; display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1.25rem 0.75rem 0.75rem; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; transition: border-color 150ms ease; } .rm-kontakt__ic { flex: 0 0 2.5rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-canvas); color: var(--c-ink); transition: background-color 150ms ease, color 150ms ease; } .rm-kontakt__ic svg { width: 1rem; height: 1rem; } .rm-kontakt__label { color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); line-height: 1.3; } .rm-kontakt__text { color: var(--c-ink); font-weight: 500; line-height: 1.3; margin-top: 0 !important; } .rm-kontakt__text a { text-decoration: none; } .rm-kontakt__text a:only-of-type::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } .rm-kontakt__text a:hover { color: inherit; } .rm-kontakt__text a:focus-visible { outline: 0; } .rm-kontakt:has(.rm-kontakt__text a:hover), .rm-kontakt:has(.rm-kontakt__text a:focus-visible) { border-color: var(--c-ink); } .rm-kontakt:has(.rm-kontakt__text a:hover) .rm-kontakt__ic, .rm-kontakt:has(.rm-kontakt__text a:focus-visible) .rm-kontakt__ic { background: var(--c-ink); color: var(--c-canvas); } .rm-kontakt:has(.rm-kontakt__text a:focus-visible) { outline: 2px solid var(--c-ink); outline-offset: 3px; } .rm-checks--linie { padding-top: 1.25rem; border-top: 1px solid var(--c-line); } .rm-fs__text .rm-checks--linie > li::before { border: 0; background: transparent; } /* Formularfelder */ .rm-form-el { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .rm-field { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; } .rm-field--half { grid-column: auto; } .rm-field > label, .rm-field > legend { display: block; margin-bottom: 0.375rem; padding: 0; color: var(--c-ink); font-size: var(--wp--preset--font-size--label-md); font-weight: 700; line-height: 1.3; } .rm-field input:not([type=checkbox]):not([type=radio]), .rm-field select, .rm-field textarea { display: block; width: 100%; min-height: 3.25rem; padding: 0.75rem 1.25rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: #fff; color: var(--c-ink); font: inherit; line-height: 1.3; } .rm-field textarea { min-height: 7.5rem; border-radius: var(--r-lg); resize: vertical; } .rm-field select { appearance: none; padding-right: 2.75rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222629' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 1rem no-repeat; } .rm-field input::placeholder, .rm-field textarea::placeholder { color: var(--c-mute); opacity: 1; } .rm-field input:hover, .rm-field select:hover, .rm-field textarea:hover { border-color: var(--c-ink); } .rm-field input:focus, .rm-field select:focus, .rm-field textarea:focus { outline: 2px solid var(--c-ink); outline-offset: 0; border-color: var(--c-ink); } .rm-check { display: flex; align-items: flex-start; gap: 0.625rem; color: var(--c-body); font-size: var(--wp--preset--font-size--label-md); line-height: 1.45; cursor: pointer; } .rm-check input { flex: 0 0 1.25rem; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--c-ink); border-radius: var(--r-xs); } .rm-field--radio .rm-check, .rm-field--checkbox .rm-check { padding-block: 0.25rem; font-size: var(--wp--preset--font-size--body-sm); } .rm-field--submit { margin-top: 0.25rem; } .rm-field--submit .rm-submit { width: 100%; min-height: 56px; border-radius: var(--r-lg); font-size: 1.0625rem; } .rm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .rm-form-status { margin-top: 1rem; padding: 0.875rem 1.25rem; border-radius: var(--r-button); font-size: var(--wp--preset--font-size--body-sm); } .rm-form-status.is-ok { background: var(--wp--preset--color--success-bg); color: var(--wp--preset--color--success); } .rm-form-status.is-err { background: var(--wp--preset--color--red-50); color: var(--c-red-700); } /* Seiten ohne Modell, zum Beispiel der Cookie-Hinweis */ .rm-page-content > :not(.rm-s):not(script):not(style) { max-width: calc(80rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .rm-page-content > :not(.rm-s) :is(p, ul, ol, h2, h3) { max-width: 72ch; } .rm-page-content > :not(.rm-s) * + :is(h2, h3) { margin-top: 2rem; } .rm-page-content > :not(.rm-s):first-child { margin-top: var(--head-gap); } .rm-page-content > :not(.rm-s):last-child { margin-bottom: var(--section); } /* 1 Fließtext */ .rm-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.75rem 4rem; align-items: start; } .rm-text__kopf { position: sticky; top: 7rem; } .rm-text__body { max-width: 68ch; } .rm-text__body > :first-child { margin-top: 0; } .rm-text__body > .rm-lead { font-size: var(--wp--preset--font-size--body-md); line-height: 1.55; } .rm-text__body > * + .wp-block-group, .rm-text__body > * + .rm-tabelle { margin-top: 1.5rem; } .rm-text__body--allein { max-width: 72ch; } /* Antwortblock */ .rm-antwort { max-width: 56rem; padding-left: clamp(1.25rem, 1rem + 1vw, 2rem); border-left: 3px solid var(--c-ink); } .rm-antwort__text { margin-top: 1rem !important; color: var(--c-ink); font-size: var(--wp--preset--font-size--lead); line-height: 1.5; } /* 2 Bild-Text-Reihe */ .rm-bt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; align-items: center; } .rm-bt--right .rm-bt__bild { order: 2; } .rm-bt:has(> .rm-bt__bild .rm-bild--kopf) { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1.5rem 2rem; } .rm-bt:has(> .rm-bt__bild .rm-bild--kopf) .rm-bt__bild { order: 0; } .rm-bt__bild .rm-bild img { border-radius: var(--r-stage); } .rm-bt__text > :first-child { margin-top: 0; } .rm-bt__text > .rm-eyebrow + h2 { margin-top: 1rem; } .rm-bt__text h2 + * { margin-top: 1.25rem; } .rm-medien, .rm-frei { width: 100%; } .rm-medien svg { display: block; width: 100%; height: auto; } /* 3 Tabelle */ .rm-tabelle__rahmen { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-button); background: #fff; } .rm-tabelle.wp-block-table, .rm-tabelle { margin: 0; overflow-x: auto; } .rm-main .rm-tabelle table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--wp--preset--font-size--body-sm); line-height: 1.5; } .rm-main .rm-tabelle :is(th, td) { padding: 1rem 1.25rem; border: 0; border-bottom: 1px solid var(--c-line); color: var(--c-body); font-weight: 450; text-align: left; vertical-align: top; } .rm-main .rm-tabelle thead { border: 0; } .rm-main .rm-tabelle thead th { background: var(--c-lifted); color: var(--c-ink); font-size: var(--wp--preset--font-size--body-md); font-weight: 500; } .rm-main .rm-tabelle thead th + th, .rm-main .rm-tabelle td + td { border-left: 1px solid var(--c-line); } .rm-main .rm-tabelle tbody tr:last-child td { border-bottom: 0; } .rm-main .rm-tabelle tbody td:first-child { color: var(--c-ink); font-weight: 500; } .rm-tabelle--vergleich tbody td:last-child, .rm-tabelle--vergleich thead th:last-child { background: var(--c-canvas); color: var(--c-ink); } .rm-text__body .rm-tabelle, .rm-bt__text .rm-tabelle, .rm-card .rm-tabelle { border: 1px solid var(--c-line); border-radius: var(--r-button); background: #fff; } /* 8 Karten */ .rm-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: clamp(1.5rem, 1.25rem + 0.6vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; } .rm-card > * + * { margin-top: 0.75rem; } .rm-card__bild { margin-bottom: 0.5rem; } .rm-card__bild img { border-radius: var(--r-button); } .rm-card__ic { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.75rem; border-radius: var(--r-button); background: var(--c-canvas); color: var(--c-ink); } .rm-card__ic svg, .rm-card__ic img { width: 1.25rem; height: 1.25rem; } .rm-card__ic + * { margin-top: 0.25rem; } .rm-card__nr, .rm-card__kicker { color: var(--c-mute); font-size: var(--wp--preset--font-size--label-caps); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .rm-card__titel { font-size: var(--wp--preset--font-size--title-md); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); } .rm-card__titel a { text-decoration: none; } .rm-raster--2 > .rm-card .rm-card__titel, .rm-raster--1 > .rm-card .rm-card__titel { font-size: var(--wp--preset--font-size--title-lg); } .rm-card p:not([class*=rm-]) { color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.55; } .rm-raster--2 > .rm-card p:not([class*=rm-]) { font-size: var(--wp--preset--font-size--body-md); } .rm-card .rm-checks { font-size: var(--wp--preset--font-size--body-sm); } .rm-card__fuss { margin-top: auto !important; padding-top: 1.25rem; } .rm-reihe-5-7 .rm-raster--2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .rm-miniperson { display: flex; align-items: flex-start; gap: 1.25rem; margin-top: 0.5rem !important; } .rm-miniperson__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 0.5rem; } .rm-miniperson__text > * { margin: 0 !important; } .rm-miniperson .rm-card__fuss { padding-top: 0.5rem; } .rm-card--link { padding-bottom: 4.75rem; transition: border-color 150ms ease, transform 200ms ease; } .rm-card--link .rm-card__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .rm-card--link::after { content: ""; position: absolute; left: clamp(1.5rem, 1.25rem + 0.6vw, 2rem); bottom: clamp(1.25rem, 1rem + 0.6vw, 1.75rem); width: 2.25rem; height: 2.25rem; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-ink) center / 1rem no-repeat; background-color: transparent; pointer-events: none; transition: background-color 150ms ease, border-color 150ms ease; } .rm-card--link::before { content: ""; position: absolute; z-index: 1; pointer-events: none; transition: background-color 150ms ease; left: calc(clamp(1.5rem, 1.25rem + 0.6vw, 2rem) + 0.625rem); bottom: calc(clamp(1.25rem, 1rem + 0.6vw, 1.75rem) + 0.625rem); width: 1rem; height: 1rem; background: var(--c-ink); -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; } .rm-card--link:hover { border-color: var(--c-ink); transform: translateY(-3px); } .rm-card--link:hover::after { border-color: var(--c-ink); background-color: var(--c-ink); } .rm-card--link:hover::before { background: var(--c-canvas); } .rm-card--link a:focus-visible { outline: 0; } .rm-card--link a:focus-visible::after { outline: 2px solid var(--c-ink); outline-offset: 2px; } /* Text neben Karten */ .rm-seite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: start; } .rm-seite__text > * + * { margin-top: 1rem; } .rm-seite__text .rm-btns { margin-top: 1.5rem; } .rm-seite__text > .rm-eyebrow + h2 { margin-top: 1rem; } .rm-seite__text { position: sticky; top: 7rem; } /* 9 Zeilen */ .rm-zeilen { display: grid; gap: 0.75rem; } .rm-zeilen--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-zeile { position: relative; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0.25rem 1.5rem; align-items: center; min-height: 4.5rem; padding: 1rem 1.5rem 1rem 2rem; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; } .rm-zeile--link { padding-right: 4.5rem; } .rm-zeile > * { margin-top: 0 !important; } .rm-zeile > .rm-card__ic { display: none; } .rm-zeile__titel { font-size: var(--wp--preset--font-size--title-md); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); } .rm-zeile__titel a { text-decoration: none; } .rm-zeile__text { color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.45; } .rm-zeilen--2 .rm-zeile { grid-template-columns: minmax(0, 1fr); padding: 1.25rem 4.5rem 1.25rem 1.5rem; border-radius: var(--r-lg); } .rm-zeile--link .rm-zeile__titel a::after, .rm-ziel--link .rm-zeile__titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .rm-zeile--link::after, .rm-ziel--link::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 2.5rem; height: 2.5rem; margin-top: -1.25rem; border-radius: 50%; background: var(--c-canvas); pointer-events: none; transition: background-color 150ms ease; } .rm-zeile--link::before, .rm-ziel--link::before { content: ""; position: absolute; z-index: 1; pointer-events: none; transition: background-color 150ms ease, transform 150ms ease; right: 1.75rem; top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; background: var(--c-ink); -webkit-mask: var(--arrow-diag) center / contain no-repeat; mask: var(--arrow-diag) center / contain no-repeat; } .rm-zeile--link:hover, .rm-ziel--link:hover { border-color: var(--c-ink); } .rm-zeile--link:hover::after, .rm-ziel--link:hover::after { background: var(--c-ink); } .rm-zeile--link:hover::before, .rm-ziel--link:hover::before { background: var(--c-canvas); transform: rotate(45deg); } /* 10 FAQ */ .rm-faq-seite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: start; } .rm-faq__kopf { position: sticky; top: 7rem; } .rm-faq__kopf > * + * { margin-top: 1rem; } .rm-faq { display: grid; gap: 0.625rem; } .rm-faq .wp-block-details { margin: 0; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; } .rm-faq .wp-block-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; padding: 0.875rem 1rem 0.875rem 1.75rem; color: var(--c-ink); font-size: 1.125rem; font-weight: 500; line-height: 1.3; cursor: pointer; list-style: none; } .rm-faq summary::-webkit-details-marker { display: none; } .rm-faq summary :is(h2, h3, h4, h5, h6) { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: -0.01em; } .rm-faq summary::after { content: ""; flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(var(--c-ink), var(--c-ink)) center / 14px 2px no-repeat, linear-gradient(var(--c-ink), var(--c-ink)) center / 2px 14px no-repeat, var(--c-canvas); transition: transform 150ms ease; } .rm-faq details[open] > summary::after { transform: rotate(45deg); background: linear-gradient(#fff, #fff) center / 14px 2px no-repeat, linear-gradient(#fff, #fff) center / 2px 14px no-repeat, var(--c-red); } .rm-faq details[open] > summary { padding-bottom: 0.625rem; } .rm-faq .wp-block-details > :not(summary) { margin-inline: 1.75rem; } .rm-faq details > summary + * { margin-top: 0.25rem; padding-top: 0.875rem; border-top: 1px solid var(--c-line); } .rm-faq details > :last-child { margin-bottom: 1.5rem; } .rm-faq details p, .rm-faq details li { color: var(--c-body); font-size: var(--wp--preset--font-size--body-md); line-height: 1.55; } .rm-faq-stack { display: grid; gap: var(--head-gap); justify-items: center; } .rm-faq-stack .rm-faq__kopf { position: static; max-width: 46rem; text-align: center; } .rm-faq-stack .rm-eyebrow { justify-content: center; } .rm-faq-stack .rm-faq { width: 100%; max-width: 56rem; } /* 12 Ablauf */ .rm-step { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: clamp(1.5rem, 1.25rem + 0.6vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; } .rm-steps { counter-reset: schritt; } .rm-step { counter-increment: schritt; } .rm-step > * { margin: 0 !important; } .rm-step__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem !important; } .rm-step__nr, .rm-step .rm-step__nr { display: grid; place-items: center; flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; border: 1.5px solid var(--c-ink); border-radius: 50%; color: var(--c-ink); font-size: 1.125rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; } .rm-step__nr--auto::before { content: counter(schritt, decimal-leading-zero); } .rm-aufwand { padding: 0.375rem 0.875rem; border-radius: var(--r-pill); background: var(--c-canvas); color: var(--c-ink); font-size: var(--wp--preset--font-size--label-md); font-weight: 500; line-height: 1.25; } .rm-step__titel { font-size: var(--wp--preset--font-size--title-md); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); } .rm-step p:not([class*=rm-]) { color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.55; } .rm-raster--2 > .rm-step p:not([class*=rm-]) { font-size: var(--wp--preset--font-size--body-md); } .rm-step > .wp-block-buttons { margin-top: auto !important; padding-top: 0.75rem; } /* 14 Banner */ .rm-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 1.25rem + 2vw, 3.5rem); border-radius: var(--r-stage); background: var(--c-ink); color: var(--c-on-dark-mute); } .rm-banner .rm-eyebrow, .rm-banner h2, .rm-banner h3, .rm-banner .rm-titel, .rm-banner strong { color: #fff; } .rm-banner .rm-eyebrow::before, .rm-dunkel .rm-eyebrow::before { filter: brightness(1.2); } .rm-banner__l { min-width: 0; max-width: 46rem; } .rm-banner__l > * + * { margin-top: 0.875rem; } .rm-banner__l > .rm-eyebrow + * { margin-top: 1rem; } .rm-banner__text, .rm-banner p:not([class*=rm-]) { color: var(--c-on-dark-mute); font-size: var(--wp--preset--font-size--body-md); line-height: 1.55; } .rm-banner a:not(.wp-element-button) { color: #fff; } .rm-banner .rm-btns { margin-top: 0; justify-content: flex-end; } .rm-banner .wp-block-button:not(.is-style-rm-anfrage):not(.is-style-rm-outline) .wp-block-button__link.wp-element-button { background: #fff; color: var(--c-ink); } .rm-banner .wp-block-button.is-style-rm-outline .wp-block-button__link.wp-element-button { box-shadow: inset 0 0 0 1.5px #fff; color: #fff; } /* Auf Dunkel kehrt der Hover um: Weiß wird zur Kontur, die Kontur wird weiß */ .rm-banner .wp-block-button:not(.is-style-rm-anfrage):not(.is-style-rm-outline) .wp-block-button__link.wp-element-button:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; } .rm-banner .wp-block-button.is-style-rm-outline .wp-block-button__link.wp-element-button:hover { background: #fff; color: var(--c-ink); } .rm-checks--reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.25rem !important; } .rm-banner .rm-checks > li { color: #fff; font-size: var(--wp--preset--font-size--body-sm); font-weight: 500; } .rm-banner .rm-checks > li::before { border: 0; background: var(--c-elevated); } .rm-banner .rm-checks > li::after { background: #fff; } .rm-banner .rm-li-ic, .rm-dunkel .rm-li-ic { color: #fff; } .rm-p-titel { padding-bottom: 0; } .rm-p-titel + .rm-s { padding-top: var(--head-gap); } .rm-banner--stapel { grid-template-columns: minmax(0, 1fr); } .rm-banner--stapel .rm-banner__l { max-width: 56rem; } .rm-banner--stapel .rm-btns { justify-content: flex-start; } .rm-banner--stapel .rm-btns--gross .wp-block-button .wp-block-button__link.wp-element-button { min-height: 46px; padding: 0.625rem 1.25rem; border-radius: var(--r-button); font-size: 1rem; } .rm-banner--kompakt { padding: 1rem 1rem 1rem 2.25rem; border-radius: var(--r-pill); } .rm-banner--kompakt h2, .rm-banner--kompakt h3 { font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; } .rm-banner--kompakt .rm-btns--gross .wp-block-button .wp-block-button__link.wp-element-button { min-height: 46px; padding: 0.625rem 1.5rem; border-radius: var(--r-button); font-size: 1rem; } /* 15 Preise */ .rm-preise { align-items: stretch; } .rm-preis { --rm-preis-pad: clamp(1.5rem, 1.25rem + 1vw, 2.5rem); position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--rm-preis-pad); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-preis--hervor { padding: calc(var(--rm-preis-pad) - 1px); border: 2px solid var(--c-ink); box-shadow: var(--shadow-lift); } .rm-preis__tag { position: absolute; top: -0.875rem; left: clamp(1.5rem, 1.25rem + 1vw, 2.5rem); padding: 0.25rem 0.75rem; border-radius: var(--r-pill); background: var(--c-ink); color: #fff; font-size: var(--wp--preset--font-size--label-md); font-weight: 700; line-height: 1.4; } .rm-preis > .rm-preis__name { margin-top: 0; } .rm-preis__name { font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; color: var(--c-ink); } .rm-preis__sub { margin-top: 0.5rem !important; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-line); color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.5; } .rm-preis__wert { margin-top: 1.25rem !important; color: var(--c-ink); font-size: var(--wp--preset--font-size--numeral-lg); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } .rm-preis__ab { color: var(--c-mute); font-size: 1.125rem; font-weight: 450; letter-spacing: 0; } .rm-preis__periode { margin-top: 0.375rem !important; padding-bottom: 1.25rem; border-bottom: 1px solid var(--c-line); color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); line-height: 1.4; } .rm-preis__liste { margin-top: 1.25rem !important; font-size: var(--wp--preset--font-size--body-sm); } .rm-preis__liste > li::before { border: 0; background: transparent; } .rm-preis__liste > li::after { left: 0; top: 0.2rem; width: 1rem; height: 1rem; } .rm-preis__liste > li { padding-left: 1.625rem; } .rm-preise--eins { max-width: 32rem; } .rm-preis__btn { margin-top: auto !important; padding-top: 1.5rem; } .rm-preis__btn .wp-block-button { width: 100%; } .rm-preis__btn .wp-block-button__link { width: 100%; } .rm-preis__notiz { margin-top: 0.75rem !important; color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); line-height: 1.4; } /* 16 Ansprechpartner */ .rm-person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-person--ohnebild { grid-template-columns: minmax(0, 1fr); } .rm-person__bild { display: grid; justify-items: center; gap: 1.25rem; } .rm-portrait { position: relative; width: 100%; max-width: 20rem; } .rm-portrait--240 { width: 15rem; } .rm-portrait--160 { width: 10rem; } .rm-portrait--128 { width: 8rem; } .rm-portrait--96 { width: 6rem; } .rm-person--klein { grid-template-columns: auto minmax(0, 1fr); gap: 2rem 3rem; } .rm-portrait img { border-radius: 50%; box-shadow: 0 0 0 1px var(--c-line), 0 0 0 10px var(--c-canvas); } /* Bogen oben rechts mit rotem Knoten am Anfang, 36 px Abstand zum Bild, nur Desktop (Wunsch Alex) */ @media (min-width: 1025px) { .rm-person:not(.rm-person--klein) .rm-portrait::before { content: ""; position: absolute; inset: -36px; border: 1.5px solid transparent; border-top-color: var(--c-red-400); border-radius: 50%; transform: rotate(40deg); pointer-events: none; } .rm-person:not(.rm-person--klein) .rm-portrait::after { content: ""; position: absolute; top: calc(50% - 3.5px - (50% + 36px) * 0.9962); left: calc(50% - 3.5px - (50% + 36px) * 0.0872); width: 7px; height: 7px; border-radius: 50%; background: var(--c-red); pointer-events: none; } } .rm-person__text > * + * { margin-top: 1rem; } .rm-person__text > .rm-eyebrow + h2 { margin-top: 1rem; } .rm-person__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--c-line); } .rm-person__name { font-size: var(--wp--preset--font-size--title-md); line-height: 1.25; color: var(--c-ink); } .rm-person__rolle { margin-top: 0.125rem !important; color: var(--c-mute); font-size: var(--wp--preset--font-size--body-sm); } .rm-person__text .rm-btns { margin-top: 1.5rem; } /* Kacheln so breit wie ihr Wert; passt ein Wert nicht in die Zeile, bekommt er eine eigene. Die Bezeichnung steht über dem Wert. */ .rm-fakten { display: flex; flex-wrap: wrap; gap: 0.75rem; width: 100%; max-width: 26rem; } .rm-fakt { display: flex; flex: 1 1 auto; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; padding: 1rem; border-radius: var(--r-lg); background: var(--c-canvas); text-align: center; } .rm-fakt__wert { color: var(--c-ink); font-size: var(--wp--preset--font-size--body-sm); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; } .rm-fakt__label { margin-top: 0 !important; color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); line-height: 1.3; } .rm-social { display: flex; gap: 0.5rem; } .rm-social a, .rm-iconlink { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-canvas); color: var(--c-ink); } .rm-social svg, .rm-iconlink svg { width: 1rem; height: 1rem; } /* 5 Kundenstimme */ .rm-zitat { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; padding: clamp(1.5rem, 1.25rem + 1.2vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-zitat > * { margin: 0 !important; } .rm-zitat__oben { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .rm-zitat__oben > * { margin: 0 !important; } .rm-zitat__titel { font-size: var(--wp--preset--font-size--title-md); line-height: 1.25; letter-spacing: -0.01em; color: var(--c-ink); } .rm-zitat__logo svg { display: block; width: auto; height: 1.5rem; } .rm-sterne { color: #E8A100; font-size: 1.125rem; letter-spacing: 0.125em; line-height: 1; } .rm-zitat__text, .rm-zitat__text p { padding: 0; border: 0; color: var(--c-ink); font-size: 1.1875rem; font-style: normal; font-weight: 450; line-height: 1.5; } .rm-zitat__text cite { display: block; margin-top: 0.75rem; color: var(--c-mute); font-size: var(--wp--preset--font-size--body-sm); font-style: normal; } .rm-zitat__fuss { display: flex; align-items: center; gap: 0.875rem; margin-top: auto !important; padding-top: 1.25rem; border-top: 1px solid var(--c-line); } .rm-zitat__fuss > * { margin: 0 !important; } .rm-zitat__foto { flex: 0 0 3rem; width: 3rem; } .rm-zitat__foto img, .rm-zitat__foto svg { display: block; width: 3rem; height: 3rem; border-radius: 50%; } .rm-zitat__foto figcaption { margin: 0; } .rm-zitat__name { color: var(--c-ink); font-weight: 500; line-height: 1.3; } .rm-zitat__firma { margin-top: 0 !important; color: var(--c-mute); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.3; } /* 18 Fallstudie */ .rm-fall { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem 2.5rem; align-items: start; padding: clamp(1.25rem, 1rem + 2vw, 3rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-fall--einspaltig { grid-template-columns: minmax(0, 1fr); } .rm-fall__l { display: grid; gap: 1.25rem; min-width: 0; } .rm-fall__l .rm-bild img { border-radius: var(--r-lg); } .rm-fall__zitat { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-lifted); } .rm-fall__zitat > * { margin: 0 !important; } .rm-fall__zitat .rm-zitat__text, .rm-fall__zitat .rm-zitat__text p { font-size: 1.0625rem; font-style: italic; } .rm-fall__zitat .rm-zitat__fuss { padding-top: 0; border: 0; } .rm-fall__r { min-width: 0; } .rm-fall__r > * + * { margin-top: 1rem; } .rm-fall__kicker { color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .rm-fall__titel { font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; color: var(--c-ink); } .rm-fall__titel a { text-decoration: none; } .rm-fall__gruppe { font-size: var(--wp--preset--font-size--title-md); } .rm-fall__r .rm-checks { margin-top: 0.75rem; font-size: var(--wp--preset--font-size--body-sm); } .rm-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.625rem; margin-top: 1.25rem !important; } .rm-kachel { padding: 1rem; border-radius: var(--r-button); background: var(--c-canvas); } .rm-kachel__wert { color: var(--c-ink); font-size: 1.625rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; } .rm-kachel__label { margin-top: 0.375rem !important; color: var(--c-body); font-size: var(--wp--preset--font-size--label-md); line-height: 1.35; } /* 19 Kennzahlen */ .rm-buehne { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-buehne > * + * { margin-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); } .rm-buehne--hell { background: var(--c-lifted); } .rm-s--lifted .rm-buehne--hell { background: #fff; } .rm-kpi { min-width: 0; padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); border-radius: var(--r-lg); background: var(--c-canvas); } .rm-kpi > * { margin: 0 !important; } .rm-kpi > * + * { margin-top: 0.75rem !important; } .rm-kpi__wert, .rm-kpi .rm-titel.rm-kpi__wert { color: var(--c-ink); font-size: var(--wp--preset--font-size--numeral-lg); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } .rm-kpi__wert--lang, .rm-kpi .rm-titel.rm-kpi__wert--lang { font-size: 2rem; line-height: 1.15; } .rm-kpi__label { color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.45; } .rm-kpi__meta { padding-top: 0.75rem; border-top: 1px solid var(--c-line); color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); line-height: 1.35; } /* 20 Zielgruppe */ .rm-ziel-raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--gap); align-items: start; } .rm-ziel-raster--voll { grid-template-columns: minmax(0, 1fr); } .rm-ziele { display: grid; gap: 0.75rem; } .rm-ziel-raster--voll .rm-ziele { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rm-ziel { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--c-line); border-radius: var(--r-lg); background: #fff; } .rm-ziel > * { margin: 0 !important; } .rm-ziel--link { padding-right: 4.5rem; } .rm-ziel .rm-card__ic { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; } .rm-ziel__body { min-width: 0; } .rm-ziel__body > * + * { margin-top: 0.375rem; } .rm-panel { position: sticky; top: 7rem; padding: clamp(1.25rem, 1rem + 1vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; } .rm-panel > * + * { margin-top: 1rem; } .rm-panel__titel { font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; color: var(--c-ink); } .rm-panel .rm-checks { font-size: var(--wp--preset--font-size--body-sm); gap: 0.625rem; } .rm-panel .rm-bild img { border-radius: var(--r-button); } .rm-panel__btn .wp-block-button, .rm-panel__btn .wp-block-button__link { width: 100%; } /* 22 Linkliste */ .rm-linkchips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0; padding: 0; list-style: none; } .rm-linkchips > li { display: contents; } .rm-linkchips a { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; padding: 0.5rem 0.625rem 0.5rem 1.125rem; border: 1px solid var(--c-line); border-radius: var(--r-button); background: #fff; color: var(--c-ink); font-size: var(--wp--preset--font-size--body-sm); font-weight: 500; line-height: 1.25; text-decoration: none; transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease; } .rm-linkchips a::after { content: ""; flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: currentColor; -webkit-mask: var(--arrow-diag) center / 0.875rem no-repeat; mask: var(--arrow-diag) center / 0.875rem no-repeat; } .rm-linkchips a:hover { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-canvas); } .rm-buehne--hell .rm-linkchips a { background: var(--c-canvas); } .rm-buehne--hell .rm-linkchips a:hover { background: var(--c-ink); } /* 23 Dunkle Bühne */ .rm-dunkel { padding: clamp(1.75rem, 1rem + 3.5vw, 4.5rem); border-radius: var(--r-stage); background: var(--c-anthracite); color: var(--c-on-dark-mute); } .rm-dunkel > * + * { margin-top: var(--head-gap); } .rm-dunkel :is(h2, h3, h4, .rm-titel, .rm-eyebrow, strong) { color: #fff; } .rm-dunkel a:not(.wp-element-button) { color: #fff; } .rm-dunkel .rm-lead, .rm-dunkel p:not([class*=rm-]) { color: var(--c-on-dark-mute); } .rm-dunkel--seite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: start; } .rm-dunkel--seite > * + * { margin-top: 0; } /* Einzelne Karte (Spalte rechts) steht vertikal mittig zum Textblock; Raster mit mehreren Karten bleiben oben bündig. */ .rm-dunkel--seite > .rm-raster:has(> .rm-dunkel__karte:only-child) { align-self: center; } .rm-dunkel__text > * + * { margin-top: 1rem; } .rm-dunkel__text .rm-eyebrow + h2 { margin-top: 1rem; } .rm-dunkel__text .rm-btns { margin-top: 1.5rem; } .rm-dunkel__karte { position: relative; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); border: 1px solid var(--c-line-dark); border-radius: var(--r-card); background: var(--c-elevated); } .rm-dunkel__karte > * { margin: 0 !important; } .rm-dunkel__karte .rm-card__ic { background: rgba(255, 255, 255, 0.08); color: #fff; } .rm-dunkel__titel { font-size: var(--wp--preset--font-size--title-md); line-height: 1.25; letter-spacing: -0.01em; color: #fff; } .rm-dunkel__karte p:not([class*=rm-]) { font-size: var(--wp--preset--font-size--body-sm); line-height: 1.5; } .rm-dunkel .wp-block-button:not(.is-style-rm-anfrage):not(.is-style-rm-outline) .wp-block-button__link.wp-element-button { background: #fff; color: var(--c-ink); } .rm-dunkel .wp-block-button:not(.is-style-rm-anfrage):not(.is-style-rm-outline) .wp-block-button__link.wp-element-button:hover { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; color: #fff; } .rm-dunkel .rm-checks > li { color: #fff; } .rm-dunkel .rm-checks > li::before { border: 0; background: rgba(255, 255, 255, 0.08); } .rm-dunkel .rm-checks > li::after { background: #fff; } /* 6 Vergleich */ .rm-vgl { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: clamp(1.5rem, 1.25rem + 1vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-vgl > * { margin: 0 !important; } .rm-vgl--plus { border: 2px solid var(--c-ink); box-shadow: var(--shadow-float); } .rm-vgl__titel { padding-bottom: 1rem; border-bottom: 1px solid var(--c-line); font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; color: var(--c-ink); } .rm-vgl__zeilen { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.875rem; } .rm-vgl__zeilen > li { position: relative; padding-left: 2.25rem; color: var(--c-ink); line-height: 1.45; } .rm-vgl__zeilen > li::before { content: ""; position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--c-canvas); } .rm-vgl__zeilen > li::after { content: ""; position: absolute; left: 0.375rem; top: 0.375rem; width: 0.75rem; height: 0.75rem; background: var(--c-mute); -webkit-mask: var(--cross) center / contain no-repeat; mask: var(--cross) center / contain no-repeat; } .rm-vgl__zeilen--plus > li::before { background: var(--c-ink); } .rm-vgl__zeilen--plus > li::after { background: #fff; -webkit-mask-image: var(--check); mask-image: var(--check); } .rm-vgl:not(.rm-vgl--plus) .rm-vgl__zeilen > li { color: var(--c-body); } /* 7 Tool: Der Rahmen zentriert nichts, das Tool behält seine Breite. */ .rm-tool { padding: clamp(0.75rem, 0.5rem + 1vw, 2rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-tool__innen { width: 100%; min-width: 0; } .rm-tool__text { max-width: 72ch; color: var(--c-body); } /* 24 Rechtstexte */ .rm-recht { padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); border: 1px solid var(--c-line); border-radius: var(--r-stage); background: #fff; } .rm-recht > * { max-width: 65ch; } .rm-recht h1, .rm-recht .wp-block-post-title { font-size: var(--wp--preset--font-size--headline-lg); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.5rem; } .rm-recht h2 { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-line); font-size: var(--wp--preset--font-size--title-lg); line-height: 1.2; } .rm-recht h3 { margin-top: 1.5rem; font-size: var(--wp--preset--font-size--title-md); line-height: 1.3; } .rm-recht h4 { margin-top: 1.25rem; font-size: var(--wp--preset--font-size--body-md); font-weight: 700; } .rm-recht .rm-liste > li + li { margin-top: 0.375rem; } /* 17 Beitragskarten */ .rm-teaser .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; } .rm-teaser--list .wp-block-post-template { display: block; } .rm-teaser .wp-block-post { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0.875rem; border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; } .rm-teaser .wp-block-post > :not(.wp-block-post-featured-image) { margin-inline: 0.625rem; } .rm-teaser .wp-block-post-featured-image { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-button); background: var(--c-ghost); } .rm-teaser .wp-block-post-featured-image a { display: block; height: 100%; } .rm-teaser .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .rm-teaser__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; margin-top: 0.875rem; color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); } .rm-teaser__kat { padding: 0.125rem 0.625rem; border-radius: var(--r-pill); background: var(--c-canvas); color: var(--c-ink); font-weight: 700; } .rm-teaser .wp-block-post-title { margin-top: 0.75rem; color: var(--c-ink); font-size: var(--wp--preset--font-size--title-md); font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .rm-teaser .wp-block-post-title a { color: inherit; text-decoration: none; } .rm-teaser .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); } .rm-teaser .wp-block-post-excerpt { margin-top: 0.5rem; margin-bottom: 0.875rem; } .rm-teaser .wp-block-post-excerpt__excerpt { margin: 0; color: var(--c-body); font-size: var(--wp--preset--font-size--body-sm); line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .rm-teaser .wp-block-post-excerpt__more-text { display: none; } .rm-teaser__meta .wp-block-post-date, .rm-teaser__meta time { color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); } .rm-teaser__kat a { position: relative; z-index: 1; color: inherit; text-decoration: none; font-size: var(--wp--preset--font-size--label-md); } .rm-teaser .wp-block-post:hover { border-color: var(--c-ink); } .rm-teaser--list .wp-block-post { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.625rem 0; border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: transparent; } .rm-teaser--list .wp-block-post:first-child { border-top: 0; } .rm-teaser--list .wp-block-post-featured-image { aspect-ratio: 1; border-radius: var(--r-xs); } .rm-teaser--list .wp-block-post > :not(.wp-block-post-featured-image) { margin: 0; } .rm-teaser--list .wp-block-post-title { font-size: var(--wp--preset--font-size--body-sm); line-height: 1.3; font-weight: 500; } .rm-teaser--list .wp-block-post-title a::after { display: none; } .rm-pagination, .wp-block-query-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 2.5rem; font-size: var(--wp--preset--font-size--body-sm); } .rm-pagination > *, .wp-block-query-pagination-numbers > * { display: inline-grid; place-items: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0.25rem 0.875rem; border: 1px solid var(--c-line); border-radius: var(--r-pill); background: #fff; color: var(--c-ink); text-decoration: none; margin: 0 !important; } .wp-block-query-pagination-numbers { display: flex; gap: 0.5rem; border: 0 !important; background: transparent !important; padding: 0 !important; } .wp-block-query-pagination .page-numbers.current { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-canvas); } .wp-block-query-pagination .page-numbers.dots { border: 0; background: transparent; } /* Blog-Startseite: Themen-Menü und Lesepfad */ .rm-themen .rm-menu__list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .rm-themen a { display: inline-flex; padding: 0.375rem 0.875rem; border: 1px solid var(--c-line); border-radius: var(--r-button); background: #fff; color: var(--c-ink); font-size: var(--wp--preset--font-size--label-md); font-weight: 500; text-decoration: none; } .rm-themen a:hover { border-color: var(--c-ink); } .rm-aktuell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: stretch; } .rm-aktuell > * { min-width: 0; } .rm-aktuell .rm-teaser { display: flex; flex-direction: column; } .rm-aktuell .rm-teaser .wp-block-post-template { grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; grid-template-rows: minmax(0, 1fr); } .rm-aktuell .rm-teaser .wp-block-post { height: 100%; } .rm-aktuell .rm-teaser--list { padding: 1.25rem 1.5rem; border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; } .rm-aktuell .rm-teaser--list .wp-block-post-template { display: flex; flex-direction: column; } .rm-aktuell .rm-teaser--list .wp-block-post { flex: 1 1 0; height: auto; min-height: 0; } .rm-aktuell .rm-teaser--list .wp-block-post-featured-image { width: 100%; } .rm-aktuell .rm-teaser--list .wp-block-post-featured-image img { aspect-ratio: 1; object-fit: cover; } .rm-card .rm-teaser--list { margin-top: 0.5rem; } .rm-card__nr { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--c-ink); border-radius: 50%; color: var(--c-ink); font-size: 1rem; font-weight: 500; letter-spacing: 0; } /* Suche */ .wp-block-search.rm-suche { margin: 1.5rem 0 0; max-width: 40rem; } .wp-block-search.rm-suche .wp-block-search__inside-wrapper { display: flex; gap: 0.5rem; padding: 0; border: 0; } .wp-block-search.rm-suche .wp-block-search__input { flex: 1 1 auto; min-width: 0; min-height: 3rem; padding: 0.5rem 1.25rem; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); background: #fff; color: var(--c-ink); font: inherit; } .wp-block-search.rm-suche .wp-block-search__button { flex: 0 0 auto; min-height: 3rem; margin: 0; padding: 0.5rem 1.5rem; border: 0; border-radius: var(--r-button); background: var(--c-ink); color: var(--c-canvas); font: inherit; font-weight: 500; cursor: pointer; } .wp-block-search.rm-suche .wp-block-search__button:hover { background: #000; } /* Grafiken aus dem Designsystem */ .rm-vis { margin: 0; padding: 1.5rem; border: 1px solid var(--c-line); border-radius: var(--r-card); background: #fff; } .rm-vis figcaption { color: var(--c-mute); font-size: var(--wp--preset--font-size--label-md); } .rm-vis__netz { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.375rem; } .rm-vis__zelle { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font-size: var(--wp--preset--font-size--label-md); font-weight: 700; color: #fff; } .rm-vis__zelle--g { background: var(--wp--preset--color--success); } .rm-vis__zelle--y { background: #B27A0E; } .rm-vis__zelle--r { background: var(--c-mute); } .rm-vis__zelle--ich { box-shadow: 0 0 0 3px var(--c-ink); } .rm-vis__legende { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.875rem 0 0.5rem; padding: 0; list-style: none; color: var(--c-body); font-size: var(--wp--preset--font-size--label-md); } .rm-vis__leg::before { content: ""; display: inline-block; width: 0.625rem; height: 0.625rem; margin-right: 0.375rem; border-radius: 50%; background: var(--c-mute); } .rm-vis__leg--g::before { background: var(--wp--preset--color--success); } .rm-vis__leg--y::before { background: #B27A0E; } .rm-vis__leg--me::before { background: #fff; box-shadow: 0 0 0 2px var(--c-ink); } .rm-balken { margin-top: 0.75rem; } .rm-balken__text { display: block; margin-bottom: 0.25rem; color: var(--c-ink); font-size: var(--wp--preset--font-size--label-md); font-weight: 500; } .rm-balken__spur { display: block; height: 0.5rem; border-radius: var(--r-pill); background: var(--c-canvas); overflow: hidden; } .rm-balken__spur > span { display: block; height: 100%; border-radius: inherit; background: var(--c-ink); } .custom-video-wrapper { border-radius: var(--r-lg) !important; overflow: hidden; } /* ------------------------------------------------------------------ 25 Kopfzeile */ .rm-site-header { position: sticky; top: 1.25rem; z-index: 50; margin: 1.25rem 0 0; padding-inline: var(--gutter); pointer-events: none; } /* Landingpage-Kopf: der Template-Part nutzt das Tag (unbekanntes Element = inline). Inline erzeugt eine Leerzeile über und unter der Pille, dadurch lag sie 23 px zu tief und der Hero-Abstand wuchs um 17 px. Block wie das normale
; mit Elementtyp für gleiche Stärke nach LiteSpeed-Umsortierung */ header-lp.rm-site-header { display: block; } /* Gleiches Problem beim Landingpage-Fuß: ist inline, ein Strut-Pixel zu viel; als Block wie das normale