/* ============================================================ rebyteit-design.css - Designsystem der Website rebyteit.de Stand 2026-08-03-2 Zusammengefuehrt aus zwei Quellen, die sich zuvor gegenseitig ueberboten haben: 1. dem Customizer-Feld "Zusaetzliches CSS" (wp-custom-css) 2. den 22 Inline-Bloecken im WPCode-Kopf-Feld Die Reihenfolge bildet die frueheren Kraefteverhaeltnisse ab: der Customizer-Teil steht zuerst, die rb-Bloecke danach - denn die rb-Regeln gewannen bisher ueber hoehere Spezifitaet (html body .rb-...) gegen den Customizer. Diese Datei wird zuletzt geladen (wp_head, Prioritaet 999) und gewinnt damit gegen alle anderen Stilquellen des Themes und der Erweiterungen - auch ohne !important. ============================================================ */ /* ============================================================ TEIL 1 - frueher: Customizer, "Zusaetzliches CSS" Am 03.08.2026 hierher verschoben, das Customizer-Feld wurde geleert. Rueckweg: bak/css-umbau-2026-08-03/wp-custom-css-vorher.css ============================================================ */ /* Barrierefreiheits-Fix: Textkontrast auf WCAG-AA (>=4.5:1) angehoben. 28.07.2026 */ .rb-button-primary, .rb-button-primary a, a.rb-button-primary { background: #F58220; border-color: #F58220; color: #0F172A; } .rb-button-primary:hover, .rb-button-primary a:hover, a.rb-button-primary:hover { background: #D9680F !important; border-color: #D9680F !important; color: #0F172A !important; } .rb-eyebrow { color: #B45309 !important; } .rb-card-icon { color: #B45309; } .rb-contact-widget-email, .wpcf7-list-item-label a { color: #B45309; } .rb-home-ratgeber-card-title, .rb-home-ratgeber-card-link, .rb-home-ratgeber-all { color: #B45309 !important; text-decoration: underline !important; text-decoration-color: rgba(180, 83, 9, .35) !important; text-underline-offset: 2px; } .rb-home-ratgeber-card-title:hover, .rb-home-ratgeber-card-link:hover, .rb-home-ratgeber-all:hover { color: #974608 !important; text-decoration-color: currentColor !important; } /* Konsistenz-Fix: Kontakt-Button (Icon fuer Anfrage) war je nach Seite unterschiedlich gross und positioniert (auf den meisten Seiten vertikal zentriert statt unten rechts, nur auf der Startseite korrekt). Jetzt seitenunabhaengig einheitlich unten rechts fixiert, ueberall gleiche Groesse und gleiches Icon. 28.07.2026 */ .rb-contact-widget-toggle { position: fixed; top: auto; bottom: 24px; right: 22px; left: auto; width: 62px; height: 62px; transform: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: #F58220; color: #0F172A; cursor: pointer; box-shadow: 0 12px 30px rgba(31,41,55,.22); z-index: 9992; } .rb-contact-widget-toggle:hover { transform: scale(1.04) !important; background: #D9680F !important; } .rb-contact-widget-toggle svg { width: 30px; height: 30px; } @media (max-width: 400px) { .rb-contact-widget-toggle { width: 50px; height: 50px; right: 12px; bottom: 12px; } .rb-contact-widget-toggle svg { width: 22px; height: 22px; } } /* Layout-Fix: Abstand zwischen Footer-Link "Beratung buchen" und der Ortsangabe darunter fehlte (margin-top:0), wirkte wie eine Zeile desselben Links. 28.07.2026 */ .rb-footer-contact-note { margin-top: 10px; } /* Layout-Fix: animierter Deko-Punkt (rb-blob-drift) legte sich bei 1440px ueber den Eyebrow-Text im Hero. Deko-Punkte hinter den Text gestapelt. 28.07.2026 */ [class*="rb-floating-dot"] { z-index: 0; } .rb-eyebrow { position: relative; z-index: 1; } /* Barrierefreiheit: Tap-Target des mobilen Menu-Buttons war mit 39px Breite unter dem empfohlenen Minimum von 44px. 28.07.2026 */ @media (max-width: 700px) { button.menu-toggle { min-width: 44px; } } /* Konsistenz-Fix (Teil 2): einheitliches Panel-Styling fuer den Kontakt-Button, damit das Formular ueberall gleich aussieht - auch auf Seiten, die bisher keine eigene Panel-Gestaltung hatten. 28.07.2026 */ .rb-contact-widget-panel { position: fixed; z-index: 9991; right: 100px; top: auto; bottom: 24px; transform: none; width: min(430px, calc(100vw - 130px)); max-height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto; padding: 24px; background: #fff; border: 1px solid #E5E7EB; border-radius: 18px; box-shadow: 0 24px 60px rgba(17,24,39,.20); } .rb-contact-widget-panel[hidden] { display: none; } .rb-contact-widget-close { position: absolute; right: 13px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #F7F8FA; color: #111827; font-size: 24px; line-height: 1; cursor: pointer; } .rb-contact-widget-kicker { display: block; color: #B45309; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px; } .rb-contact-widget-panel h2 { font-size: 23px; margin: 0 38px 7px 0; } .rb-contact-widget-panel > p { font-size: 14px; line-height: 1.45; color: #6B7280; margin: 0 0 14px; } .rb-contact-widget-panel .wpcf7 { margin-top: 12px; } .rb-contact-widget-panel .rb-cf7-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .rb-contact-widget-panel .rb-field { display: block; margin: 0; color: #111827; font-size: 13px; font-weight: 720; } .rb-contact-widget-panel .rb-field > span:first-child { display: block; margin-bottom: 4px; } .rb-contact-widget-panel .wpcf7-form-control-wrap { display: block; } .rb-contact-widget-panel input[type="text"], .rb-contact-widget-panel input[type="email"], .rb-contact-widget-panel textarea { display: block; width: 100%; margin: 0; border: 1px solid #d7dde5; border-radius: 9px; background: #fff; padding: 9px 11px; color: #111827; font-family: inherit; font-size: 14px; line-height: 1.35; } .rb-contact-widget-panel input[type="text"], .rb-contact-widget-panel input[type="email"] { min-height: 42px; } .rb-contact-widget-panel textarea { height: 88px; min-height: 88px; max-height: 150px; resize: vertical; } .rb-contact-widget-panel .rb-consent { font-size: 11px; line-height: 1.35; color: #6B7280; } .rb-contact-widget-panel .rb-consent label { display: flex; align-items: flex-start; gap: 7px; } .rb-contact-widget-panel .rb-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: #B45309; flex: 0 0 17px; } .rb-contact-widget-panel .rb-consent a { color: #B45309; font-weight: 700; } .rb-contact-widget-panel input[type="submit"] { width: 100%; min-height: 46px; border: 0; border-radius: 9px; background: #F58220; color: #0F172A; padding: 11px 16px; font-family: inherit; font-size: 14px; font-weight: 780; cursor: pointer; } .rb-contact-widget-panel .wpcf7-response-output { margin: 10px 0 0; padding: 9px 11px; border-radius: 9px; font-size: 12px; } @media (max-width: 700px) { .rb-contact-widget-panel { left: 10px; right: 10px; top: auto; bottom: 70px; transform: none; width: auto; max-height: calc(100vh - 106px); padding: 20px; } } /* Konsistenz-Fix (Teil 3): das eigentliche sitomweite Kontakt-Widget heisst rb-cw-toggle (per JS auf jeder Seite injiziert, ausser eine Seite hat schon das aeltere rb-contact-widget-toggle - dann wird rb-cw-toggle unterdrueckt). War ebenfalls vertikal zentriert (top:50%) statt unten rechts. 28.07.2026 */ .rb-cw-toggle { position: fixed !important; top: auto !important; bottom: 24px !important; right: 22px !important; transform: none !important; } .rb-cw-toggle:hover { transform: scale(1.04) !important; } .rb-cw-panel { top: auto !important; bottom: 24px !important; transform: none !important; } @media (max-width: 640px) { .rb-cw-toggle { bottom: 12px !important; right: 12px !important; } .rb-cw-panel { bottom: 82px !important; } } /* Kontrast-Anpassung 01.08.2026 (Teil 2) Ergaenzt die Regeln oben um die Faelle, die erst im Seiteninhalt entstehen. Grundsatz: Orange bleibt als Flaeche erhalten (#F58220 / Hover #D9680F), nur die Schrift darauf wird dunkel. Orange als Schriftfarbe wird #B45309. Die Fusszeile bleibt unberuehrt - dort steht #F58220 auf #172236 = 6,14:1. */ /* Weitere Flaechen in Markenorange, auf denen weisse Schrift stand */ .rb-nav .rb-nav-cta, .rb-nav .rb-nav-cta:hover, .wpcf7 input[type="submit"], .wpcf7 input[type="submit"]:hover, button.cmplz-manage-consent, button.cmplz-manage-consent:hover { color: #0F172A !important; } /* ============================================================ TEIL 2 - frueher: Inline-Bloecke im WPCode-Kopf-Feld ============================================================ */ /* ===== rb-cls-kopfbereich-2026 ===== */ /* Platzreservierung fuer den Kopfbereich der Ratgeberuebersicht. Der Kopfbereich wird erst per Skript erzeugt (rb-blog-js-2026, Funktion insertHero) und vor
gesetzt. Ohne Reservierung rutschte der gesamte Inhalt beim Seitenaufbau um 430 bis 810 Pixel nach unten - gemessener Anteil an der Verschiebung: 0,178 von 0,232. Die Werte sind je Breite gemessen (gp\hero-fein2.ps1 und folgende). AENDERT SICH DER TEXT DES KOPFBEREICHS, MUESSEN SIE NEU GEMESSEN WERDEN. Der Kopfbereich ist durchsichtig; eine zu grosse Reservierung faellt daher nicht auf, eine zu kleine ergaebe wieder einen Sprung. */ html.rb-js body.blog #main{margin-top:814px;}html.rb-js body.blog .rb-blog-hero{min-height:814px;} @media (min-width:320px){html.rb-js body.blog #main{margin-top:766px;}html.rb-js body.blog .rb-blog-hero{min-height:766px;}} @media (min-width:340px){html.rb-js body.blog #main{margin-top:717px;}html.rb-js body.blog .rb-blog-hero{min-height:717px;}} @media (min-width:360px){html.rb-js body.blog #main{margin-top:685px;}html.rb-js body.blog .rb-blog-hero{min-height:685px;}} @media (min-width:390px){html.rb-js body.blog #main{margin-top:638px;}html.rb-js body.blog .rb-blog-hero{min-height:638px;}} @media (min-width:460px){html.rb-js body.blog #main{margin-top:605px;}html.rb-js body.blog .rb-blog-hero{min-height:605px;}} @media (min-width:470px){html.rb-js body.blog #main{margin-top:558px;}html.rb-js body.blog .rb-blog-hero{min-height:558px;}} @media (min-width:590px){html.rb-js body.blog #main{margin-top:511px;}html.rb-js body.blog .rb-blog-hero{min-height:511px;}} @media (min-width:620px){html.rb-js body.blog #main{margin-top:464px;}html.rb-js body.blog .rb-blog-hero{min-height:464px;}} @media (min-width:830px){html.rb-js body.blog #main{margin-top:448px;}html.rb-js body.blog .rb-blog-hero{min-height:448px;}} @media (min-width:970px){html.rb-js body.blog #main{margin-top:459px;}html.rb-js body.blog .rb-blog-hero{min-height:459px;}} @media (min-width:1051px){html.rb-js body.blog #main{margin-top:505px;}html.rb-js body.blog .rb-blog-hero{min-height:505px;}} @media (min-width:1280px){html.rb-js body.blog #main{margin-top:522px;}html.rb-js body.blog .rb-blog-hero{min-height:522px;}} @media (min-width:1440px){html.rb-js body.blog #main{margin-top:546px;}html.rb-js body.blog .rb-blog-hero{min-height:546px;}} @media (min-width:1600px){html.rb-js body.blog #main{margin-top:552px;}html.rb-js body.blog .rb-blog-hero{min-height:552px;}} /* Englisch: kuerzerer Text, daher unterhalb 470 Pixel flacher. */ @media (max-width:319px){html.rb-js[lang^="en"] body.blog #main{margin-top:719px;}html.rb-js[lang^="en"] body.blog .rb-blog-hero{min-height:719px;}} @media (min-width:320px) and (max-width:359px){html.rb-js[lang^="en"] body.blog #main{margin-top:686px;}html.rb-js[lang^="en"] body.blog .rb-blog-hero{min-height:686px;}} @media (min-width:360px) and (max-width:413px){html.rb-js[lang^="en"] body.blog #main{margin-top:638px;}html.rb-js[lang^="en"] body.blog .rb-blog-hero{min-height:638px;}} @media (min-width:414px) and (max-width:439px){html.rb-js[lang^="en"] body.blog #main{margin-top:591px;}html.rb-js[lang^="en"] body.blog .rb-blog-hero{min-height:591px;}} @media (min-width:440px) and (max-width:469px){html.rb-js[lang^="en"] body.blog #main{margin-top:558px;}html.rb-js[lang^="en"] body.blog .rb-blog-hero{min-height:558px;}} /* ===== rb-cls-blogliste-2026 ===== */ /* Verschiebungen beim Seitenaufbau der Ratgeberuebersicht. Gemessen ohne Anmeldung: /ratgeber/ 0,465 und die englische Fassung 0,642 - der Grenzwert liegt bei 0,1. Ursache war allein das nachtraegliche Ausblenden der Beitraege ab dem fuenften durch das Skript im Fussbereich. Dieselbe Auswahl wird hier vorweggenommen, damit die Beitraege gar nicht erst gezeichnet und dann entfernt werden. Die Zahl 5 entspricht dem Wert visibleCount = 4 im Skript. Werden dort mehr Beitraege sichtbar geschaltet, muss diese Regel mitgezogen werden. */ html.rb-js body.blog .site-main:not(.rb-alle-sichtbar) > article:nth-of-type(n+5), html.rb-js body.category .site-main:not(.rb-alle-sichtbar) > article:nth-of-type(n+5), html.rb-js body.search .site-main:not(.rb-alle-sichtbar) > article:nth-of-type(n+5), html.rb-js body.search-results .site-main:not(.rb-alle-sichtbar) > article:nth-of-type(n+5){display:none;} /* ===== rb-global-header-2026 ===== */ :root{--rb-orange:#f58220;--rb-orange-dark:#d9680f;--rb-orange-text:#b45309;--rb-navy:#0f172a;--rb-line:#e5e7eb} .site-header{background:#fff;border-top:4px solid var(--rb-orange);border-bottom:1px solid var(--rb-line);box-shadow:0 2px 14px rgba(15,23,42,.04)} .site-header .site-branding{display:none} .site-header .inside-header{width:min(1600px,calc(100% - clamp(48px,5vw,96px)));max-width:1600px;min-height:92px;margin:0 auto;padding:14px 0;display:flex;align-items:center;justify-content:space-between} .site-logo{margin:0!important;padding:0!important} .site-logo a{display:block;line-height:0} .site-logo img{width:210px;height:auto;max-height:none} .main-navigation,.main-navigation .inside-navigation{background:#fff} .main-navigation{margin-left:auto!important} .main-navigation .inside-navigation{max-width:none;margin:0;padding:0} .main-navigation .main-nav ul li a{color:var(--rb-navy);font-size:15px;font-weight:650;line-height:48px;padding:0 13px} .main-navigation .main-nav ul li a:hover{color:var(--rb-orange-text,#b45309);background:#fff4e8;border-radius:8px} .main-navigation .main-nav ul li a:focus-visible{color:var(--rb-orange-text,#b45309);background:#fff4e8;border-radius:8px;outline:2px solid var(--rb-orange);outline-offset:2px} .main-navigation .main-nav ul li[class*="current-menu-"]>a{color:var(--rb-orange-text,#b45309);background:transparent;box-shadow:inset 0 -2px 0 var(--rb-orange)} .main-navigation .main-nav>ul>li:last-child>a{color:#fff;background:var(--rb-orange);border-radius:9px;line-height:44px;margin:2px 0 2px 10px;padding:0 18px;box-shadow:0 6px 16px rgba(245,130,32,.22)} .main-navigation .main-nav>ul>li:last-child>a:hover{color:#fff;background:var(--rb-orange-dark)} body.page-id-10022 .rb-assessment-page .rb-buttons, body.page-id-10458 .rb-assessment-page .rb-buttons{gap:16px;margin-top:36px} body.page-id-10022 .rb-assessment-page .rb-button-primary, body.page-id-10022 .rb-assessment-page .rb-button-secondary, body.page-id-10458 .rb-assessment-page .rb-button-primary, body.page-id-10458 .rb-assessment-page .rb-button-secondary{min-height:64px;padding:18px 30px;border-radius:12px;font-size:17px;line-height:1.25;font-weight:750} body.page-id-10022 .rb-assessment-page .rb-button-primary, body.page-id-10458 .rb-assessment-page .rb-button-primary{box-shadow:0 12px 28px rgba(245,130,32,.24)} body.page-id-10022 .rb-assessment-page .rb-button-secondary, body.page-id-10458 .rb-assessment-page .rb-button-secondary{border-width:1.5px} @media (min-width:1240px){ .main-navigation .main-nav ul ul{width:300px;padding:10px;background:#fff;border:1px solid var(--rb-line);border-radius:12px;box-shadow:0 18px 40px rgba(15,23,42,.14)} .main-navigation .main-nav ul ul li{background:transparent} .main-navigation .main-nav ul ul li a{font-size:14px;line-height:1.35;padding:12px 14px;border-radius:8px} .main-navigation .main-nav ul ul li a:hover,.main-navigation .main-nav ul ul li.sfHover>a{background:#fff4e8;color:var(--rb-orange-text,#b45309)} .main-navigation .main-nav ul ul ul{top:-10px} } @media (max-width:1239.98px){ .menu-toggle{color:var(--rb-navy);background:#fff;min-height:44px;padding:0 12px;font-weight:700} .main-navigation.toggled .main-nav>ul{background:#fff;border-top:1px solid var(--rb-line);padding:8px 16px 16px} .main-navigation .main-nav ul li a{line-height:46px;padding:0 12px} .main-navigation .main-nav>ul>li:last-child{text-align:left}.main-navigation .main-nav>ul>li:last-child>a{display:inline-block;width:auto;text-align:center;margin:10px 0 6px 12px;line-height:40px;padding:0 24px;border-radius:8px;box-shadow:0 4px 12px rgba(245,130,32,.2)} } @media (max-width:768px){ .site-header .inside-header{width:100%;min-height:74px;padding:10px 18px} .site-logo img{width:170px} } @media (max-width:700px){ body.page-id-10022 .rb-assessment-page .rb-buttons, body.page-id-10458 .rb-assessment-page .rb-buttons{gap:12px;margin-top:30px} body.page-id-10022 .rb-assessment-page .rb-button-primary, body.page-id-10022 .rb-assessment-page .rb-button-secondary, body.page-id-10458 .rb-assessment-page .rb-button-primary, body.page-id-10458 .rb-assessment-page .rb-button-secondary{width:100%;min-height:56px;padding:15px 20px;font-size:16px} } .main-navigation .main-nav ul li:hover>a, .main-navigation .main-nav ul li.sfHover>a, .main-navigation .main-nav ul li>a:hover, .main-navigation .main-nav ul li>a:focus{color:var(--rb-orange-text,#b45309)!important;background:#fff4e8!important} .main-navigation .main-nav>ul>li:last-child:hover>a, .main-navigation .main-nav>ul>li:last-child.sfHover>a, .main-navigation .main-nav>ul>li:last-child>a:hover, .main-navigation .main-nav>ul>li:last-child>a:focus{color:#fff!important;background:var(--rb-orange-dark)!important} @media (min-width:1240px){ .main-navigation .main-nav ul ul li:hover>a, .main-navigation .main-nav ul ul li.sfHover>a, .main-navigation .main-nav ul ul li>a:hover, .main-navigation .main-nav ul ul li>a:focus{color:var(--rb-orange-text,#b45309)!important;background:#fff4e8!important} } /* ===== rb-smooth-hover-2026 ===== */ html{scroll-behavior:smooth;} .rb-card,.rb-quicklink{transition:transform .25s ease, box-shadow .25s ease;} .rb-card:hover,.rb-quicklink:hover{transform:translateY(-4px) !important;box-shadow:0 16px 32px rgba(15,23,42,.12) !important;} .rb-button-primary,.rb-button-secondary{transition:transform .2s ease, box-shadow .2s ease;} .rb-button-primary:hover,.rb-button-secondary:hover{transform:translateY(-2px) !important;} .rb-button-primary:hover{box-shadow:0 10px 22px rgba(245,130,32,.28);} .rb-button-secondary:hover{box-shadow:0 8px 18px rgba(15,23,42,.10);} .rb-text-link{transition:transform .2s ease;} .rb-text-link:hover{transform:translateX(3px) !important;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .rb-card,.rb-quicklink,.rb-button-primary,.rb-button-secondary,.rb-text-link{transition:none;} .rb-card:hover,.rb-quicklink:hover,.rb-button-primary:hover,.rb-button-secondary:hover,.rb-text-link:hover{transform:none;} } /* ===== rb-scroll-progress-2026 ===== */ #rb-scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg, var(--rb-orange,#f58220), var(--rb-orange-dark,#d9680f));z-index:99999;transition:width .12s ease-out;} body.admin-bar #rb-scroll-progress{top:32px;} @media screen and (max-width:782px){ body.admin-bar #rb-scroll-progress{top:46px;} } @media (prefers-reduced-motion: reduce){ #rb-scroll-progress{transition:none;} } /* ===== rb-hero-spotlight-global-2026 ===== */ .rb-hero, .rb-404-hero, .rb-blog-hero{position:relative;overflow:hidden;} .rb-hero-spotlight{position:absolute;top:0;left:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;background:radial-gradient(circle, rgba(245,130,32,0.16), rgba(245,130,32,0.05) 45%, transparent 70%);pointer-events:none;opacity:0;transform:translate3d(0,0,0);transition:opacity .4s ease;z-index:0;} .rb-hero-spotlight.is-active{opacity:1;} @media (prefers-reduced-motion: reduce){ .rb-hero-spotlight{display:none;} } /* ===== rb-blog-2026 ===== */ body.blog .widget-area.sidebar, body.single-post .widget-area.sidebar, body.search .widget-area.sidebar, body.category .widget-area.sidebar{display:none;} body.blog .site-content, body.single-post .site-content, body.search .site-content, body.category .site-content{justify-content:center;} body.blog #main.site-main, body.single-post #main.site-main, body.search #main.site-main, body.category #main.site-main{margin-left:auto;margin-right:auto;} body.single-post #main.site-main{max-width:820px;margin:0 auto;float:none;width:100%;padding:0 20px 60px;} body.blog #main.site-main, body.search #main.site-main, body.category #main.site-main{width:min(1200px, 100% - clamp(48px,5vw,96px));max-width:none;margin:0 auto;float:none;padding:0 0 60px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,800px) minmax(260px,1fr);justify-content:start;gap:48px;align-items:start;} body.blog .rb-breadcrumb{display:none;} @media (max-width:900px){body.blog #main.site-main, body.search #main.site-main, body.category #main.site-main{grid-template-columns:1fr;gap:0;}} body.search .page-header, body.category .page-header{display:none;} body.blog, body.single-post, body.search-results, body.search, body.category{background:#fff;} .rb-blog-hero{background:transparent;padding:90px 0 80px;margin-bottom:0;box-sizing:border-box;position:relative;} @media (min-width:1051px){.rb-blog-hero{padding:110px 0 100px;}body.blog,body.category,body.search,body.search-results{font-size:19px;}} html{overflow-x:hidden;} .rb-blog-hero-inner{max-width:none;margin:0;padding:0;} .rb-blog-kicker{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:780;letter-spacing:.11em;text-transform:uppercase;color:var(--rb-orange-text,#b45309);margin-bottom:22px;} .rb-blog-kicker::before{content:"";width:28px;height:3px;background:var(--rb-orange,#f58220);display:inline-block;} .rb-blog-title{font-size:clamp(42px,5.2vw,66px);font-weight:760;color:var(--rb-navy,#0f172a);margin:0 0 16px;line-height:1.12;letter-spacing:-.025em;max-width:900px;} .rb-blog-lead{font-size:21px;line-height:1.55;color:#4b5563;margin:0 0 28px;max-width:820px;} @media (min-width:1051px){ .rb-blog-title{font-size:clamp(54px,4.6vw,76px);max-width:1080px;} .rb-blog-lead{font-size:23px;max-width:960px;} } .rb-blog-cats{display:flex;flex-wrap:wrap;gap:10px;margin:0;} .rb-blog-cat-pill{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--rb-line,#e5e7eb);font-size:14px;font-weight:600;color:#4b5563;text-decoration:none;transition:all .15s ease;} .rb-blog-cat-pill:hover{border-color:var(--rb-orange,#f58220);color:var(--rb-orange-text,#b45309);} .rb-blog-cat-pill.is-active{background:var(--rb-orange,#f58220);border-color:var(--rb-orange,#f58220);color:#fff;}body.blog article.post, body.search article.post, body.category article.post{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:32px;margin-bottom:0;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;display:flex;flex-direction:column;} body.blog article.post::before, body.blog article[class*="post-"]::before, body.search article.post::before, body.search article[class*="post-"]::before, body.category article.post::before, body.category article[class*="post-"]::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--rb-orange,#f58220), var(--rb-orange-dark,#d9680f));} body.blog article.post:hover, body.search article.post:hover, body.category article.post:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(15,23,42,.10);} .rb-cat-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rb-orange-text,#b45309);background:var(--rb-orange-soft,#fff4e8);padding:5px 12px;border-radius:6px;margin-bottom:14px;text-decoration:none;} .rb-cat-badge:hover{background:var(--rb-orange,#f58220);color:#fff;} body.blog .entry-title, body.search .entry-title, body.category .entry-title{font-size:24px;font-weight:700;color:var(--rb-navy,#0f172a);margin:0 0 10px;} body.blog .entry-title a, body.search .entry-title a, body.category .entry-title a{color:inherit;text-decoration:none;} body.blog .entry-title a:hover, body.search .entry-title a:hover, body.category .entry-title a:hover{color:var(--rb-orange-text,#b45309);} body.blog .entry-meta, body.search .entry-meta, body.category .entry-meta{font-size:13px;color:#9ca3af;margin-bottom:14px;text-transform:uppercase;letter-spacing:.04em;} body.blog .entry-summary p, body.blog .entry-content p, body.search .entry-summary p, body.category .entry-summary p{font-size:16px;line-height:1.7;color:#4b5563;} /* Verweis am Auszugsende auf die Markenfarbe. Vorher WordPress-Standardblau #1E73BE (4,58:1). Jetzt #B45309 (5,02:1) wie im Fliesstext. Die Unterstreichung bleibt, damit der Verweis nicht allein an der Farbe erkennbar ist (WCAG 1.4.1). */ .entry-summary a{color:var(--rb-orange-text,#b45309);font-weight:600;text-decoration:underline;} body.blog .read-more, body.blog a.more-link, body.search .read-more, body.category .read-more, body.search a.more-link, body.category a.more-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--rb-orange-text,#b45309);text-decoration:none;margin-top:8px;} body.blog .read-more:hover, body.blog a.more-link:hover, body.search .read-more:hover, body.category .read-more:hover{color:var(--rb-orange-text,#b45309);} body.single-post .entry-header{max-width:760px;margin:48px auto 0;padding:0 20px;} body.single-post .entry-title{font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--rb-navy,#0f172a);line-height:1.2;margin:0 0 14px;} body.single-post .entry-meta{font-size:13px;color:#9ca3af;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;} body.single-post .entry-content{max-width:760px;margin:24px auto 60px;padding:0 20px;font-size:17px;line-height:1.75;color:#374151;} body.single-post .entry-content h2{font-size:26px;font-weight:700;color:var(--rb-navy,#0f172a);margin:40px 0 16px;} body.single-post .entry-content h3{font-size:21px;font-weight:700;color:var(--rb-navy,#0f172a);margin:32px 0 12px;} body.single-post .entry-content p{margin:0 0 18px;} body.single-post .entry-content ul, body.single-post .entry-content ol{margin:0 0 18px;padding-left:22px;} body.single-post .entry-content li{margin-bottom:8px;line-height:1.65;} body.single-post .entry-content a{color:var(--rb-orange-text,#b45309);text-decoration:underline;} body.single-post .entry-content strong{color:var(--rb-navy,#0f172a);} .rb-blog-back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:#6b7280;text-decoration:none;} .rb-blog-back:hover{color:var(--rb-orange-text,#b45309);} /* ===== rb-home-ratgeber-css-2026 ===== */ .rb-home-ratgeber{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;} .rb-home-ratgeber-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:24px;} .rb-home-ratgeber-kicker{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rb-orange-text,#b45309);margin-bottom:4px;} .rb-home-ratgeber-title{font-size:22px;font-weight:600;color:#111827;margin:0;} .rb-home-ratgeber-all{font-size:14px;font-weight:600;color:var(--rb-orange-text,#b45309);text-decoration:none;white-space:nowrap;} .rb-home-ratgeber-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;} .rb-home-ratgeber-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;position:relative;transition:transform .2s ease, box-shadow .2s ease;} .rb-home-ratgeber-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.06);} .rb-home-ratgeber-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--rb-orange,#f58220), var(--rb-orange-dark,#d9680f));} .rb-home-ratgeber-card-body{padding:24px 24px 20px;} .rb-home-ratgeber-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--rb-orange-text,#b45309);background:var(--rb-orange-soft,#fff4e8);padding:5px 12px;border-radius:6px;margin-bottom:12px;} .rb-home-ratgeber-card-title{display:block;font-size:17px;font-weight:600;color:#111827;line-height:1.4;margin-bottom:10px;text-decoration:none;} .rb-home-ratgeber-card-excerpt{font-size:14px;color:#6b7280;line-height:1.6;margin-bottom:12px;} .rb-home-ratgeber-card-link{font-size:14px;font-weight:600;color:var(--rb-orange-text,#b45309);text-decoration:none;} @media (max-width:640px){.rb-home-ratgeber{padding:32px 20px 44px;}} /* ===== rb-uniform-card-hover-2026 ===== */ .rb-auto-card{transition:transform .25s ease, box-shadow .25s ease, background-color .25s ease;} .rb-auto-card:hover{transform:translateY(-4px) !important;box-shadow:0 16px 32px rgba(15,23,42,.12) !important;background-color:var(--rb-orange-soft,#fff4e8) !important;} .rb-auto-card-dark{transition:transform .25s ease, box-shadow .25s ease;} .rb-auto-card-dark:hover{transform:translateY(-4px) !important;box-shadow:0 16px 32px rgba(0,0,0,.35) !important;} @media (prefers-reduced-motion: reduce){ .rb-auto-card,.rb-auto-card-dark{transition:none;} .rb-auto-card:hover,.rb-auto-card-dark:hover{transform:none !important;} } /* ===== rb-blog-sidebar-2026 ===== */ body.blog article.post, body.search article.post, body.category article.post{grid-column:1;} .rb-blog-sidebar{grid-column:2;grid-row:1 / -1;display:flex;flex-direction:column;gap:24px;height:0;min-height:0;overflow:visible;align-self:start;} .rb-blog-sidebar-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px;} .rb-blog-sidebar-card h3{font-size:13px;font-weight:700;color:#111827;margin:0 0 14px;text-transform:uppercase;letter-spacing:.06em;} .rb-blog-sidebar-catlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;} .rb-blog-sidebar-catlist li a{display:block;padding:9px 10px;border-radius:8px;color:#4b5563;text-decoration:none;font-size:14px;font-weight:600;transition:background .15s ease, color .15s ease;} .rb-blog-sidebar-catlist li a:hover{background:var(--rb-orange-soft,#fff4e8);color:var(--rb-orange-text,#b45309);} .rb-blog-sidebar-cta{background:var(--rb-orange-soft,#fff4e8);border:1px solid #f3d9bd;border-radius:16px;padding:24px;} .rb-blog-sidebar-cta h3{font-size:15px;font-weight:700;color:#111827;margin:0 0 10px;text-transform:none;letter-spacing:0;} .rb-blog-sidebar-cta p{font-size:13.5px;color:#4b5563;line-height:1.55;margin:0 0 16px;} .rb-blog-sidebar-cta a.rb-blog-sidebar-btn{display:inline-block;background:var(--rb-orange,#f58220);color:#fff;font-size:13.5px;font-weight:700;padding:10px 18px;border-radius:8px;text-decoration:none;} .rb-blog-sidebar-cta a.rb-blog-sidebar-btn:hover{background:var(--rb-orange-dark,#d9680f);} @media (max-width:900px){.rb-blog-sidebar{display:none;}} /* ===== rb-contact-widget-global-2026 ===== */ .rb-cw-toggle{position:fixed;z-index:9992;right:22px;top:50%;transform:translateY(-50%);width:62px;height:62px;border:0;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;background:var(--rb-orange,#f58220);color:#fff;cursor:pointer;box-shadow:0 12px 30px rgba(31,41,55,.22);transition:.2s;} .rb-cw-toggle:hover{background:var(--rb-orange-dark,#d9680f);transform:translateY(-50%) scale(1.04);} .rb-cw-toggle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .rb-cw-panel{position:fixed;z-index:9991;right:100px;top:50%;transform:translateY(-50%);width:min(340px, 100vw - 130px);max-height:calc(100vh - 48px);overflow:auto;padding:24px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;box-shadow:0 24px 60px rgba(17,24,39,.2);box-sizing:border-box;} .rb-cw-panel[hidden]{display:none;} .rb-cw-close{position:absolute;right:13px;top:12px;width:34px;height:34px;border:0;border-radius:9px;background:#f7f8fa;color:#111827;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;} .rb-cw-kicker{display:block;color:var(--rb-orange-text,#b45309);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;} .rb-cw-panel h2{font-size:21px;margin:0 38px 10px 0;color:#111827;} .rb-cw-panel p{font-size:14px;line-height:1.5;color:#6b7280;margin:0 0 18px;} .rb-cw-btn{display:block;background:var(--rb-orange,#f58220);color:#fff;font-size:14px;font-weight:700;padding:12px 20px;border-radius:10px;text-decoration:none;text-align:center;box-sizing:border-box;} .rb-cw-btn:hover{background:var(--rb-orange-dark,#d9680f);} .rb-cw-email{display:block;margin-top:14px;color:var(--rb-orange-text,#b45309);font-size:12px;font-weight:700;text-align:center;text-decoration:none;} @media (max-width:640px){.rb-cw-toggle{right:14px;width:52px;height:52px;}.rb-cw-toggle svg{width:24px;height:24px;}.rb-cw-panel{right:14px;left:14px;width:auto;}} /* ===== rb-contact-widget-form-2026 ===== */ .rb-cw-panel .wpcf7{margin-top:12px;} .rb-cw-panel .rb-cf7-grid{display:grid;grid-template-columns:1fr;gap:10px;} .rb-cw-panel .rb-field{display:block;margin:0;color:#111827;font-size:13px;font-weight:700;} .rb-cw-panel .rb-field > span:first-child{display:block;margin-bottom:4px;} .rb-cw-panel .wpcf7-form-control-wrap{display:block;} .rb-cw-panel input[type="text"], .rb-cw-panel input[type="email"], .rb-cw-panel textarea{width:100%;padding:9px 11px;border:1px solid #d7dde5;border-radius:9px;font-size:14px;background:#fff;box-sizing:border-box;} .rb-cw-panel textarea{max-height:150px;resize:vertical;height:88px;min-height:88px;} .rb-cw-panel .rb-consent{font-size:11px;line-height:1.35;color:#6b7280;} .rb-cw-panel .rb-consent label{display:flex;align-items:flex-start;gap:7px;} .rb-cw-panel .rb-consent input{width:17px;height:17px;margin:1px 0 0;accent-color:var(--rb-orange,#f58220);flex:0 0 17px;} .rb-cw-panel .rb-consent a{color:var(--rb-orange-text,#b45309);font-weight:700;} .rb-cw-panel input[type="submit"]{width:100%;background:var(--rb-orange,#f58220);border:0;border-radius:9px;color:#fff;cursor:pointer;font-size:14px;font-weight:700;padding:11px 16px;} .rb-cw-panel input[type="submit"]:hover{background:var(--rb-orange-dark,#d9680f);} .rb-cw-panel .wpcf7-response-output{border-radius:9px;font-size:12px;margin:10px 0 0 !important;padding:9px 11px !important;} /* ===== rb-blog-loadmore-css-2026 ===== */ .rb-load-more-wrap{grid-column:1;text-align:center;margin:8px 0 0;} .rb-load-more-btn{display:inline-block;background:var(--rb-orange,#f58220);color:#fff;font-size:14px;font-weight:700;padding:12px 28px;border-radius:8px;border:none;cursor:pointer;transition:background .2s;} .rb-load-more-btn:hover{background:var(--rb-orange-dark,#d9680f);} /* ===== rb-honeypot-2026 ===== */ /* Honigtopf gegen Spam-Roboter. Seit dem 01.08.2026 traegt das Feld eine echte Beschriftung, damit Screenreader-Nutzer erfahren, dass sie es leer lassen sollen (Gesamtpruefung 31.07.2026, Befund F-17, Stufe kritisch). Verborgen wird deshalb das gesamte Label und nicht mehr nur das Eingabefeld - sonst stuende der Hinweistext sichtbar im Formular. Bewusst per Verschiebung aus dem Sichtfeld und nicht per display:none, damit Hilfsmittel den Text weiterhin vorlesen koennen. */ .rb-hp-label, .wpcf7-form-control-wrap[data-name="rb-hp-field"]{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;} /* Contact Form 7 setzt hinter jedes Feld ein
. Nach dem nun verborgenen Label erzeugte das eine leere Zeile im Formularraster. */ .rb-hp-label + br{display:none;} /* ===== rb-kontrast-2026 ===== */ /* Kontrast-Fix 01.08.2026, Befund B-08/B-09 der Gesamtpruefung. Leitregel: Orange als FLAECHE ist #f59638 - die Schrift darauf wird dunkel (7,91:1). (Bis zum 02.08.2026 stand hier #f58220 mit 6,88:1. Am 03.08.2026 ueber alle 56 Seiten nachgemessen: 300 orange Schaltflaechen, ausnahmslos #f59638. #f58220 kommt nur noch am Complianz-Knopf "Einstellungen speichern" als Rahmenfarbe vor.) Orange als TEXT wird #b45309 (5,02:1 auf Weiss, 4,73:1 auf #f7f8fa, 4,63:1 auf #fff4e8). Entspricht "brand-orange-text" bzw. "brand-orange-text-hover" aus design-tokens.json - NICHT der Flaechenwert. Warum ohne !important: Die Seiteninhalte setzen --orange-dark auf ihrem Wrapper (z.B. .rb-company-page, Spezifitaet 0,1,0). Die beiden Attributselektoren hier ergeben 0,2,0 und gewinnen deshalb regulaer. */ [class*="rb-"][class*="-page"]{--orange-dark:#b45309} /* Die Hover-FUELLUNGEN sollen Marken-Orange bleiben und duerfen die neue Textfarbe nicht uebernehmen. Dunkle Schrift darauf ergibt 5,05:1 - damit bleibt die Schriftfarbe des Knopfes in beiden Zustaenden gleich. */ [class*="rb-"][class*="-page"] .rb-button-primary:hover, [class*="rb-"][class*="-page"] .rb-nav .rb-nav-cta:hover, [class*="rb-"][class*="-page"] input[type="submit"]:hover, [class*="rb-"][class*="-page"] button.cmplz-manage-consent:hover, [class*="rb-"][class*="-page"] a.cmplz-manage-consent:hover, [class*="rb-"][class*="-page"] #cmplz-manage-consent-container button:hover, [class*="rb-"][class*="-page"] #cmplz-manage-consent-container a:hover{ background:#d9680f;color:#0f172a} [class*="rb-"][class*="-page"] .rb-contact-widget-toggle:hover{background:#d9680f} /* Glyphen, die im Seiteninhalt als color:var(--orange) gesetzt sind (Haken, Plus im Akkordeon, Aufzaehlungszeichen). #f58220 erreicht dort nur 2,59:1 auf Weiss und 2,39:1 auf #fff4e8. */ [class*="rb-"][class*="-page"] summary:after, [class*="rb-"][class*="-page"] .rb-faq summary:after, [class*="rb-"][class*="-page"] .rb-step:before, [class*="rb-"][class*="-page"] .rb-audience-item:before, [class*="rb-"][class*="-page"] .rb-audience:before, [class*="rb-"][class*="-page"] .rb-security-card li:before{color:#b45309} /* ===== rb-kontrast-teil2-2026 ===== */ /* Kontrast-Fix 01.08.2026, Teil 2. Befund B-08/B-09 der Gesamtpruefung. Warum dieser Block noetig ist: Im Customizer unter "Zusaetzliches CSS" (wp-custom-css) stehen Farbregeln mit !important. Dieses Feld liegt im Dokument NACH dem Kopfbereich und laesst sich ueber die Oberflaeche derzeit nicht speichern - der AJAX-Aufruf bleibt haengen. Deshalb werden die betroffenen Regeln hier uebersteuert. Warum "html body" davor steht: Bei !important gegen !important entscheidet zuerst die Spezifitaet, erst danach die Reihenfolge. "html body .rb-eyebrow" ergibt (0,1,2) und schlaegt damit ".rb-eyebrow" (0,1,0) aus wp-custom-css, obwohl es frueher im Dokument steht. Leitregel wie in Teil 1: Orange als FLAECHE bleibt #f58220 (Hover #d9680f), die Schrift darauf wird dunkel #0f172a - 6,88:1 bzw. 5,05:1. Orange als TEXT wird #b45309 - 5,02:1 auf Weiss. Die Fusszeile bleibt unberuehrt: dort steht #f58220 auf #172236 = 6,14:1. */ /* --- Flaechen in Markenorange: Schrift dunkel statt weiss --- */ html body .rb-button-primary, html body .rb-button-primary a, html body a.rb-button-primary, html body .rb-button-primary:hover, html body .rb-button-primary:focus, html body a.rb-button-primary:hover, html body a.rb-button-primary:focus, html body .rb-contact-widget-toggle, html body .rb-contact-widget-toggle:hover, html body .rb-cw-toggle, html body .rb-cw-toggle:hover, html body .rb-cw-btn, html body .rb-cw-btn:hover, html body .rb-load-more-btn, html body .rb-load-more-btn:hover, html body .rb-blog-cat-pill.is-active, html body .rb-cat-badge:hover, html body .rb-blog-sidebar-cta a.rb-blog-sidebar-btn, html body .rb-blog-sidebar-cta a.rb-blog-sidebar-btn:hover, html body .rb-nav .rb-nav-cta, html body .rb-nav .rb-nav-cta:hover, html body .main-navigation .main-nav > ul > li:last-child > a, html body .main-navigation .main-nav > ul > li:last-child > a:hover, html body .rb-cw-panel input[type="submit"], html body .rb-cw-panel input[type="submit"]:hover, html body .rb-contact-widget-panel input[type="submit"], html body .rb-contact-widget-panel input[type="submit"]:hover, html body .wpcf7 input[type="submit"], html body .wpcf7 input[type="submit"]:hover, html body button.cmplz-manage-consent, html body button.cmplz-manage-consent:hover, html body a.cmplz-manage-consent, html body a.cmplz-manage-consent:hover { color: #0f172a !important; } /* --- Orange als Schriftfarbe: #b45309 statt #f58220 / #d9680f / #e26d0a --- */ html body .rb-eyebrow, html body .rb-card-icon, html body .rb-contact-widget-kicker, html body .rb-cw-kicker, html body .rb-contact-widget-panel .rb-consent a, html body .rb-cw-panel .rb-consent a { color: #b45309 !important; } /* Auswahlhaken im Einwilligungsfeld: #f58220 erreicht auf Weiss nur 2,59:1 */ html body .rb-contact-widget-panel .rb-consent input, html body .rb-cw-panel .rb-consent input, html body .wpcf7-list-item input[type="checkbox"] { accent-color: #b45309; } /* ===== rb-kontrast-teil3-2026 ===== */ /* Kontrast-Fix 01.08.2026, Teil 3. Ergebnis der Nachmessung ueber alle 56 Seiten. Nach Teil 1 und 2 waren von ursprünglich 756 Beanstandungen noch 184 uebrig. Dieser Block schliesst sie. Jeder Wert ist nachgerechnet (WCAG 2.1, Formel (L_hell+0,05)/(L_dunkel+0,05)), der Grenzwert ist 4,5:1 fuer normale und 3:1 fuer grosse Schrift (ab 24px, oder ab 18,66px bei Fettung). */ /* 1) .rb-eyebrow: #b45309 aus Teil 2 reicht auf dem hellblauen Abschnitt #eaf0f6 nur fuer 4,37:1 - knapp daneben. #974608 ergibt dort 5,72:1 und auf allen uebrigen Untergruenden mindestens 5,9:1. */ html body .rb-eyebrow { color: #974608 !important; } /* 2) WICHTIG - Rueckkorrektur eines eigenen Fehlers: Auf der dunklen Karte (.rb-dark-panel, Verlauf #31445d -> #26384f) hatte Teil 2 die Augenbraue auf #b45309 gesetzt. Das ergibt dort nur 1,98:1 und war schlechter als der Ausgangszustand (3,83:1). Dort gehoert das helle Orange hin, das die Karte fuer ihre Verweise ohnehin schon verwendet: #ffb36f = 5,64:1 auf #31445d, 6,77:1 auf #26384f. */ html body .rb-dark-panel .rb-eyebrow, html body .rb-hero-card .rb-eyebrow, html body .rb-security-card .rb-eyebrow, html body .rb-form-card .rb-eyebrow, html body .rb-contact-card .rb-eyebrow, html body .rb-person-card .rb-eyebrow, html body .rb-cta-dark .rb-eyebrow { color: #ffb36f !important; } /* 3) Weitere Flaechen in Markenorange, die Teil 2 noch nicht erfasst hatte. Weiss auf #f58220 ergibt 2,59:1, dunkel darauf 6,88:1. */ html body .rb-hero-icon, html body .rb-shield, html body .rb-profile-mark, html body .rb-404-cta a, html body button.cmplz-btn.cmplz-accept, html body button.cmplz-btn.cmplz-accept:hover { color: #0f172a !important; } /* 4) Kleine Ueberschrift der 404-Seite stand noch in #f58220 (2,59:1). */ html body .rb-404-kicker { color: #974608; } /* 5) Die grosse Ziffernfolge "404" ist Verlaufstext (background-clip:text). Der Verlauf lief von #f58220 nach #d9680f - auf Weiss 2,59:1 bzw. 3,54:1. Neuer Verlauf: 5,02:1 bis 6,57:1. Die Form bleibt unveraendert. */ html body .rb-404-number { background-image: linear-gradient(135deg, #b45309, #974608); } /* 6) Zeitangaben, Autorenzeile und der Trennstrich des Sprachumschalters standen in #9ca3af - auf Weiss nur 2,54:1. #6b7280 ergibt 4,83:1. Das betrifft rund die Haelfte aller verbliebenen Beanstandungen. */ html body .entry-meta, html body .entry-meta a, html body .entry-meta .byline, html body .entry-meta .posted-on, html body .entry-meta .posted-on time, html body .entry-meta time.entry-date, html body .entry-meta .cat-links, html body .rb-lang-toggle > span, html body .rb-blog-meta, html body .rb-post-meta { color: #6b7280 !important; } /* 7) Der Textblock im Abschluss-Feld steht auf #fff1e2. Dort ergibt die allgemeine Nebentextfarbe #667085 nur 4,48:1 - zwei Hundertstel unter dem Grenzwert. Auf Weiss besteht sie (4,97:1), deshalb wird nur dieses eine Feld angepasst: #5d6678 ergibt hier 5,21:1. */ html body .rb-cta-panel p, html body .rb-cta-panel span, html body .rb-cta-panel .rb-contact-meta span, html body .rb-cta-panel .rb-cta-person p { color: #5d6678 !important; } /* 8) Die Ziffern der Ablaufliste in der dunklen Karte sitzen in einem Kreis mit rgba(245,130,32,.28). Ueber dem Verlauf ergibt das gemischt #68554c; die bisherige Ziffernfarbe #ffad65 kommt darauf nur auf 3,82:1. #ffd1a3 ergibt 4,98:1 und bleibt im gleichen Farbton. */ html body .rb-hero-path li span, html body .rb-hero-path > li > span { color: #ffd1a3 !important; } /* 9) Die Rechtsseiten setzen den Einwilligungsknopf im eigenen Seiteninhalt auf weisse Schrift: ".rb-legal-page button.cmplz-manage-consent" hat mit (0,2,1) eine hoehere Spezifitaet als der Nachtrag aus Teil 2 (0,1,2) und hat ihn deshalb ueberstimmt. Mit dem Seitenwrapper davor sind es (0,2,3). */ html body .rb-legal-page button.cmplz-manage-consent, html body .rb-legal-page button.cmplz-manage-consent:hover, html body .rb-legal-page a.cmplz-manage-consent, html body .rb-legal-page a.cmplz-manage-consent:hover, html body .rb-legal-page #cmplz-manage-consent-container button, html body .rb-legal-page #cmplz-manage-consent-container a, html body .rb-legal-page .rb-consent-box button.cmplz-manage-consent { color: #0f172a !important; } /* ===== rb-logo-orange-2026 ===== */ /* Markenfarbe aus der Logo-Quelldatei. Flaechen und dekorative Linien: #F59638. Text auf Markenflaechen bleibt #0F172A; Orange als Text bleibt dunkler. */ :root { --rb-orange: #F59638; } [class*="rb-"][class*="-page"] { --orange: #F59638; --rb-orange: #F59638; } /* Schaltflaechen im Ruhezustand */ html body .rb-button-primary, html body .rb-button-primary a, html body a.rb-button-primary, html body .rb-contact-widget-toggle, html body .rb-cw-toggle, html body .rb-cw-btn, html body .rb-finder-result-link, html body .rb-load-more-btn, html body .rb-blog-cat-pill.is-active, html body .rb-blog-sidebar-cta a.rb-blog-sidebar-btn, html body .rb-nav .rb-nav-cta, html body .main-navigation .main-nav > ul > li:last-child > a, html body .rb-cw-panel input[type="submit"], html body .rb-contact-widget-panel input[type="submit"], html body .rb-contact-page input[type="submit"], html body .wpcf7 input[type="submit"], html body button.cmplz-manage-consent, html body a.cmplz-manage-consent, html body #cmplz-manage-consent-container button, html body #cmplz-manage-consent-container a, html body button.cmplz-btn.cmplz-accept, html body .rb-404-cta a { background-color: #F59638 !important; border-color: #F59638 !important; color: #0F172A !important; } /* Interaktive Zustaende bleiben bewusst dunkler. */ html body .rb-button-primary:hover, html body .rb-button-primary a:hover, html body a.rb-button-primary:hover, html body .rb-contact-widget-toggle:hover, html body .rb-cw-toggle:hover, html body .rb-cw-btn:hover, html body .rb-finder-result-link:hover, html body .rb-load-more-btn:hover, html body .rb-blog-sidebar-cta a.rb-blog-sidebar-btn:hover, html body .rb-nav .rb-nav-cta:hover, html body .main-navigation .main-nav > ul > li:last-child > a:hover, html body .main-navigation .main-nav > ul > li:last-child > a:focus, html body .rb-cw-panel input[type="submit"]:hover, html body .rb-contact-widget-panel input[type="submit"]:hover, html body .rb-contact-page input[type="submit"]:hover, html body .wpcf7 input[type="submit"]:hover, html body button.cmplz-manage-consent:hover, html body a.cmplz-manage-consent:hover, html body #cmplz-manage-consent-container button:hover, html body #cmplz-manage-consent-container a:hover, html body button.cmplz-btn.cmplz-accept:hover, html body .rb-404-cta a:hover { background-color: #D9680F !important; border-color: #D9680F !important; color: #0F172A !important; } html body .rb-cat-badge:hover { background-color: #F59638 !important; color: #0F172A !important; } /* Dekorative Akzentlinien */ html body .site-header, html body .rb-global-footer { border-top-color: #F59638; } html body #rb-scroll-progress, html body [class*="rb-"][class*="-page"] .rb-eyebrow::before, html body .rb-blog-kicker::before, html body .rb-home-ratgeber-card::before, html body .rb-assessment-page .rb-result::before, html body .rb-assessment-page .rb-security-card::before, html body .rb-assessment-page .rb-compare-card::after, html body .rb-contact-page .rb-form-card::before, html body .rb-company-page .rb-portrait-card::before, html body .rb-services-page .rb-finder::before, html body.blog article.post::before, html body.blog article[class*="post-"]::before, html body.search article.post::before, html body.search article[class*="post-"]::before, html body.category article.post::before, html body.category article[class*="post-"]::before { background: #F59638; } html body .main-navigation .main-nav ul li[class*="current-menu-"] > a { box-shadow: inset 0 -2px 0 #F59638; } html body [class*="rb-"][class*="-page"] .rb-cta-person { border-top-color: #F59638; } html body .rb-assessment-page .rb-kicker-box { border-left-color: #F59638; } /* ===== rb-references-cta-kontrast-2026 ===== */ html body .rb-references-page .rb-ref-links a:last-child { color: #0F172A; } /* ===== rb-fokusring-2026 ===== */ /* Fokusring, 01.08.2026. ---------------------------------------------------------------------- Befund: Die Seiteninhalte setzen durchgaengig .rb-XXX-page a:focus-visible{outline:3px solid rgba(245,130,32,.45)} Ueber Weiss gemischt ergibt das rgb(251,199,155) und damit 1,53:1 - der Ring ist also kaum zu sehen. WCAG 2.1 verlangt fuer Bedienelemente und ihre Zustandsanzeigen 3:1 (Erfolgskriterium 1.4.11, "Non-text Contrast"). Gemessen mit echten Tab-Tastendruecken; ein programmatisches el.focus() loest :focus-visible nicht zuverlaessig aus und meldet faelschlich "kein Ring". Warum hier und nicht an der Quelle: Die Regel steht im Inhalt jeder einzelnen Seite (rund 30 Fundstellen). Ein Uebersteuerungsblock ist der deutlich risikoaermere Weg. Die Doppelfuehrung ist bekannt und in offene-punkte.md vermerkt. Gewaehlt: #b45309. Diese Farbe verwendet die Website bereits fuer den Fokus einfacher Textverweise. Nachgerechnet: auf Weiss #ffffff -> 5,02:1 auf #f7f8fa (Kacheln) -> 4,86:1 auf #fff4e8 (Menue) -> 4,63:1 auf #172236 (Fussbereich) -> 3,17:1 Der Fussbereich behaelt jedoch sein helles Orange (#f58220 -> 6,14:1), das dort deutlich besser steht. outline veraendert die Groesse eines Elements nicht - die Hoehenreservierung der Ratgeberseiten bleibt also unberuehrt. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid #b45309 !important; outline-offset: 3px !important; } /* Dunkler Fussbereich: dort ist das helle Markenorange die bessere Wahl. */ .rb-global-footer a:focus-visible, .rb-global-footer button:focus-visible, .rb-global-footer input:focus-visible, .rb-global-footer [tabindex]:focus-visible { outline-color: #f58220 !important; } /* ===== rb-blog-angleich-2026 ===== */ /* rb-blog-angleich-2026 - 03.08.2026 Angleichung der Uebersichts- und Fehlerseiten an das Kachelbild der Startseite. Gemessen am 03.08.2026 im eingeblendeten Endzustand (rb-reveal erzwungen): Startseite .rb-card Radius 18px | Rahmen #E2E7EE | Schatten rgba(17,24,39,.043) 0 8px 26px Ratgeber article.post Radius 16px | Rahmen #E5E7EB | KEIN Schatten Nur diese drei Eigenschaften werden nachgezogen. Flaeche, Innenabstand, der orangefarbene Streifen ueber der Kachel (::before) und das Anheben beim Ueberfahren (translateY(-4px) mit 0 16px 32px rgba(15,23,42,.10)) bleiben unveraendert. Die vorhandene transition nennt box-shadow bereits, der Uebergang vom Ruhe- in den Ueberfahrzustand bleibt also weich. Kein !important noetig: gleiche Spezifitaet wie die Ausgangsregel (body.blog article.post), dieser Block steht spaeter im Dokument. Die Lesebreite der Beitraege (660px) wird bewusst NICHT angefasst. */ body.blog article.post, body.search article.post, body.category article.post { border-radius: 18px; border-color: #e2e7ee; box-shadow: rgba(17, 24, 39, 0.043) 0 8px 26px; } /* Fehlerseiten 10180 (DE) und 10424 (EN): Seitenhintergrund war als einzige Seiten #F7F8F9, ueberall sonst Weiss. Ein echter 404 rendert dieselben Seiten, die Angleichung wirkt also auch dort. */ body.page-id-10180, body.page-id-10424 { background-color: #ffffff; } /* ===== rb-banner-deny-2026 ===== */ /* rb-banner-deny-2026 - 03.08.2026, auf Wunsch des Betreibers "Ablehnen" soll aussehen wie "Cookies akzeptieren". Warum hier und nicht in den Complianz-Einstellungen: Complianz fuehrt fuer "Akzeptieren" Hintergrund #F58220 mit WEISSER Schrift. Live sieht man davon nichts - der Block "Schaltflaechen im Ruhezustand" weiter oben in diesem Feld ueberschreibt beides per !important auf #F59638 mit dunkler Schrift. Die Complianz-Werte sind also tote Einstellungen. Wuerde man "Ablehnen" dort umstellen, gaebe es zwei Quellen fuer dieselbe Farbe und die sichtbare waere weiterhin diese Datei. Deshalb steht die Angleichung an derselben Stelle wie das Vorbild. Werte eins zu eins vom Knopf "Akzeptieren" uebernommen, nicht neu erfunden. Im Browser nachgemessen, nicht geschaetzt: Ruhe #F59638, Rand #F59638, Schrift #0F172A -> 7,91:1 Ueberfahren #D9680F, Rand #D9680F, Schrift #0F172A -> 5,05:1 Beide ueber der Anforderung von 4,5:1 fuer Fliesstextgroesse. (Meine erste Handrechnung nannte 8,07 und 5,15 - ich hatte fuer die dunklen Kanaele den falschen Ast der sRGB-Kurve benutzt. Kontrastwerte gehoeren gemessen, nicht gerechnet.) "Einstellungen speichern" bleibt bewusst als heller Knopf mit orangem Rand stehen - er ist die drittrangige Handlung und trennt die beiden gleichrangigen Entscheidungen optisch von der Feineinstellung. Ruecknahme: diesen Block ersatzlos entfernen. Dann greift wieder die Complianz-Voreinstellung (weisse Flaeche, Rand #E5E7EB). */ html body button.cmplz-btn.cmplz-deny { background-color: #F59638 !important; border-color: #F59638 !important; color: #0F172A !important; } html body button.cmplz-btn.cmplz-deny:hover, html body button.cmplz-btn.cmplz-deny:focus { background-color: #D9680F !important; border-color: #D9680F !important; color: #0F172A !important; } /* =================================================================== A-10: Aus den Seiteninhalten hierher gehobene Regeln. Bis 04.08.2026 stand in jedem einzelnen Seiteninhalt ein eigener