/*
 * Adapter: gleicht WordPress-Block-Markup an das Claude-Design-CSS an.
 * Das Design-CSS selbst (assets/design) wird nie von Hand geändert.
 */

/* Template-Parts ohne eigene Box, damit die Navigation über die ganze Seite „sticky“ bleibt */
.immomio-part { display: contents; }

/* Standard-Abstände von WordPress-Blöcken neutralisieren, Design-CSS steuert Abstände */
.wp-site-blocks > * { margin-block: 0; }
/* :where() = Spezifität 0, damit Design-Klassen wie .shell (margin: 0 auto) gewinnen */
:where(.wp-block-group) { margin: 0; }
:where(.rl-hero, .b2c-hero, .rl-row, .rl-panel, .rl-band) .wp-block-group > :first-child { margin-top: 0; }
figure.wp-block-image { margin: 0; }
/* :where() = Spezifität 0: Design-Regeln wie .aud-info__media img { height: 100% } gewinnen */
:where(.wp-block-image) img { display: block; height: auto; }
/* Einzelnes Bild in einem Design-Container (Design: <div class="…__media"><img>): Figure-Hülle neutral */
:where(.wp-block-group) > figure.wp-block-image:only-child { display: contents; }

/* Utility-Klassen für Optionen, die im Design per Inline-Style gelöst waren */
.section.pt-0 { padding-top: 0; }
.section.pb-0 { padding-bottom: 0; }
.rl-actions.is-center { justify-content: center; }
.rl-cta h2 + p, .rl-cta p:last-of-type { margin-inline: auto; }

/* Hero-H1: im Design per Inline-Style gesetzt */
.rl-hero h1.display--sm { font-size: clamp(34px, 4.6vw, 58px); }

