/* ============================================================ 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; } .rb-card-icon { color: #B45309; } .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 */ @media (max-width: 400px) { } /* 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 */ @media (max-width: 700px) { } /* 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; top: auto !important; bottom: 24px; right: 22px; transform: none !important; } .rb-cw-toggle:hover { transform: scale(1.04) !important; } .rb-cw-panel { top: auto !important; bottom: 24px; transform: none; } @media (max-width: 640px) { .rb-cw-toggle { bottom: 12px; right: 12px; } .rb-cw-panel { bottom: 82px; } } /* 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-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} .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} .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,150,56,.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,150,56,.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,150,56,.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,150,56,.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,150,56,0.16), rgba(245,150,56,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;} .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:#fff;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:#0f172a;}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:#0f172a;} 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:#6b7280;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:#6b7280;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-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:24px;} .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-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:#0f172a;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:#0f172a;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:#0f172a;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-pagination-2026 ===== */ /* Blaetterung der Ratgeberuebersicht. Bis zum 07.08.2026 lieferte die Uebersicht alle Beitraege auf einer einzigen Seite aus und blendete sie ab dem fuenften nur aus; ein Knopf "Weitere Beitraege laden" klappte sie wieder auf. Seit der Umstellung auf posts_per_page = 5 erzeugt WordPress echte Folgeseiten unter /page/2/. Die Navigation ist das letzte Kind des Rasters .site-main. Ohne grid-column landete sie in der Spalte der Seitenleiste - gemessen am 06.08.2026 bei x=1324 statt x=476. Denselben Grund hatte das grid-column:1 des alten Knopfes. */ .paging-navigation{grid-column:1;margin:8px 0 0;padding-top:26px;border-top:1px solid var(--rb-line,#e5e7eb);} /* Die Pfeilzeile "Aeltere Beitraege" fuehrt zum selben Ziel wie die Zahlenreihe und stuende sonst doppelt da. */ .paging-navigation .nav-previous,.paging-navigation .nav-next{display:none;} /* Das Leerzeichen in "Weiter →" faellt weg, sobald der Verweis selbst ein Flex-Behaelter ist: Leerraum zwischen Flex-Elementen wird verworfen. Gemessen am 07.08.2026 - Luecke 0,0 px, mit gap 5,3 px. */.paging-navigation .nav-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;} .paging-navigation .page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-width:42px;height:42px;padding:0 13px;border:1px solid var(--rb-line,#e5e7eb);border-radius:8px;background:#fff;color:var(--rb-navy,#0f172a);font-size:15px;font-weight:600;line-height:1;text-decoration:none;transition:all .2s;} .paging-navigation a.page-numbers:hover{border-color:#f0cba7;background:#fff7ed;} .paging-navigation .page-numbers.current{background:#F59638;border-color:#F59638;color:#0F172A;font-weight:700;} .paging-navigation .page-numbers.dots{min-width:auto;padding:0 4px;border-color:transparent;background:none;} /* Auf dem Handy wird mit dem Finger getippt, nicht mit dem Zeiger gezielt. 44 px ist der gaengige Richtwert; WCAG 2.5.8 verlangt mindestens 24 px. Platz ist vorhanden: drei Schaltflaechen brauchen rund 165 px, die Zeile ist bei 390 px Geraetebreite 282 px breit (gemessen 07.08.2026). */ @media (max-width:480px){.paging-navigation{padding-top:22px;}.paging-navigation .page-numbers{min-width:44px;height:44px;padding:0 12px;font-size:14px;}} /* ===== 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} /* 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-restfaelle-2026 ===== */ /* Farbfestlegungen aus dem Kontrast-Fix vom 01.08.2026, die keine andere Quelle haben. Am 06.08.2026 aus den Bloecken rb-kontrast-teil2-2026 und rb-kontrast-teil3-2026 zusammengezogen; alles, was inzwischen an seiner eigentlichen Stelle steht, wurde dort eingetragen und hier entfernt. Was entfiel und warum: Flaechen in Markenorange -> rb-logo-orange-2026 weiter unten setzt sie ohnehin erneut, mit demselben Wert und spaeter in der Datei. Orange als Schriftfarbe (.rb-card-icon, .rb-cw-kicker, .rb-consent a) -> steht an der jeweiligen Komponentenregel. 404-Augenbraue, 404-Ziffernverlauf, Ziffern der Ablaufliste, Einwilligungsknopf der Rechtsseiten, Zeitangaben der Beitraege -> stehen jetzt an ihrer Quellregel. Der frueher hier genannte Grund - Farbregeln im Customizer-Feld wp-custom-css - ist entfallen: das Feld ist seit dem 03.08.2026 leer, sein Inhalt steht als TEIL 1 am Anfang dieser Datei. Der Kunstgriff "html body" davor war nur noetig, um jenes Feld zu ueberbieten. Werte nach WCAG 2.1, Grenzwert 4,5:1 fuer normale Schrift. */ /* 1) Augenbraue. #974608 ergibt auf dem hellblauen Abschnitt #eaf0f6 5,72:1, auf allen uebrigen Untergruenden mindestens 5,9:1. Das !important ist hier noetig: die Seitenwrapper setzen --orange-dark und greifen mit hoeherer Spezifitaet zu (.rb-contact-page .rb-eyebrow und andere). */ html body .rb-eyebrow { color: #974608 !important; } /* 2) Auf den dunklen Karten (Verlauf #31445d -> #26384f) gehoert das helle Orange hin: #ffb36f = 5,64:1 bzw. 6,77:1. Ohne diese Regel wuerde dort der dunkle Wert aus 1) stehen und nur 1,98:1 erreichen. */ 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) Glyphen und Marken in Markenorange ohne eigene Farbregel. Weiss auf #f59638 ergibt 2,4:1, dunkel darauf 7,91: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) Zeitangaben, Autorenzeile und der Trennstrich des Sprachumschalters. #9ca3af ergibt auf Weiss nur 2,54:1, #6b7280 ergibt 4,83:1. Die Regel bleibt noetig, weil die Verweise darin sonst die Linkfarbe des Themes annehmen; die Elternregel allein genuegt nicht. */ 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; } /* 5) Textblock im Abschluss-Feld: die allgemeine Nebentextfarbe #667085 liegt dort mit 4,48:1 zwei Hundertstel unter dem Grenzwert. #5d6678 ergibt 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; } /* 6) Auswahlhaken im Einwilligungsfeld: #f58220 erreicht auf Weiss nur 2,59:1. */ html body .rb-cw-panel .rb-consent input, html body .wpcf7-list-item input[type="checkbox"] { accent-color: #b45309; } /* ===== 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-cw-toggle, html body .rb-cw-btn, html body .rb-finder-result-link, 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-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-cw-toggle:hover, html body .rb-cw-btn:hover, html body .rb-finder-result-link: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-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; } /* Der Tastaturfokus behaelt die dunkle Schrift. Diese Faelle standen bis zum 06.08.2026 im Block rb-kontrast-teil2-2026; sie sind der einzige Teil davon, den die Regeln oben nicht ohnehin schon abdecken. */ html body .rb-button-primary:focus, html body .rb-button-primary a:focus, html body a.rb-button-primary:focus { 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; } 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; } /* Die letzten zwei Stellen im Einwilligungsbanner, die noch den alten Ton #F58220 trugen (06.08.2026). Beide stehen in der von Complianz erzeugten Datei banner-1-optin.css: der Schlagschatten unter "Akzeptieren" und die Ankreuzfarbe der Kategorie-Kaestchen. Sie stammen nicht aus den Complianz-Einstellungen - weder die Farbfelder noch das Feld "Individuelles CSS" enthalten sie (ueber die Schnittstelle des Plugins geprueft: 144.271 Zeichen Feldwerte, kein Treffer). Die erzeugende Quelle war mit den vorhandenen Zugaengen nicht auffindbar, deshalb hier ueberschrieben. Ohne Vorrangmarkierung: Diese Datei wird nach banner-1-optin.css geladen (Platz 22 gegen Platz 15) und beide Selektoren liegen eine Stufe hoeher. Gemessen, nicht angenommen. Ruecknahme: diesen Block ersatzlos entfernen. Dann faerben sich Schatten und Haekchen wieder in #F58220. */ html body .cmplz-cookiebanner .cmplz-buttons button.cmplz-btn.cmplz-accept { box-shadow: 0 6px 16px rgba(245, 150, 56, .22); } html body .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header input[type="checkbox"] { accent-color: #F59638; } /* =================================================================== A-10: Aus den Seiteninhalten hierher gehobene Regeln. Bis 04.08.2026 stand in jedem einzelnen Seiteninhalt ein eigener