/* Vorteile im Hero: Design nutzt <span> mit Häkchen-SVG, WordPress eine Liste */
ul.rl-proof { list-style: none; padding: 0; }
ul.rl-proof li { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 1.4; }
ul.rl-proof li::before {
	content: ""; flex: none; width: 16px; height: 16px; background: var(--primary);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Karten-Nummer und „Mehr erfahren“ als Absatz statt Div/Span */
.rl-card p.more { margin: 0; }
.rl-card .num { margin: 0; }

/* Zitat-Block: figure ohne Browser-Ränder */
figure.rl-quote-block { margin: 0; }

/* Laufband: Bilder als Figure-Elemente */
.rl-marquee figure.wp-block-image { flex: none; }
.rl-marquee__dup { display: contents; }

/* Bilder in Visuals und Smartphone-Reihen */
.rl-phones figure.wp-block-image, .rl-visual figure.wp-block-image { display: contents; }

/* Externer Button-Link: Pfeil wie im Design-Footer */
.btn.is-external .rl-xarea__ic { margin-left: 2px; }

/* FAQ: Antwort-Absätze */
.faq__answer > p:last-child { margin-bottom: 0; }

/* Zeile direkt in einem Abschnitt: im Design per Inline-Style ohne Rahmen/Innenabstand */
.section > .shell > .rl-row:only-child { border: 0; padding-top: 0; padding-bottom: 0; }
.section:not(.rl-hero) .rl-row h2 { margin: 14px 0; }

/* Login-Menü: Design setzt display:flex und überstimmt damit das hidden-Attribut */
.login-menu__pop[hidden] { display: none; }

/* Design-<figure> mit Bild + Text (z. B. .now3 figure): WordPress legt das Bild in einen eigenen
   Bild-Block – dessen Hülle neutral, damit Design-Regeln wie ".now3 img { order: 3 }" greifen */
figure.wp-block-group > figure.wp-block-image { display: contents; }

/* Startseite: Das Design lädt dort kein relaunch.css (a { color: var(--primary) }) –
   Footer-Links erben wie im Design die Textfarbe */
body.home .footer a:not(.btn) { color: inherit; }

/* Hero-Vorteile auf dunklem B2C-Hero: Design färbt die <span>, WordPress nutzt <li> */
.b2c-hero ul.rl-proof li { color: rgba(255, 255, 255, .88); }

/* Logo im Footer und im Startseiten-Header (.nv): Design setzt nur die Höhe – Breite aus dem Seitenverhältnis, nicht aus dem width-Attribut */
.rl-foot__brand img, .footer__brand img, .nv img { width: auto; }
/* Startseiten-Header mobil: Logo-Link wird schmaler gedrückt – Höhe aus der Breite, damit es verkleinert statt gestaucht wird */
.nv .nv__brand { padding-left: 0; min-width: 0; }
.nv .nv__brand img { width: 140px; height: auto; }

/* Beiträge (single.html, .rl-article): Fließtext-Abstände – das Design setzt sie nicht selbst,
   WordPress setzt Blockabstände auf 0 */
.rl-article .wp-block-post-content > :is(p, ul, ol, figure, blockquote, .wp-block-embed, .rl-actions, hr) { margin: 0 0 1.1em; }
.rl-article .wp-block-post-content > :is(ul, ol) { padding-left: 1.3em; }
.rl-article .wp-block-post-content li + li { margin-top: .35em; }
.rl-article .wp-block-post-content > h3 { font-size: 20px; line-height: 1.35; margin: 32px 0 10px; color: var(--ink); }
.rl-article .wp-block-post-content > h4 { font-size: 17px; margin: 24px 0 8px; color: var(--ink); }
.rl-article .wp-block-post-content > h2:first-child, .rl-article .wp-block-post-content > h3:first-child { margin-top: 0; }
.rl-article .wp-block-post-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.rl-article .wp-block-post-content .wp-block-image img { border-radius: 14px; }
.rl-article .wp-block-post-content .wp-element-caption { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.rl-article .wp-block-post-content .wp-block-quote { border-left: 3px solid var(--primary); padding: 4px 0 4px 20px; }
.rl-article .wp-block-post-content .wp-block-quote p { font-size: 19px; color: var(--ink); }
.rl-article .wp-block-post-content .wp-block-quote cite { font-size: 14px; font-style: normal; color: var(--ink-2); }
.rl-article .wp-block-post-content .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
/* Kleine, umflossene Bilder wie auf Produktiv (alignright/alignleft, size-medium) */
.rl-article .wp-block-image.size-medium img { max-width: 300px; }
.rl-article .wp-block-image.size-thumbnail img { max-width: 150px; }
.rl-article .wp-block-image.alignright { float: right; margin: 4px 0 1em 28px; }
.rl-article .wp-block-image.alignleft { float: left; margin: 4px 28px 1em 0; }
.rl-article .wp-block-post-content::after { content: ""; display: block; clear: both; }
.rl-article .wp-block-post-featured-image { margin: 24px 0 32px; }
@media (max-width: 600px) { .rl-article .wp-block-image:is(.alignright, .alignleft) { float: none; margin: 0 0 1em; } }

/* Archive (Kategorie, Schlagwort): Seitennavigation als Pills */
.wp-block-query-pagination { gap: 8px; margin-top: 40px; font-size: 15px; font-weight: 600; }
.wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.wp-block-query-pagination :is(.page-numbers, .wp-block-query-pagination-next, .wp-block-query-pagination-previous) {
	display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 12px;
	border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none;
}
.wp-block-query-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.wp-block-query-pagination a:hover { border-color: var(--ink-2); }
.rl-post .meta a { color: inherit; text-decoration: none; }

/* Startseite v2 („Website 2.1“): eigenes .hero mit Container .sh statt .shell – Verlauf der alten
   Startseite weg, Kreisgrafik (styles.css .hero::after, z-index 0) bleibt, liegt aber unter dem Inhalt */
body.home section.hero { background: none; }
body.home section.hero > .sh { position: relative; z-index: 1; }
/* Startseite auf Bildschirmhöhe: unten 84 px wie im Design („Immomio Startseite.html“: main>.hero padding-bottom
   max(84px,80px)). relaunch.css setzt für .hero.rl-fill (B2B-Hero mit .hero__grid) padding-bottom 0 – ohne .hero__grid
   rutschte der Inhalt der Startseite dadurch rund 40 px nach unten. */
@media (min-width: 768px) and (min-height: 560px) {
	body.home main .entry-content > section.hero.rl-fill { padding-bottom: 84px !important; }
}

/* /mieter/ Paketkarten (.pk, Raster mit festen Zeilen): Button liegt in WordPress im Button-Container */
.pk > .rl-plan > .rl-actions { grid-row: 6; align-self: end; margin-top: 0; }
.pk > .rl-plan > .rl-actions .btn { width: 100%; }

/* /vermieter/ Hero (.hero__grid): relaunch.css setzt .hero__grid pauschal einspaltig und überstimmt damit
   die Desktop-Regel aus styles.css – ab 992 px wieder Text links, Bild rechts */
@media (min-width: 992px) {
	.hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
	/* Überschrift für die halbe Breite: „Vermietungsspezialist“ ohne Trennung mitten im Wort */
	.hero__grid .hero__title { font-size: clamp(34px, 3.4vw, 50px); overflow-wrap: normal; word-break: normal; hyphens: manual; }
}

/* Mobilmenü Vermieter: Hauptpunkte als Aufklapper (inc/render/site-header.php) */
.rl-mobile .rl-acc { border-bottom: 1px solid var(--line); }
.rl-mobile .rl-acc > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 6px; font-weight: 600; font-size: 16px; color: var(--ink); cursor: pointer; list-style: none;
}
.rl-mobile .rl-acc > summary::-webkit-details-marker { display: none; }
.rl-mobile .rl-acc > summary svg { flex: none; transition: transform .15s ease; color: var(--ink-2); }
.rl-mobile .rl-acc[open] > summary svg { transform: rotate(180deg); }
.rl-mobile .rl-acc > summary:focus-visible { outline: 1px solid var(--primary); border-radius: 8px; }
.rl-mobile .rl-acc__body { padding: 0 0 10px 10px; }
/* Untergruppen (Vermieten, Wohnen …) ebenfalls aufklappbar: kleinere Zeile, ohne Trennlinie */
.rl-mobile .rl-acc--sub { border-bottom: 0; }
.rl-mobile .rl-acc--sub > summary { padding: 10px 6px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.rl-mobile .rl-acc--sub > .rl-acc__body { padding: 0 0 6px 10px; }
.rl-mobile .rl-acc__body a:not(.btn) { border-bottom: 0; padding: 8px 6px; font-size: 15px; }
/* Direkte Hauptpunkte (Referenzen, Preise) wie die Aufklapper-Zeilen */
.rl-mobile--b2b > a:not(.btn), .rl-mobile--b2b > a:not(.btn):last-of-type { padding: 12px 6px; font-weight: 600; font-size: 16px; border-radius: 0; border-bottom: 1px solid var(--line); }
/* Primär-Button im Mobilmenü: weiße Schrift (Linkfarbe aus .rl-mobile a überschreibt sie sonst) */
.rl-mobile .acts .btn--primary, .rl-mobile .acts .btn--accent { color: #fff; }

/* Pressemitteilungen (Beiträge im Seitenaufbau): Hero-Grafik wie .pr-hero-graphic im Design – WordPress
   legt das Bild in einen Bild-Block ohne die Klasse. Ältere Beitragsbilder sind teils Hochformat
   (z. B. App-Screenshots): Höhe begrenzen statt das Hero zu sprengen */
.pr-art-head .wp-block-image img { width: 100%; height: auto; max-height: 440px; object-fit: contain; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px #e5e9eb; }

/* Sprachumschalter (Dropdown mit Flaggen) und Hinweisleiste für englische Browser – Styles aus relaunch/site.js (Claude Design) */
.rl-lang{position:relative;margin-right:6px}.rl-lang summary{list-style:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border:0;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(13,35,70,.08),0 2px 8px rgba(13,35,70,.10);font-size:16px;font-weight:700;letter-spacing:.02em;color:var(--ink,#0d2346);cursor:pointer;white-space:nowrap;transition:box-shadow .1s ease}.rl-lang summary::-webkit-details-marker{display:none}.rl-lang summary:hover{box-shadow:var(--im-shadow-hover,0 2px 4px rgba(13,35,70,.1),0 6px 16px rgba(13,35,70,.12))}.rl-lang summary:focus-visible{outline:1px solid var(--primary,#3486ef)}.rl-flag{flex:none;display:block;width:22px;height:22px;border-radius:50%;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.rl-flag--de{background:linear-gradient(#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66%)}.rl-lang__chev{margin-left:2px;transition:transform .3s ease}.rl-lang[open] .rl-lang__chev{transform:rotate(180deg)}.rl-lang__panel{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:220px;padding:6px;background:#fff;border-radius:12px;box-shadow:var(--im-shadow-popover,0 8px 24px rgba(13,35,70,.14));display:grid;gap:2px}.rl-lang__opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:15px;font-weight:500;color:var(--ink,#0d2346);text-decoration:none}.rl-lang__lbl{flex:1;display:grid;gap:2px}a.rl-lang__opt:hover{background:var(--bg-2,#f3f6fa);color:var(--ink,#0d2346)}.rl-lang__opt.is-cur{font-weight:600;background:var(--im-color-primary-lighter,#eef4fd)}.rl-lang__ck{color:var(--primary,#3486ef);flex:none}.rl-lang__opt.is-off{color:var(--ink-3,#6b7a90);cursor:not-allowed}.rl-lang__opt.is-off .rl-flag{opacity:.45}.rl-lang__opt.is-off small{font-size:12px;font-weight:400}.rl-lang--m{margin:12px 0 8px}.rl-lang--m summary{height:44px;width:fit-content}.rl-lang--m .rl-lang__panel{position:static;margin-top:8px;box-shadow:none;border:1px solid var(--line,#e2e7ef)}.rl-mobile .rl-lang__opt:not(.btn){display:flex;border-bottom:0;padding:12px}
.rl-langhint{background:var(--im-color-primary-lighter,#eef4fd);font-size:14px;color:var(--ink,#0d2346)}.rl-langhint .shell{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding-top:10px;padding-bottom:10px}.rl-langhint a{font-weight:600}.rl-langhint button{margin-left:auto;border:0;background:none;font:inherit;color:var(--ink-2,#3d4b63);cursor:pointer;padding:4px 8px}

/* Kontaktformulare (Fluent Forms, inc/forms.php): Felder, Auswahl-Chips und Button im Stil des Designs */
.immomio-form { max-width: 720px; margin: 28px auto 0; text-align: left; }
.immomio-form .fluentform .ff-el-group { margin-bottom: 18px; }
.immomio-form .fluentform .ff-el-input--label label { font-size: 14px; font-weight: 600; color: var(--ink); }
.immomio-form .fluentform .ff-el-form-control { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.immomio-form .fluentform .ff-el-form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); outline: 0; }
.immomio-form .fluentform .ff-el-form-check { display: inline-block; margin: 0 8px 8px 0; }
.immomio-form .fluentform .ff-el-form-check-label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 15px; cursor: pointer; }
.immomio-form .fluentform .ff-el-form-check.ff_item_selected .ff-el-form-check-label { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, #fff); }
.immomio-form .fluentform .ff-el-form-check-input { accent-color: var(--primary); margin: 0; }
.immomio-form .fluentform .ff-btn-submit { min-height: 52px; padding: 0 28px; border-radius: 14px; border: 0 !important; background: var(--ink) !important; color: #fff !important; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.immomio-form .fluentform .ff-btn-submit:hover { background: var(--primary) !important; color: #fff !important; }
/* Allgemeines Formular: bei Mieter/Vermieter/Bewerber nur Hinweis mit Link, kein Absenden (front.js) */
.immomio-form.is-link-only .ff_submit_btn_wrapper, .immomio-form.is-link-only .immomio-form__privacy { display: none; }
.immomio-form__hint { margin: -6px 0 6px; padding: 12px 16px; border-radius: 12px; background: var(--im-color-primary-lighter, #eef4fd); font-size: 15px; }
.immomio-form__privacy { font-size: 13px; color: var(--ink-2); margin: 0; }
/* Whitepaper-Formular wie im Design (wp-request.js, .wpf; 30.10.2026). Sitzt in der Karte des Designs (.wp__form,
   .wpl__box) – ohne eigenen Abstand. Auf /vermieter/whitepaper/<name>/ ist das Whitepaper vorausgewählt und die Auswahl
   ausgeblendet, auf der Referenzen-Seite steht links unter der Einleitung eine Kopie der Auswahl ohne Feldnamen
   (.immomio-form__picks, inc/forms.php) */
.immomio-form--whitepaper { max-width: none; margin: 0; container-type: inline-size; }
.immomio-form__hidden { display: none !important; }
.immomio-form--whitepaper .fluentform form fieldset { display: flex; flex-direction: column; min-width: 0; }
.immomio-form--whitepaper .fluentform .ff-el-group { margin-bottom: 16px; }
.immomio-form--whitepaper .ff-el-input--label label, .immomio-form__picks .ff-el-input--label label { font-size: 15px; font-weight: 600; color: var(--ink); }
.immomio-form--whitepaper .fluentform .ff-el-form-control { min-height: 44px; padding: 10px 14px; border-color: var(--line-2, var(--line)); border-radius: 12px; box-shadow: var(--im-shadow-card); }
.immomio-form--whitepaper .fluentform .ff-el-form-control:hover { border-color: var(--ink-3); }
.immomio-form--whitepaper .fluentform .ff-el-is-required.asterisk-right label::after,
.immomio-form__picks .ff-el-is-required.asterisk-right label::after { content: "*"; margin-left: 3px; color: var(--im-color-negative, #e5484d); }
/* Vor- und Nachname untereinander, solange das Formular schmal ist (Box auf den Whitepaper-Seiten) */
@container (max-width: 559px) {
  .immomio-form.immomio-form--whitepaper .ff-name-field-wrapper .ff-t-container { flex-direction: column; gap: 0; }
  .immomio-form--whitepaper .ff-name-field-wrapper .ff-t-cell { width: 100%; padding: 0; }
}
/* Auswahl der Whitepaper: Karten untereinander, gewählte hervorgehoben */
.immomio-form__picks { margin-top: 20px; }
.immomio-form__picks .ff-el-group { margin: 0; }
.immomio-form__picks .ff-el-input--label { margin-bottom: 12px; }
.immomio-form--whitepaper .ff-el-form-check:has(input[name="whitepaper[]"]), .immomio-form__picks .ff-el-form-check { display: block; margin: 0 0 8px; }
.immomio-form--whitepaper .ff-el-form-check:has(input[name="whitepaper[]"]) .ff-el-form-check-label, .immomio-form__picks .ff-el-form-check-label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink); cursor: pointer; transition: border-color .1s ease, background .1s ease; }
.immomio-form--whitepaper .ff-el-form-check:has(input[name="whitepaper[]"]:checked) .ff-el-form-check-label, .immomio-form__picks .ff-el-form-check:has(input:checked) .ff-el-form-check-label { border-color: var(--primary); background: var(--im-color-primary-lighter, #eef4fd); }
.immomio-form--whitepaper input[name="whitepaper[]"], .immomio-form--whitepaper input[name="marketing[]"], .immomio-form__picks input[type="checkbox"] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--primary); }
.immomio-form__picks .error { margin-top: 4px; font-size: 13px; color: var(--im-color-negative, #e5484d); }
/* Einwilligung Marketing-Mails: Fließtext mit Häkchen */
.immomio-form--whitepaper .fluentform .ff-el-form-check:has(input[name="marketing[]"]) { display: block; margin: 0; }
.immomio-form--whitepaper .fluentform .ff-el-form-check:has(input[name="marketing[]"]) .ff-el-form-check-label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ink-2); }
/* Button vor dem Datenschutzhinweis, Hinweis klein und grau */
.immomio-form--whitepaper .fluentform .ff-el-group:has(.immomio-form__privacy) { order: 2; margin: 0; }
.immomio-form--whitepaper .immomio-form__privacy { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.immomio-form--whitepaper .immomio-form__privacy a { color: var(--primary); }
/* Bestätigung: grüner Kasten mit Überschrift */
.immomio-form--whitepaper .ff-message-success { display: grid; gap: 10px; padding: 20px; border-radius: 12px; background: var(--im-color-positive-lighter, #eaf6ef); }
.immomio-form--whitepaper .ff-message-success h3 { margin: 0; font-size: 20px; color: var(--ink); }
.immomio-form--whitepaper .ff-message-success p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.immomio-form .ff-message-success { border: 0; border-radius: 14px; background: var(--im-color-primary-lighter, #eef4fd); padding: 18px 20px; box-shadow: none; }
@media (min-width: 720px) { .immomio-form .ff-name-field-wrapper .ff-t-container { gap: 16px; } }
/* Vermieter-Formular unter dem Demo-Kasten (/vermieter/#demo): als weiße Karte */
.immomio-form--b2b { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 40px); }

/* Kündigung und Widerruf (inc/vertrag.php): Felder wie bei den Kontaktformularen, als weiße Karte */
.immomio-vertrag { max-width: 720px; margin: 28px auto 0; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 40px); }
.immomio-vertrag__step:focus { outline: 0; }
.immomio-vertrag__step h2 { font-size: clamp(22px, 2.2vw, 28px); margin: 0 0 16px; }
.immomio-vertrag__field { margin-bottom: 18px; }
.immomio-vertrag__field[hidden] { display: none; }
.immomio-vertrag__field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.immomio-vertrag__field input, .immomio-vertrag__field select, .immomio-vertrag__field textarea { box-sizing: border-box; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); background: #fff; }
.immomio-vertrag__field input:focus, .immomio-vertrag__field select:focus, .immomio-vertrag__field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); outline: 0; }
.immomio-vertrag__field [aria-invalid="true"] { border-color: #c62828; }
.immomio-vertrag__hint { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
/* Abschnitte und Checkboxen im einfachen Formular-Layout */
.immomio-vertrag__step h2.immomio-vertrag__section { font-size: clamp(19px, 1.8vw, 22px); margin: 32px 0 6px; }
.immomio-vertrag__step h2.immomio-vertrag__section:first-child { margin-top: 0; }
.immomio-vertrag__intro { margin: 0 0 18px; font-size: 15px; color: var(--ink-2); }
.immomio-vertrag__field--check { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: start; }
.immomio-vertrag__field--check input { width: 20px; height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--primary); }
.immomio-vertrag__field--check label { margin: 0; font-weight: 400; line-height: 1.45; }
.immomio-vertrag__field--check .immomio-vertrag__hint, .immomio-vertrag__field--check .immomio-vertrag__error { grid-column: 2; }
/* /rechtsverstoss-melden/ (inc/vertrag.php, layout „rv“): CSS 1:1 aus Claude Design (relaunch/rechtsverstoss-melden.html, 28.10.2026) */
.rv{padding:clamp(32px,5vw,64px) 0 clamp(56px,7vw,96px);background:var(--bg-2)}
.rv__grid{display:grid;gap:32px;grid-template-columns:minmax(0,1fr)}
@media(min-width:992px){.rv__grid{grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}.rv__aside{position:sticky;top:96px}}
.rv h1{margin:0;color:var(--ink);font-size:clamp(32px,4.2vw,48px);line-height:1.1;text-wrap:balance}
.rv__lede{margin:16px 0 0;color:var(--ink-2);font-size:18px;line-height:1.6;text-wrap:pretty}
.rv form{display:grid;gap:24px;margin-top:36px}
.rv fieldset{margin:0;border:1px solid var(--line);border-radius:16px;background:#fff;padding:24px clamp(20px,3vw,32px) 28px;min-width:0;display:grid;gap:20px}
.rv legend{padding:0 8px;margin-left:-8px;font-size:22px;font-weight:600;color:var(--ink)}
.rv__intro{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}
.rv__row{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.rv__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rv__f{display:grid;gap:8px;min-width:0}
.rv__f label{font-weight:600;color:var(--ink);font-size:16px}
.rv__f label .opt{font-weight:400;color:var(--ink-3);font-size:14px;margin-left:4px}
.rv .req{color:var(--im-color-negative,#e5484d);margin-left:4px}
.rv input[type=text],.rv input[type=email],.rv input[type=url],.rv textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-2,var(--line));border-radius:12px;padding:12px 16px;box-shadow:var(--im-shadow-card);transition:border-color .1s ease,background .1s ease}
.rv input:hover,.rv textarea:hover{border-color:var(--ink-3)}
.rv input:focus-visible,.rv textarea:focus-visible{outline:1px solid var(--primary);border-color:var(--primary)}
.rv textarea{min-height:160px;resize:vertical;line-height:1.55}
.rv ::placeholder{color:var(--ink-3)}
.rv__hint{margin:0;font-size:14px;color:var(--ink-3);line-height:1.5}
.rv__err{display:none;margin:0;font-size:14px;color:var(--im-color-negative,#e5484d)}
.rv__f.is-bad input,.rv__f.is-bad textarea{border-color:var(--im-color-negative,#e5484d)}
.rv__f.is-bad .rv__err,.rv__check.is-bad .rv__err{display:block}
.rv__check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;color:var(--ink);line-height:1.55}
.rv__check input{width:20px;height:20px;margin:3px 0 0;accent-color:var(--primary)}
.rv__check .rv__err{grid-column:2}
.rv__submit{display:grid;gap:14px;justify-items:start}
.rv__fine{margin:0;font-size:14px;color:var(--ink-2)}
.rv__fine a{text-decoration:underline;text-underline-offset:3px}
.rv__fine .req{margin:0 2px 0 0}
.rv__aside{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 28px}
.rv__aside h2{margin:0 0 18px;font-size:20px;line-height:1.3;color:var(--ink)}
.rv__steps{list-style:none;margin:0;padding:0;display:grid}
.rv__steps li{position:relative;padding:0 0 22px 30px}
.rv__steps li:last-child{padding-bottom:0}
.rv__steps li::before{content:"";position:absolute;left:3px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px var(--im-color-primary-lighter,#eef5ff)}
.rv__steps li:not(:last-child)::after{content:"";position:absolute;left:8px;top:22px;bottom:2px;width:2px;background:var(--line)}
.rv__steps b{display:block;color:var(--ink);font-weight:600}
.rv__steps span{display:block;margin-top:4px;color:var(--ink-2);font-size:15px;line-height:1.5}
.rv__done{display:none;margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px}
.rv__done h2{margin:12px 0 10px;color:var(--ink);font-size:24px}
.rv__done p{margin:0;color:var(--ink-2);line-height:1.6;max-width:56ch}
.rv.is-sent form{display:none}.rv.is-sent .rv__done{display:block}
.rv.immomio-vertrag { max-width: none; margin: 0; border: 0; border-radius: 0; padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); background: var(--bg-2); } /* nicht die Formular-Karte */
/* … dazu die Zustände aus assets/js/vertrag.js (hidden/aria-invalid statt is-bad/is-sent) */
.rv form[hidden], .rv .rv__done[hidden], .rv [data-out-if][hidden] { display: none; }
.rv .rv__done:not([hidden]) { display: block; margin-top: 36px; }
.rv .rv__err:not([hidden]) { display: block; }
.rv [aria-invalid="true"] { border-color: var(--im-color-negative, #e5484d); }
.rv .rv__done .rv__fine { margin-top: 14px; }
.immomio-vertrag__error { margin: 6px 0 0; font-size: 14px; color: #c62828; }
.immomio-vertrag__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.immomio-vertrag__note { font-size: 14px; color: var(--ink-2); margin: 0 0 20px; }
.immomio-vertrag__step > button + .immomio-vertrag__note { margin: 14px 0 0; } /* Pflichtfeld-Hinweis unter dem Button (Design 05.11.2026) */
.immomio-vertrag__summary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px 20px; margin: 0 0 24px; padding: 18px 20px; border-radius: 14px; background: var(--im-color-primary-lighter, #eef4fd); }
.immomio-vertrag__summary dt { font-weight: 600; color: var(--ink-2); }
.immomio-vertrag__summary dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 599px) { .immomio-vertrag__summary { grid-template-columns: 1fr; } .immomio-vertrag__summary dd { margin-bottom: 6px; } }
.immomio-vertrag__status { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: #fdecea; color: #8a1c1c; }
@media print { .immomio-vertrag .btn, .rl-nav, .rl-foot, .rl-mobile { display: none !important; } .immomio-vertrag { border: 0; padding: 0; } }

/* /vermieter/#demo: Demo-Kasten und Vermieter-Formular als gemeinsame Karte (scripts/import/convert.mjs, placeForms) –
   links dunkel mit Vorteilen der Demo, rechts das Formular; mobil untereinander */
.rl-demo { display: grid; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(13, 35, 70, .45); }
@media (min-width: 992px) { .rl-demo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rl-demo > .rl-cta { border-radius: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 0; padding: clamp(32px, 4vw, 56px); }
.rl-demo > .rl-cta h2 { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.12; margin: 14px 0 14px; }
.rl-demo > .rl-cta p { margin: 0; max-width: none; }
.rl-demo > .rl-cta ul.rl-checks { margin: 26px 0 0; gap: 12px; }
.rl-demo > .rl-cta ul.rl-checks li { color: rgba(255, 255, 255, .9); font-size: 16px; }
.rl-demo > .rl-cta .rl-actions { justify-content: flex-start; margin-top: 30px; }
.rl-demo .immomio-form--b2b { margin: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: clamp(24px, 4vw, 48px); }
.rl-demo > .rl-cta .eyebrow { justify-content: flex-start; align-self: flex-start; margin: 0; }
@media (min-width: 992px) { .rl-demo > .rl-cta { justify-content: flex-start; padding-top: clamp(48px, 5vw, 72px); } }

/* Partner & Schnittstellen, Partnermanagement: Foto klein neben dem Zitat (Abschnitt so hoch wie „ERP-Partner“) */
#ansprechpartner .wp-block-image { flex: 0 0 220px; max-width: 220px; margin: 0; }
#ansprechpartner .wp-block-image img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }
@media (max-width: 599px) { #ansprechpartner .wp-block-image { flex-basis: 160px; max-width: 160px; } }

/* Aus „Website 2.1“ (relaunch.css), fehlt in 2.0: lange Wörter in Häkchenlisten umbrechen statt überlaufen */
.rl-checks li > span { min-width: 0; }

/* ==========================================================================================================
   Barrierefreiheit (WCAG 2.2 AA, Prüfung 16.10.2026)
   ========================================================================================================== */

/* Kontrast (Freigabe Niko, 16.10.2026): Markenblau #3285ED bleibt für Flächen, Icons und Linien; als Textfarbe und
   als Hintergrund weißer Schrift dunkler (#1F63C4, ≥ 4,8:1 auf Weiß und Hellblau). Grau für Nebentexte #646A73. */
:root {
	--im-text-blue: #1f63c4;
	--ink-3: #646a73;
	--primary-dark: #1f63c4;
	--im-color-positive-dark: #007a49;
}
a { color: var(--im-text-blue); }
/* Textfarbe Blau: !important, weil die Design-Regeln dafür teils spezifischer sind (z. B. .rl-card .num) */
.num, .tag, .pt .tag, .is-style-more, .rl-card .more, .pr-more, .story__cta, .rl-post .more, .df-arr, .df-arr span,
.df-node b, .df-node small, .df-opt__row small, .ep b, th.is-now a, td.is-now, .pr-side__dl a, .eyebrow-link, .rl-mega__link:hover,
.rl-chip, .rl-link, .ks-facts h2, .plz-tools .seg button, .vs__label, .mockcard__foot a, .phase .when, .rl-step .when,
.seo-links a, .pr-kick, .pstrip a i, td.ok, .p360-erp__sync, .way__tag, .wbs-mock__stamp, .hero .ey,
main p a:not(.btn), main li a:not(.btn):not([class*="rl-"]), main td a, main small a, .rl-note a, .faq__answer a { color: var(--im-text-blue) !important; }
/* Ausnahmen auf dunklem Grund behalten ihre helle Farbe */
.section--ink .num, .ui-what__item--you .num, .section--ink p a:not(.btn), .rl-cta p a, .rl-demo .rl-cta a:not(.btn) { color: #a9cdfb !important; }
/* Kontaktkarte (Presse, Vermieter): Mail/Telefon in der dunklen Seitenleiste weiß wie im Design */
main .cf-side .cf-checks li a:not(.btn) { color: #fff !important; }
/* ERP-Fundament unter der 360°-Grafik: Pills auf dunklem Grund weiß, als Pill erkennbar (ohne Unterstreichung) */
main .p360-erp .p360-erp__list li a:not(.btn) { color: #fff !important; text-decoration: none !important; }
.btn--accent, .srch .btn, .res .btn { background: var(--im-text-blue); color: #fff; }
.btn--accent:hover, .srch .btn:hover, .res .btn:hover { background: #174f9c; color: #fff; }
/* Kennzeichen „kostenlos“ (PLZ-Liste) und Info-Status in den Produkt-Mockups */
.st--free { color: var(--im-color-positive-dark); }
.pstat--info { color: var(--primary-dark); }
/* Diagramm-Werte in Rot (Kennzahlen, große Schrift): ≥ 3:1 */
.wf .bar b { color: #e8432e !important; }
/* Kundenstimme auf dunkler Karte (/vermieter/ „Referenzen“): Name und Unternehmen hell, Kennzeile hellblau */
.rl-card.big .rl-quote-block .by, .rl-card.big .rl-quote-block .by b, .rl-card.big .rl-quote-block .by > span:not(.av) { color: #dbe4f0; }
.rl-card.big .rl-quote-block .by .av { color: var(--im-text-blue); }
.rl-card.big > .num { color: #a9cdfb !important; }

/* Links im Fließtext nicht nur über die Farbe erkennbar: unterstreichen (Navigation, Karten, Buttons ausgenommen) */
main p a:not(.btn):not([class]), main li a:not(.btn):not([class]), main td a:not([class]), main small a:not([class]),
.immomio-form__privacy a, .plz-note a, .rl-plan a:not(.btn), .stat__price a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Fokus sichtbar: Suchfelder (Startseite, /mieter/) zeigen einen Fokusrahmen um das ganze Feld */
.srch:focus-within, .stat__form:focus-within, form:has(> input#st-city:focus-visible) {
	outline: 2px solid var(--im-text-blue);
	outline-offset: 2px;
}

/* Mega-Menü per Tastatur: Panel bleibt offen, solange der Fokus im Menüpunkt ist; Esc schließt (front.js) */
.rl-mega__item:focus-within .rl-mega { display: block; opacity: 1; }
.navb2b__item.is-closed .rl-mega, .navb2b__item.is-closed .navb2b__panel { display: none !important; }

/* Karussell-Punkte: 24 × 24 px Klickfläche (sichtbarer Punkt bleibt klein) */
.hc__dots { gap: 0; }
.hc__dot { position: relative; background-clip: content-box; padding: 8px; box-sizing: content-box; }
.hc__dot::after { content: ""; position: absolute; inset: -8px 0; }

/* Überschriften in den Produkt-Mockups (vorher H4): als H3 ausgezeichnet, Aussehen wie bisher */
.ppanel h2.wp-block-heading, .ppanel h2, .ppanel h3.wp-block-heading, .ppanel h3 { margin: 0 0 4px; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: 0; color: var(--ink); }

/* Footer-Spaltenüberschriften als H2 (Überschriften-Reihenfolge), Aussehen wie bisher */
.rl-foot h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; font-weight: 600; line-height: 1.4; }

/* Umbruch bei 320 px / 400 % Zoom: lange Wörter und Adressen umbrechen statt seitlich zu scrollen */
main p, main li, main dd, main td, main a { overflow-wrap: anywhere; }
@media (max-width: 480px) {
	main h1, main h2, main h3, .is-style-display, .is-style-display-sm { overflow-wrap: anywhere; hyphens: auto; }
}
main:focus { outline: none; }
/* Karten-Überschriften, die als H2 ausgezeichnet sind (z. B. /login/: direkt unter dem Seitentitel), wie Karten-H3 */
.rl-card h2.wp-block-heading:not([class*="is-style"]) { margin: 0; font-size: 20px; line-height: 1.25; color: var(--ink); font-weight: 600; letter-spacing: 0; }
/* Beitragskarten-Titel als H2 (Übersichten /blog/, Kategorien, /wissen/) – Aussehen wie die H3 der Karten */
.rl-post h2, .rl-post h2.wp-block-post-title { margin: 0; font-size: 19px; line-height: 1.3; color: var(--ink); font-weight: 600; letter-spacing: 0; }
.rl-post.big h2 { font-size: 28px; color: #fff; } /* dunkle Karte: Design färbt nur h3 weiß */

/* Button „Suchprofil erstellen“ im B2C-Footer: dunklere Fläche → weiße Schrift */
.rl-foot .btn--accent, .rl-foot .btn--accent:hover { color: #fff; }
/* Gesperrte Zeilen im Datenschutz-Beispiel (/mieter/ihre-daten/): blasser, aber lesbar (≥ 4,5:1) */
.mockcard__row.is-locked span { color: #6f747c !important; }
main p > a:only-child:not(.btn) { display: inline-block; min-height: 24px; line-height: 24px; } /* Zielgröße ≥ 24 px für einzeln stehende Textlinks */
/* Dunkle Karten mit Link (z. B. /vermieter/vermietungsspezialist/ „ROI-Rechner öffnen“): Link hell */
/* (.is-s-77d0aac = Design-Inline-Stil „background:var(--ink);color:#fff;border:0“, vom Konverter als Klasse) */
.is-s-77d0aac .more, .is-s-77d0aac a:not(.btn) { color: #a9cdfb !important; }
/* 320 px: Produkt-Hero (Vermietungsportal u. a.) einspaltig ohne Mindestbreite, lange Produktnamen umbrechen */
@media (max-width: 991px) { .mod-hero__inner { grid-template-columns: minmax(0, 1fr) !important; } }
.mod-hero__copy, .mod-hero__shot { min-width: 0; }
@media (max-width: 480px) { .mod-hero .display { overflow-wrap: anywhere; } }
/* Dekorative Elemente, die seitlich über den Rand ragen (z. B. IDA-Seite), nicht zu seitlichem Scrollen führen lassen */
main > * { overflow-x: clip; }

/* Startseiten-Navigation (.nv): Regeln aus dem Seiten-CSS der Startseite auch im Theme (unabhängig vom Seiten-CSS) */
.nv { background: #fff; border-bottom: 1px solid var(--im-color-border, #e2e7ef); }
.nv .sh { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); display: flex; align-items: center; gap: 12px; height: 68px; }
.nv img { height: 24px; display: block; }
.nv .sp { flex: 1; }
.nv a { font-weight: 600; font-size: 15px; text-decoration: none; color: var(--im-color-text, #1d2b4f); display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 12px; transition: background .1s ease; }
.nv a:hover { background: var(--im-color-bg-tertiary, #eef2f8); }
.nv .vm { background: var(--im-color-secondary, #1d2b4f); color: #fff; }
.nv .vm:hover { background: var(--im-color-secondary-light, #2c3d68); color: #fff; }
@media (max-width: 900px) { .nv .li-t { display: none; } }
/* Vermieter-Button: mobil (bis 767 px) nur „Für Vermieter“ – wie „Immomio Startseite.html“ (Design 01.11.2026) */
.nv .vm-m { display: none; }
@media (max-width: 767px) { .nv .vm-d, .nv .vm-t { display: none; } .nv .vm-m { display: inline; } .nv .vm { white-space: nowrap; flex: none; } }
@media (max-width: 380px) { .nv .vm { padding-left: 12px; padding-right: 12px; font-size: 14px; } }

/* Kontaktkarte /vermieter/#demo (Claude Design .cf): echtes Formular statt Entwurf – ohne eigenen Rahmen */
.cf-form--live { display: block; }
.cf-form--live .immomio-form--b2b, .cf-form--live .immomio-form--presse { margin: 0; max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; background: none; }

/* ERP-Laufband /vermieter/: Pills als Links auf die ERP-Unterseiten; Pause auch bei Tastaturfokus (WCAG 2.2.2) */
a.rl-pill { text-decoration: none !important; transition: border-color .2s ease, color .2s ease; }
a.rl-pill:hover, a.rl-pill:focus-visible { border-color: var(--bb-blue, #1F63C4); color: #1F63C4; }
.rl-marquee:focus-within .rl-marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rl-marquee a.rl-pill[aria-hidden="true"] { display: none; } }

/* Bilder mit width/height (inc/images.php): Größe weiter aus dem CSS (ohne Spezifität), Attribute liefern nur das Seitenverhältnis */
:where(img[data-size="auto"]) { width: auto; height: auto; }

/* Immomio Now (/mieter/): in kostenlosen Städten kein Kasten mit Kennzahlen und Kanälen (Manuel Waldner, 28.10.2026; Skript scripts/import/lib/now-search.mjs) */
.stat .stat__viz.is-free { display: none; }
/* Immomio Now (/mieter/): WBS-Hinweis unter „Immomio Now buchen“ (Niko, 27.10.2026) */
.stat__wbs { position: relative; margin: 0; padding: 14px 16px 14px 46px; border-radius: 12px; background: var(--im-color-primary-lighter, #eaf2fd); color: var(--ink); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.stat__wbs::before { content: ""; position: absolute; left: 16px; top: 16px; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f63c4' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 11v6M12 7.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.stat__wbs a { font-weight: 600; color: var(--im-text-blue, #1f63c4); text-decoration: none; }
.stat__wbs a:hover, .stat__wbs a:focus-visible { text-decoration: underline; }

/* Bildklassen aus dem Design (Kundenstorys, Presse, Engagement): Sie sitzen nach dem Import an der Figure (convert.mjs,
   IMG_CLASSES) – Regeln wie im Design aufs <img>, die Figure selbst bleibt neutral */
.wp-block-image:is(.ks-hero-img, .pr-hero-img, .eg-img, .eg-hero-img) { aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; }
.wp-block-image:is(.ks-hero-img, .pr-hero-img) img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; }
.wp-block-image.eg-img img { display: block; width: 100%; height: auto; border-radius: 16px; object-fit: cover; }
.wp-block-image.eg-hero-img img { aspect-ratio: 3 / 2; }

/* Screenreader-Hinweis „öffnet in neuem Tab“ an Links (front.js, wie relaunch/site.js) */
.rl-sr-nt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Datenschutz und AGB in voller Inhaltsbreite (Vorlage page-text-wide, Wunsch Niko 28.10.2026) */
/* ohne die (hier leere) Seitenleisten-Spalte des Artikel-Layouts, so breit wie Menü und Footer */
.rl-article.rl-article--wide { max-width: var(--page-max); display: block; }

/* Überschriften im Inhalt mit ausgeglichenem Umbruch (kein einzelnes Wort in der letzten Zeile, z. B. „Prozess.“ auf
   /vermieter/plattform-360/ mobil); im Design nur für .rl-head h2 und Hero-H1 gesetzt (Wunsch Niko, 28.10.2026) */
main h1, main h2, main h3 { text-wrap: balance; }

/* Produkt-Screenshots öffnen per Klick groß (Lightbox in assets/js/front.js, Wunsch Niko, 01.11.2026) */
.rl-zoomable { cursor: zoom-in; }
.rl-zoomable:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* HTML-Sitemap /sitemap/, /en/sitemap/ ([immomio_sitemap], inc/sitemap.php, Wunsch Niko, 01.11.2026). Reine Linkliste wie die
   Navigation: nicht unterstrichen (Ausnahme von „Links im Fließtext unterstreichen“), erst beim Darüberfahren; Farbe wie
   alle Links im Inhalt (--im-text-blue, Kontrastregel oben) */
.rl-sitemap { display: grid; gap: 40px 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 40px; text-align: left; }
.rl-sitemap h2 { margin: 0 0 12px; font-size: 20px; color: var(--ink); }
.rl-sitemap h3 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.rl-sitemap h3 span { font-weight: 400; color: var(--ink-3); }
.rl-sitemap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
main .rl-sitemap .rl-sitemap__list li a { text-decoration: none; }
main .rl-sitemap .rl-sitemap__list li a:hover, main .rl-sitemap .rl-sitemap__list li a:focus-visible { text-decoration: underline; }
.rl-sitemap__list .is-d1 { padding-left: 14px; }
.rl-sitemap__list .is-d2 { padding-left: 28px; }
.rl-sitemap__list .is-d3 { padding-left: 42px; }
main .rl-sitemap .rl-sitemap__list li.is-d0 > a { font-weight: 600; }
.rl-sitemap__sec--blog { grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid var(--line); }
.rl-sitemap__cats { display: grid; gap: 32px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
main .rl-sitemap .rl-sitemap__sec--blog .rl-sitemap__list li.is-d0 > a { font-weight: 400; }

/* Stellenkarten (/karriere/, /en/careers/): Das Plugin legt die Karten in einen Wrapper und hängt einen leeren
   Auszugs-Block an – Raster wie im Design (.rl-joblist) auf den Wrapper, leerer Block weg */
.rl-joblist > div:has(> article) { display: grid; gap: 12px; }
.rl-joblist > .entry-content { display: none; }

/* Immobilienportal, Modul Customized (#customized): Im Design hängt .cz an .shell (zentriert); hier an einer Gruppe in
   der Shell – zentrieren. Überschrift „display--xs“ wie im Design (Klasse gibt es im Design-CSS nicht: Grundstil h2) */
#customized .cz { margin-inline: auto; }
#customized .cz h2 { font-size: 28px; font-weight: 700; line-height: 1.12; color: var(--ink); }

/* Wissen-Hero (.wi-hero__img): Bild füllt den Rahmen wie im Design. Die Hero-Regel fürs Bild rechts (relaunch.css,
   .rl-hero.rl-fill … > :last-child img: height auto, object-fit contain) ist spezifischer – daher !important, absolut im Rahmen */
.rl-hero .wi-hero__img { position: relative; }
.rl-hero .wi-hero__img .wp-block-image img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; max-height: none !important; object-fit: cover !important; }

/* Referenzen nach ERP (.erpref): „Zur ERP-Seite“ steht hier in einem Absatz – allein im Kartenkopf, nicht im Fließtext:
   ohne Unterstreichung wie im Design (Farbe wie alle Links) */
.erpref header p { margin: 0; }
main .erpref header p a:not([class]) { text-decoration: none; }
main .erpref header p a:not([class]):hover { text-decoration: underline; }

/* Vermieter, Referenzkunden nach ERP (.rel-list): Firmennamen in der schmalen Spalte mit Silbentrennung statt Umbruch
   mitten im Wort (main li: overflow-wrap anywhere) */
main .rel-list li { overflow-wrap: break-word; }
.rel-list li b { hyphens: auto; }

/* Vermieter, Plattform-Reiter mobil: Design-Regel „#plattform .rl-panel__visual:has(> img)“ (relaunch.css, 4:3-Rahmen,
   Bild eingepasst) – hier liegt das Bild in einem <figure> */
@media (max-width: 991px) {
	#plattform .rl-panel__visual:has(> .wp-block-image > img) { min-height: 0; aspect-ratio: 4 / 3; padding: 24px; overflow: hidden; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
	#plattform .rl-panel__visual > .wp-block-image { min-height: 0; width: 100%; height: 100%; margin: 0; }
	#plattform .rl-panel__visual > .wp-block-image > img { width: 100%; height: 100%; max-height: none; max-width: 100%; object-fit: contain; }
}

/* Nutzungsbedingungen (Design-Sync 04.11.2026): Inhaltsverzeichnis wie im Design grau ohne Unterstrich (allgemeine Linkregel main li a färbt mit !important und unterstreicht) */
main .nb__toc li a:not([class]){color:var(--ink-2) !important;text-decoration:none}
main .nb__toc li a:not([class]):hover{color:var(--im-text-blue) !important}

/* API-Doku (Design-Sync 04.11.2026): ERP-Kacheln wie im Design dunkel ohne Unterstrich (allgemeine Linkregel main li a färbt mit !important und unterstreicht) */
main .api-erp li a:not([class]){color:var(--ink) !important;text-decoration:none}
main .api-erp li a:not([class]):hover{color:var(--im-text-blue) !important}

/* Integrationsseiten (Ticketing, DMS, Messdienstleister), „Was übernommen wird“: Im Design div > b + span, nach dem
   Import ein Absatz <p><b>…</b>Text</p> – Karte und Zeilenumbruch wie im Design (.ifl div / .ifl b / .ifl span). */
.ifl > p { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; color: var(--ink-2); font-size: 14px; }
.ifl > p > b:first-child { display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; }