/* ===== BUTTON-SET kp-btn (clean, OHNE !important) ===== Primary: Klasse .kp-btn -> rot, eckig, letter-spacing Ghost: + .kp-btn--ghost -> transparenter Rahmen (adaptiv) + .kp-btn--on-dark -> Flaechen-Scope: dunkle Belegung Funktioniert ohne !important, weil die Button-Elemente keine konkurrierenden Per-Element-Styles (_background/_cssCustom/circle) mehr tragen. */ :root{ --kp-btn-bg:var(--c-red); --kp-btn-bg-hover:var(--c-red-dark); --kp-btn-fg:var(--c-on-accent); --kp-btn-radius:0; --kp-btn-minh:var(--tap-min); --kp-focus:var(--c-accent-on-surface); } .brxe-button.kp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.45em; min-height:var(--tap-min); min-width:160px; height:auto; width:auto; padding:.7rem 1.5rem; border:0; border-radius:var(--kp-btn-radius); background-color:var(--kp-btn-bg); color:var(--kp-btn-fg); font-size:var(--fs-sm); font-weight:500; letter-spacing:.05em; line-height:1.25; text-decoration:none; transition:background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .brxe-button.kp-btn .text{ color:inherit; } .brxe-button.kp-btn:hover{ background-color:var(--kp-btn-bg-hover); color:var(--kp-btn-fg); transform:translateY(-1px); } /* Ghost / Secondary */ .brxe-button.kp-btn--ghost:hover{ background-color:var(--kp-btn-bg); border-color:var(--kp-btn-bg); color:var(--kp-btn-fg); } /* Submit-Button Textfarbe */ .submit-button-wrapper button.bricks-button, .submit-button-wrapper button.bricks-button .text{ color:var(--c-on-accent) !important; } /* Cart Drawer – geschlossen verstecken, geöffnet SureCart überlassen. Die Regel stammt aus der Zeit der Web-Komponente , die mit einem open-ATTRIBUT arbeitete. Der heutige Warenkorb (div.sc-drawer.sc-cart-drawer, WordPress Interactivity API) öffnet über die KLASSE .open und bekommt nie ein [open]-Attribut. Mit nur :not([open]) griff die Regel deshalb immer und schlug per !important SureCarts `.sc-drawer.open{display:flex}` – der Warenkorb ging in keinem Browser auf, sichtbar war nur der abgedunkelte Hintergrund (2026-09-15). SureCart selbst versteckt den geschlossenen Drawer NICHT, die Regel muss also bleiben – sie darf nur nicht mehr greifen, sobald eine der beiden Formen offen ist. */ .sc-cart-drawer:not([open]):not(.open), sc-drawer.sc-cart-drawer:not([open]){ display:none !important; } /* ===== SURECART + WP BLOCK BRAND-TOKENS ===== 2026-08-13: Die --sc-*-Bruecken sind BEWUSST noch nicht auf die semantische Ebene umgestellt. Aus dem Variablennamen allein laesst sich nicht ableiten, ob SureCart den Wert als Flaeche oder als Text verwendet - das muss am gerenderten Checkout geprueft werden und gehoert in den SureCart-Block. Betroffen: --sc-color-gray-900, --sc-color-primary-text, --sc-input-label-color, --sc-line-item-title-color, --sc-cart-icon-color. */ :root, sc-checkout-form, sc-cart, sc-product-page, sc-product-list, sc-cart-icon, .wp-block-surecart-product-list, .sc-block-components, .sc-theme, body{ --sc-color-primary-500:var(--c-red,#b80000); --sc-color-primary-600:var(--c-red-dark,#8f0000); --sc-color-primary-text:var(--c-white,#ffffff); --sc-focus-ring-color-primary:var(--c-red,#b80000); --sc-selected-variant-image-border-color:var(--c-red,#b80000); --sc-color-gray-900:var(--c-ink,#111111); --sc-color-gray-700:var(--c-text,#1a1a1a); --sc-color-gray-500:var(--c-muted,#666); --sc-color-gray-300:var(--c-line,#ddd); --sc-input-border-color:var(--c-line,#ddd); --sc-input-border-color-focus:var(--c-red,#b80000); --sc-input-label-color:var(--c-ink,#111111); --sc-border-radius-medium:var(--radius,.375rem); --sc-border-radius-small:var(--radius-sm,.25rem); --sc-cart-font-family:var(--font-sans,sans-serif); --sc-cart-icon-background:var(--c-red,#b80000); --sc-cart-icon-color:var(--c-white,#ffffff); --sc-line-item-title-color:var(--c-ink,#111111); --wp--preset--color--surecart:var(--c-red); } .sc-button__link, a.wp-block-button__link, .wp-element-button{ background-color:var(--kp-btn-bg) !important; color:var(--kp-btn-fg) !important; border-radius:var(--kp-btn-radius) !important; min-height:var(--kp-btn-minh); border:0; } .sc-button__link:hover, a.wp-block-button__link:hover, .wp-element-button:hover{ background-color:var(--kp-btn-bg-hover) !important; } .wp-block-surecart-product-quick-view-button:hover{ background-color:var(--kp-btn-bg) !important; color:var(--c-on-accent) !important; } /* ===== CHROME BLEIBT DUNKEL — Header und Footer nehmen am Theme nicht teil ===== 2026-08-13: Header und Footer sind Markenelemente wie das Logo: sie waren immer dunkel und sollen es in beiden Themes bleiben. Statt jedes Element darin einzeln festzunageln, werden hier die semantischen Namen INNERHALB von Header und Footer fest auf die dunkle Belegung gesetzt. Alles darin erbt das automatisch - auch kuenftige Elemente. Rueckgaengig machen: einfach diesen Block loeschen, dann schalten Header und Footer mit dem Rest der Seite mit. */ header#brx-header, footer#brx-footer{ --c-surface:var(--c-ink); --c-surface-2:var(--c-ink-2); --c-surface-3:var(--c-ink-3); --c-surface-inverse:var(--c-paper); --c-on-surface:var(--c-text-on-dark); --c-on-surface-muted:var(--c-muted-on-dark); --c-on-surface-strong:var(--c-white); --c-on-surface-inverse:var(--c-ink); --c-accent-on-surface:var(--c-red-on-dark); --c-outline:var(--c-line-on-dark); } /* ===== HEADER-NAV — Strukturelle Klassen-Regeln ===== */ /* Nav-Links: weiß on dark, min-tap-target 44px */ header#brx-header .bricks-nav-menu > li:not(.lang-switch) > a, header#brx-header .bricks-nav-menu .menu-item-has-children > div > a{ color:var(--c-on-surface,#fff) !important; transition:color var(--dur) var(--ease); min-height:var(--tap-min); display:flex; align-items:center; } /* Hover + aktive Seite: weiß */ header#brx-header .bricks-nav-menu > li:hover > a, header#brx-header .bricks-nav-menu > li.current-menu-item > a{ color:var(--c-on-surface-strong,#fff) !important; } /* Nav-Gap zwischen Items */ header#brx-header .bricks-nav-menu{ gap:var(--gap-sm,.75rem); } /* Dropdown */ header#brx-header .bricks-nav-menu ul.sub-menu{ background-color:var(--c-surface,#111) !important; } header#brx-header .bricks-nav-menu .sub-menu a{ color:var(--c-on-surface,#fff) !important; font-size:var(--fs-sm,.875rem) !important; min-height:var(--tap-min); display:flex; align-items:center; } header#brx-header .bricks-nav-menu .sub-menu li:hover > a{ background-color:var(--c-red,#b80000) !important; color:var(--c-on-accent,#fff) !important; } /* Mobile-Menü Links */ header#brx-header .bricks-mobile-menu a{ color:var(--c-on-surface,#fff) !important; font-size:var(--fs-sm,.875rem) !important; min-height:var(--tap-min); display:flex; align-items:center; } /* Mobile Toggle */ header#brx-header .bricks-mobile-menu-toggle{ min-width:var(--tap-min); min-height:var(--tap-min); color:var(--c-on-surface,#fff) !important; } /* Logo: responsive Breite */ header#brx-header .my-logo, header#brx-header .my-logo img{ max-width:100%; height:auto; } header#brx-header .my-logo{ width:clamp(8.75rem,18vw,13.75rem); } /* ===== FOOTER — Strukturelle Klassen-Regeln ===== */ footer#brx-footer .brxe-text-link{ color:var(--c-on-surface-muted) !important; font-size:var(--fs-sm,.875rem) !important; } footer#brx-footer a.brxe-text-link{ display:inline-flex; align-items:center; min-height:var(--tap-min); transition:color var(--dur) var(--ease); } footer#brx-footer a.brxe-text-link:hover{ color:var(--c-on-surface,#fff) !important; } footer#brx-footer .brxe-text-basic{ color:var(--c-on-surface,#fff); } /* ===== SPRACHSCHALTER NUR FLAGGEN — Desktop-Nav ===== */ #brx-header .bricks-nav-menu-wrapper .lang-switch > a, #brx-header .bricks-nav-menu .lang-switch > a{ font-size:0; display:inline-flex; align-items:center; justify-content:center; padding:0; background-size:cover; background-position:center; background-repeat:no-repeat; border-radius:3px; box-shadow:0 0 0 1px #ffffff33; } #brx-header .bricks-nav-menu-wrapper .lang-switch > a:hover, #brx-header .bricks-nav-menu .lang-switch > a:hover{ filter:brightness(1.12); } #brx-header .bricks-nav-menu-wrapper .lang-switch > a:focus-visible, #brx-header .bricks-nav-menu .lang-switch > a:focus-visible{ outline:2px solid var(--kp-focus); outline-offset:3px; } .menu-item-16043 > a{ background-image:url('/wp-content/uploads/flags/gb.svg'); } .menu-item-16044 > a{ background-image:url('/wp-content/uploads/flags/de.svg'); } #brx-header li.lang-switch{ display:flex !important; align-items:center; align-self:center; } /* ===== SPRACHSCHALTER IM MOBILEN MENÜ ===== */ .bricks-mobile-menu .lang-switch > a{ width:100% !important; height:60px !important; padding:0 30px !important; font-size:var(--fs-sm) !important; line-height:60px !important; background-image:none !important; box-shadow:none !important; border-radius:0 !important; display:flex !important; align-items:center !important; gap:var(--space-xs) !important; } .bricks-mobile-menu .menu-item-16043 > a::before{ content:''; display:inline-block; flex-shrink:0; width:22px; height:15px; margin-right:4px; background:url('/wp-content/uploads/flags/gb.svg') center/cover no-repeat; border-radius:2px; } .bricks-mobile-menu .menu-item-16044 > a::before{ content:''; display:inline-block; flex-shrink:0; width:22px; height:15px; margin-right:4px; background:url('/wp-content/uploads/flags/de.svg') center/cover no-repeat; border-radius:2px; } /* ===== HAMBURGER-BARS ZENTRIERUNG ===== */ .bricks-mobile-menu-toggle .bar-top { top:14px !important; } .bricks-mobile-menu-toggle .bar-center{ top:21px !important; } .bricks-mobile-menu-toggle .bar-bottom{ top:28px !important; } /* ===== SOCIAL ICONS TAP-TARGET ===== */ .brxe-social-icons a, .brxe-social-icons li > a, .brxe-social-icons .brxe-icon{ min-width:var(--tap-min); min-height:var(--tap-min); display:inline-flex; align-items:center; justify-content:center; } /* ===== A11Y — FOCUS-RING + MOTION ===== */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, .brxe-button:focus-visible, .bricks-nav-menu a:focus-visible, .sc-button__link:focus-visible, a.wp-block-button__link:focus-visible{ outline:3px solid var(--c-red,#b80000) !important; outline-offset:2px !important; border-radius:var(--radius-sm,.25rem); } a:focus:not(:focus-visible), button:focus:not(:focus-visible), .brxe-button:focus:not(:focus-visible){ outline:none; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ===== REVIEW-SLIDER (Plugin-global) ===== */ body .rpi .rpi-dots-wrap, body .rpi-cnt .rpi-dots-wrap{ display:none !important; } .rpi-cards.rpi-slides-bite{ padding-left:36px !important; padding-right:36px !important; } @media (max-width:767px){ html[lang^="de"] .rpi-review_us{ white-space:normal !important; text-align:center !important; line-height:1.2 !important; } } /* ===== BRICKS-FORMULARE — auf Designsystem (alle .brxe-form) ===== */ /* Spalten-/Zeilen-Abstand über Padding-Gutter (border-box -> kein Overflow bei 50%-Feldern) */ .brxe-form{ gap:0 !important; } .brxe-form > .form-group{ padding:0 .625rem 1.25rem !important; box-sizing:border-box; margin:0; } .brxe-form label{ display:block; margin-bottom:var(--space-xs); color:var(--c-on-surface,#e6e6e6); font-size:var(--fs-sm,.875rem); font-weight:600; letter-spacing:.01em; } .brxe-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .brxe-form select, .brxe-form textarea{ width:100%; background-color:var(--c-surface-inverse,#fff); color:var(--c-text,#1a1a1a); border:1px solid var(--c-line,#dddedf); border-radius:0; padding:.7rem .9rem; min-height:var(--tap-min); font-size:var(--fs-body,1rem); line-height:1.4; transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .brxe-form textarea{ min-height:8rem; resize:vertical; } .brxe-form input::placeholder, .brxe-form textarea::placeholder{ color:var(--c-muted,#5a5a5a); opacity:1; } .brxe-form input:focus, .brxe-form select:focus, .brxe-form textarea:focus{ outline:none; border-color:var(--c-red,#b80000); box-shadow:0 0 0 3px rgba(184,0,0,.18); } /* Submit-Button: Abstand nach oben + Tap-Target (Farbe kommt aus Button-System) */ .brxe-form .form-group.submit-button-wrapper{ padding-bottom:0 !important; } .brxe-form .bricks-button[type=submit], .brxe-form button[type=submit]{ margin-top:var(--space-2xs); width:auto !important; min-width:160px; min-height:var(--kp-btn-minh,44px); padding:.7rem 1.5rem; border:0; border-radius:0; background-color:var(--kp-btn-bg,#b80000); color:var(--c-on-accent) !important; font-size:var(--fs-sm,.9375rem); font-weight:600; line-height:1.25; display:inline-flex; align-items:center; justify-content:center; gap:.45em; transition:background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .brxe-form .bricks-button[type=submit]:hover, .brxe-form button[type=submit]:hover{ background-color:var(--kp-btn-bg-hover,#8f0000); transform:translateY(-1px); } /* 2026-08-11: Die Karten- und Grid-Regeln (.brxe-block.card, .brxe-div.grid.grid--3 samt Kind-Elementen und Breakpoints) sind in die Bricks-Global-Klassen "card" und "grid--3" umgezogen — siehe kit_card_grid.php. Grund: sie schlugen per Spezifitaet die gleichnamigen Kit-Klassen, deren Werte dadurch nie gerendert wurden. Eine neu gebaute Seite mit .card haette anders ausgesehen als alle bestehenden. Jetzt ist die Kit-Klasse die einzige Quelle. Das !important konnte entfallen: kein einziges der 48 Eltern- und 106 Kind-Elemente traegt eigene Bricks-Settings (card_conflicts.php / card_children.php). Ausnahme ist die Sichtbarkeits-Regel gegen Bricks' lazy-reveal-Inline-Styles, die mit !important in "grid--3" weiterlebt. */ /* 2026-08-11: Die Pauschalregel fuer ALLE Buttons ist entfallen. Ihre Werte (Mindestgroesse, Schriftgroesse, Innenabstand, Zeilenhoehe) stehen jetzt in .brxe-button.kp-btn — der Klasse, die 51 der 55 Buttons ohnehin tragen. Die drei, die sie brauchten aber nicht hatten, haben sie bekommen (add_kpbtn.php). Bewusst NICHT bekommen haben sie: die beiden Pfeile sb3slal/sb3slar (eigene 44x44-Gestaltung) und die beiden "Ueberspringen"- Links sbwskp/hqwskp — denen zwang die Pauschalregel faelschlich 44px/160px auf, obwohl sie schlichte Textlinks sein sollen. Ihr Wegfall repariert das. Damit entfallen 8 !important, und die Wizard-Buttons brauchen ihres nicht mehr. */ /* ===== News-Karten (/aktuelles + /en/news, WP-Post-Loop #brxe-zcytsp) ===== An das allgemeine Karten-Design angeglichen (dunkel, rote Linkslinie, Hover->weiss) + einheitliche Kartenhoehe (Grid stretch, Bild auf festes Seitenverhaeltnis gecappt, Excerpt-Clamp) statt wild schwankender Hoehen je nachdem ob ein Bild vorhanden ist. 2026-08-11 GEPRUEFT UND BEWUSST HIER BELASSEN: Der Versuch, diese Regeln wie alle anderen ins _cssCustom der Elemente zu verschieben, ist gescheitert. Bricks gibt fuer Elemente INNERHALB eines Query-Loops gar kein _cssCustom aus — von sechs geschriebenen Bloecken landete kein einziger in post-83.min.css, nur der des Grid-Containers (der ausserhalb des Loops sitzt). Die Karten fielen dadurch auf das helle Theme zurueck. Diese Regeln muessen deshalb in einer Datei stehen. */ #brxe-intoqa{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; grid-template-rows:none !important; grid-auto-rows:auto; align-items:start; gap:var(--space-md) !important; } @media (max-width:991px){ #brxe-intoqa{ grid-template-columns:repeat(2,1fr) !important; } } @media (max-width:600px){ /* Einspaltig: kein "Row"-Verbund mehr -> 1fr wuerde JEDE Karte auf die Hoehe der insgesamt laengsten Karte strecken (riesige Luecken). Eigene Content-Hoehe. */ #brxe-intoqa{ grid-template-columns:1fr !important; grid-auto-rows:auto; align-items:start; } .brxe-zcytsp.brxe-block{ height:auto; } } .brxe-zcytsp.brxe-block{ display:flex !important; flex-direction:column; width:100% !important; max-width:none !important; min-height:220px; background:var(--c-surface-2) !important; border-radius:0; border-left:var(--border-w-accent) solid var(--c-red); box-shadow:var(--shadow-sm); transition:background-color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); } .brxe-zcytsp.brxe-block:hover{ background:var(--c-surface-inverse) !important; box-shadow:var(--shadow-md); } .brxe-zcytsp .brxe-jxcwsf{ order:-1; aspect-ratio:16/10; overflow:hidden; margin:-1em -1em 0; width:calc(100% + 2em); max-width:calc(100% + 2em) !important; /* Bricks-Core [class*="brxe-"]{max-width:100%} kappt sonst den Bleed */ } .brxe-zcytsp .brxe-jxcwsf img{ width:100%; height:100%; object-fit:cover; } .brxe-zcytsp .brxe-gywoci, .brxe-zcytsp .brxe-gywoci p{ font-size:var(--fs-sm) !important; color:var(--c-accent-on-surface) !important; border-color:rgba(255,255,255,.2) !important; transition:color var(--dur-slow) var(--ease); } .brxe-zcytsp:hover .brxe-gywoci, .brxe-zcytsp:hover .brxe-gywoci p{ color:var(--c-red) !important; } .brxe-zcytsp .brxe-fjfrvy{ color:var(--c-on-surface-strong) !important; transition:color var(--dur-slow) var(--ease); } .brxe-zcytsp:hover .brxe-fjfrvy{ color:var(--c-on-surface-inverse) !important; } .brxe-zcytsp .brxe-tnivad{ color:var(--c-on-surface-muted) !important; flex:1; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition:color var(--dur-slow) var(--ease); } .brxe-zcytsp .brxe-tnivad:empty{ display:none; } .brxe-zcytsp:hover .brxe-tnivad{ color:var(--c-muted) !important; } .brxe-zcytsp .brxe-yjrgbh{ margin-top:auto !important; } /* ── Seminar-Filter-Chips (kp-seminar-filter.php) ───────────────── */ .kp-chipbar{ display:flex; flex-wrap:wrap; gap:var(--space-xs); margin:0 0 1.25rem; padding:0; } .kp-chip{ font:inherit; font-size:var(--fs-sm,.875rem); font-weight:600; line-height:1; cursor:pointer; padding:.55rem 1.05rem; background:var(--c-surface-inverse); color:var(--c-on-surface-inverse); border:1px solid var(--c-border,#d8d8d8); border-radius:0; transition:background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .kp-chip:hover{ border-color:var(--c-red,#b80000); color:var(--c-red,#b80000); } .kp-chip.is-active{ background:var(--c-red,#b80000); border-color:var(--c-red,#b80000); color:var(--c-on-accent); } .kp-chip-empty{ color:var(--c-muted,#5a5a5a); font-size:var(--fs-sm,.9rem); margin:.5rem 0; padding:1rem 0; } /* ── Startseiten-CTA "Hol dir Karatepraxis in dein Dojo" (kp-event-cta.php) ── */ .kp-cta{ width:100vw; margin-left:calc(50% - 50vw); background:var(--c-surface-3); color:var(--c-on-surface-strong); overflow:hidden; } .kp-cta__inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.08fr .92fr; min-height:460px; } .kp-cta__body{ padding:clamp(2.25rem,4vw,3.5rem); display:flex; flex-direction:column; justify-content:center; } .kp-cta__photo{ position:relative; min-height:100%; } /* Foto kommt aus Bricks-Background-Setting (Element kpcph, editierbar im Builder) */ .kp-cta__photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--c-surface-3) 0%, rgba(20,20,20,.5) 16%, rgba(20,20,20,0) 42%); } @media (max-width:860px){ .kp-cta__inner{ grid-template-columns:1fr; min-height:0; } .kp-cta__photo{ min-height:210px; order:-1; } .kp-cta__photo::before{ background:linear-gradient(0deg,var(--c-surface-3) 0%, rgba(20,20,20,0) 60%); } } .kp-cta__eyebrow{ color:var(--c-accent-on-surface); font-weight:700; letter-spacing:.16em; text-transform:uppercase; font-size:var(--fs-xs); margin:0 0 .7rem; } .kp-cta__title{ color:var(--c-on-surface-strong) !important; font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.01em; font-weight:700; margin:0 0 .9rem; } .kp-cta__text{ color:var(--c-on-surface-muted); font-size:var(--fs-base); line-height:1.55; margin:0 0 1.5rem; max-width:42ch; } .kp-cta__btn{ align-self:flex-start; display:inline-flex; align-items:center; gap:.55em; background:var(--c-red,#b80000); color:var(--c-on-accent) !important; font-weight:700; padding:.9rem 1.7rem; min-height:46px; text-decoration:none; transition:background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .kp-cta__btn:hover{ background:var(--c-red-dark,#8f0000); transform:translateX(3px); } .kp-cta__dates{ margin-top:var(--space-lg); border-top:1px solid rgba(255,255,255,.12); padding-top:var(--space-md); } .kp-cta__dlabel{ color:var(--c-on-surface-muted); text-transform:uppercase; letter-spacing:.14em; font-size:var(--fs-xs); font-weight:700; margin:0 0 .5rem; } .kp-cta__date{ display:flex; align-items:baseline; gap:var(--space-sm); padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.08); text-decoration:none; transition:padding-left var(--dur-fast) var(--ease); } .kp-cta__date:hover{ padding-left:.4rem; } .kp-cta__date .d{ color:var(--c-accent-on-surface); font-weight:700; font-size:var(--fs-xs); white-space:nowrap; flex:0 0 auto; min-width:5.5rem; } .kp-cta__date .t{ color:var(--c-line); font-size:var(--fs-sm); line-height:1.3; } .kp-cta__date:hover .t{ color:var(--c-on-surface-strong); } .kp-cta__all{ display:inline-block; margin-top:var(--space-sm); color:var(--c-accent-on-surface); font-weight:700; font-size:var(--fs-xs); text-decoration:none; } .kp-cta__all:hover{ text-decoration:underline; } /* ── Google-Reviews lesbar auf dunkler Bunkai-Section (kp-reviews-tweaks.php begrenzt auf 2) ── */ .page-id-50 .rpi-text, .page-id-16020 .rpi-text{ color:var(--c-on-surface) !important; --text-height-auto:auto !important; max-height:none !important; height:auto !important; } .page-id-50 .rpi-name, .page-id-16020 .rpi-name{ color:var(--c-accent-on-surface) !important; } .page-id-50 .rpi-time, .page-id-16020 .rpi-time, .page-id-50 .rpi-normal-up, .page-id-16020 .rpi-normal-up{ color:var(--c-on-surface-muted) !important; } .page-id-50 .rpi-card, .page-id-16020 .rpi-card{ border-color:rgba(255,255,255,.12) !important; } /* Reviews: feste Text-Box-Höhe (var --text-height ~315px) aufheben -> Karten fit-content, damit der große Leerraum zwischen den 2 Reviews verschwindet (scoped Bunkai) */ .page-id-50 .rpi-card, .page-id-16020 .rpi-card, .page-id-50 .rpi-card-inner, .page-id-16020 .rpi-card-inner{ height:auto !important; } .page-id-50 .rpi-cards, .page-id-16020 .rpi-cards{ gap:var(--space-sm) !important; align-items:flex-start !important; } /* 2026-08-11: Die Listen-Regeln (zcadls, bwjgfq, urwuru + die 6 Castle-Editionen) sind in das _cssCustom der jeweiligen Bricks-Elemente umgezogen — migrate_lists.php. Grund: die Elemente trugen selbst "border-bottom:0.1px solid rgb(...)" und wurden hier mit !important wieder ausgehebelt. Jetzt steht der Endzustand direkt am Element; das !important entfaellt, der rohe rgb()-Farbwert ebenso. Die :hover-Regel ist ersatzlos weg — sie setzte dieselbe Farbe wie der Grundzustand und war damit wirkungslos. */ /* 2026-08-11: Die beiden Overlay-Regeln (#brxe-kffajc::before Castle-Hero, #brxe-mebjqr::before Startseiten-Zitat) sind ins _cssCustom der Elemente umgezogen — migrate_ids.php. Kein !important mehr noetig. */ /* 2026-08-11: Testimonial-Avatar (50px) — umgezogen ins _cssCustom des Slider-Elements #brxe-mjoyry, siehe migrate_pagescoped.php. */ /* Castle EN (55): Retrofit setzte .brxe-text-basic auf 14px (max(.8em,--fs-sm)) -> einziger Ausreisser ggue dem Rest der Seite (16px). Auf Site-Standard 16px angeglichen (DE-Castle 16109 ist bereits 16px). */ body.page-id-55 .brxe-text-basic{ font-size:var(--fs-base) !important; line-height:var(--lh-body,1.6) !important; } /* ── Castle-Seiten Feinschliff (EN 55 + DE 16109, gleiche Element-IDs) ───────── */ /* 1) Programm-Button, 2) Liste urwuru, 3+4) Testimonial-Ausrichtung: alle ins _cssCustom der jeweiligen Elemente umgezogen — migrate_ids.php. */ /* ── Castle-Retreat June-Edition (Post 59) ──────────────────────────────────── */ /* 1) Trainings- und Conditions-Listen: Schrift, Ausrichtung und Icon-Ausblendung sind ins _cssCustom der jeweiligen Elemente umgezogen — migrate_lists.php. */ /* 2) Speakers/Coaches-Breakpoints (2 pro Reihe ab 991px, 1 ab 767px): ins _cssCustom der 3 Reihen- und 9 Speaker-Elemente umgezogen — migrate_ids.php. */ /* ===== A11y: Touch-Targets vergrößern (Submenü-Toggle, Sprachumschalter) ===== */ #brx-header .brx-submenu-toggle{ min-width:var(--tap-min) !important; min-height:var(--tap-min) !important; display:inline-flex !important; align-items:center; justify-content:center; } #brx-header .bricks-nav-menu-wrapper .lang-switch > a, #brx-header .bricks-nav-menu .lang-switch > a{ width:36px !important; height:24px !important; } /* ===== Header: Icon-Reihe entschlacken (nur 2 wichtigste Social-Icons behalten) ===== Instagram + WhatsApp bleiben (relevanteste Kanäle für Kampfsport-Zielgruppe), Facebook/YouTube/Mail aus der Header-Nav-Zeile ausblenden (bleiben im Footer erreichbar). */ header#brx-header .bricks-nav-menu-wrapper .social-icons li:not(:has(a[href*="instagram"])):not(:has(a[href*="wa.me"])):not(:has(a[href*="whatsapp"])), header#brx-header ul.brxe-social-icons > li.repeater-item:not(:has(a[href*="instagram"])):not(:has(a[href*="wa.me"])):not(:has(a[href*="whatsapp"])){ display:none !important; } /* ===== Social-Icons auf AAA-Zielgröße (44px) anheben ===== */ header#brx-header .repeater-item.has-link a, footer#brx-footer .repeater-item.has-link a{ min-width:var(--tap-min) !important; min-height:var(--tap-min) !important; display:inline-flex !important; align-items:center; justify-content:center; } /* 2026-08-11: Hero-Overlay + Hoehenbegrenzung — umgezogen ins _cssCustom der jeweils ersten Section (#brxe-petuhb Castle, #brxe-c17ce0 Selbstverteidigung), siehe migrate_pagescoped.php. */ /* --------------------------------------------------------------------------- a11y 2026-08-05: Fliesstext-Links brauchen neben der Farbe ein zweites Unterscheidungsmerkmal (WCAG 1.4.1, Lighthouse "link-in-text-block"). Betrifft die interne Verlinkung, die im Rahmen der SEO-Strategie ergaenzt wurde. --------------------------------------------------------------------------- */ .brxe-text a:not([class*='btn']):not([class*='button']), .brxe-text-basic a:not([class*='btn']):not([class*='button']), .brxe-post-content a:not([class*='btn']):not([class*='button']){ text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .07em; } .brxe-text a:not([class*='btn']):not([class*='button']):hover, .brxe-text-basic a:not([class*='btn']):not([class*='button']):hover, .brxe-post-content a:not([class*='btn']):not([class*='button']):hover{ text-decoration-thickness: .12em; } /* a11y 2026-08-05: Eyebrow im "Aehnliche Beitraege"-Modul war var(--c-red) auf var(--c-ink) = 2.73:1 (WCAG verlangt 4.5:1). var(--c-accent-on-surface) ergibt 5.42:1. Das Modul ist per Design nur fuer dunkle Hintergruende (Links sind weiss), daher unbedenklich. */ .kprel .kprel-eyebrow{ color:var(--c-accent-on-surface); } /* 2026-08-11: Hier standen die Baukasten-Fixes fuer .section / .prose / .section--paper / .lead — noetig, solange Bricks das %root% globaler Klassen nicht aufloeste. Das uebernimmt jetzt kp-kit-css.php (wp_head Prio 101) fuer ALLE Kit-Klassen, nicht nur diese vier. .section war eine Teilmenge der Kit-Klasse, .prose' color ist in die Kit-Klasse gewandert, .section--paper und .lead sind nirgends zugewiesen (0 Vorkommen in Bricks-Elementen und im gerenderten HTML). Ersatzlos entfernt. */ /* Baukasten-Fix 2026-08-07: Off-Canvas-Menu-Hintergrund. Bricks-Core setzt in themes/bricks/assets/css/elements/nav-menu.min.css ".bricks-mobile-menu-wrapper:before{background-color:#23282d}" (WP-Admin-Grau, kein Marken-Token). Override auf dokumentierte dunkle Marken-Flaeche --c-ink. */ .bricks-mobile-menu-wrapper:before { background-color: var(--c-surface) !important; } /* --------------------------------------------------------------------------- 2026-08-07: Seminar-buchen (16059) — FAQ-Akkordeon (natives
/). Kein JS noetig, barrierefrei von Haus aus. Klasse .kp-faq scoped auf das neue Text-Element sb2fqx. Passt zum dunklen Farbschema der Seite. --------------------------------------------------------------------------- */ .kp-faq details { background-color: var(--c-surface-2, #1d1d1d); border: 1px solid var(--c-outline, #333); border-top: none; padding: 0; } .kp-faq details:first-of-type { border-top: 1px solid var(--c-outline, #333); } .kp-faq details summary { cursor: pointer; list-style: none; min-height: var(--tap-min); display: flex; align-items: center; gap:var(--space-xs); padding: .9rem 1.1rem; color: var(--c-on-surface, #e6e6e6); font-weight: 600; -webkit-tap-highlight-color: transparent; } .kp-faq details summary::-webkit-details-marker { display: none; } .kp-faq details summary::before { content: '+'; flex: 0 0 auto; color: var(--c-red, #b80000); font-size: 1.2em; line-height: 1; width: 1em; text-align: center; } .kp-faq details[open] summary::before { content: '\2212'; /* minus */ } .kp-faq details[open] summary { border-bottom: 1px solid var(--c-outline, #333); color: var(--c-on-surface-strong, #fff); } .kp-faq details summary:focus-visible { outline: 2px solid var(--c-red, #b80000); outline-offset: -2px; } .kp-faq details p { margin: 0; padding: 0 1.1rem 1.1rem 2.85rem; color: var(--c-on-surface-muted, #b3b3b3); line-height: var(--lh-body, 1.6); } .kp-faq + p { margin-top:var(--space-md); } /* --------------------------------------------------------------------------- 2026-08-07: Seminar-buchen (16059) — Mini-Anfrageformular im Hero (sbqf). Sitzt auf dem Foto-Hero mit dunklem Overlay. Basis-Kontrast kommt bereits aus der sitweiten .brxe-form-Regel (weisse Inputs, helle Labels), hier zusaetzlich ein abgesetzter Rahmen/Hintergrund, damit sich das kompakte Formular optisch vom Foto abhebt und als eigener Block erkennbar ist. --------------------------------------------------------------------------- */ .kp-hero-form { background-color: rgba(17, 17, 17, .55); border: 1px solid rgba(255, 255, 255, .25); padding: 1.25rem 1.25rem .5rem; margin-bottom:var(--space-lg); backdrop-filter: blur(2px); } .kp-hero-form .form-group { margin-bottom: 0; } .kp-hero-form .bricks-button[type=submit], .kp-hero-form button[type=submit] { width: 100% !important; } /* 2026-08-11: Beide Wizard-Bloecke (sb2s6b/sbform und sb2h1frm/sbqf) sind ins _cssCustom der 20 beteiligten Elemente umgezogen — migrate_wizards.php. Aufteilung: Regeln fuer genau ein Element liegen an diesem Element (werden nach dessen Settings ausgegeben -> kein !important noetig), die Zustands- regeln ueber [data-step] am jeweiligen Wrapper (hoehere Spezifitaet als die Grundregel am Kind -> ebenfalls ohne !important wirksam). Keyframes am Wrapper. Die Timeline-Klassen .kp-tl-* darunter bleiben: eigenes PHP-Markup, kein Bricks-Element. */ /* ===== 3-step "what happens next" timeline (right column) ===== */ .kp-tl-wrap{ display:flex; flex-direction:column; } .kp-tl-item{ display:flex; gap:var(--space-sm); position:relative; padding-bottom:var(--space-lg); } .kp-tl-item:last-child{ padding-bottom:0; } .kp-tl-num{ flex:0 0 auto; width:2.25rem; height:2.25rem; border-radius:50%; background:var(--c-red,#b80000); color:var(--c-on-accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--fs-sm); position:relative; z-index:1; } .kp-tl-item:not(:last-child) .kp-tl-num::after{ content:''; position:absolute; top:2.25rem; left:50%; transform:translateX(-50%); width:2px; height:calc(100% + .75rem); background:var(--c-outline,#2a2a2a); } .kp-tl-title{ font-weight:700; margin:0 0 .25rem; color:var(--c-on-surface,#e6e6e6); } .kp-tl-desc{ margin:0; color:var(--c-on-surface-muted,#a8a8a8); font-size:var(--fs-sm); line-height:1.5; } /* ===== SureCart-Hinweisboxen auf die Markenfarbe ziehen ===== Das Plugin bringt ein eigenes Warnrot (#ef4444) mit, das neben dem Markenrot als zweiter Ton auffaellt. Fremd-Markup, daher hier per CSS. */ .sc-alert, .sc-alert__icon, [class*="sc-alert"] { --sc-color-danger-500: var(--c-red); --sc-color-danger-600: var(--c-red-dark); } .sc-alert__icon { color: var(--c-red); } .sc-alert { border-color: var(--c-red); } /* ===== A11Y — FORMULAR: Pflichtfeld-Hinweis (kp-a11y-forms.php, WCAG 3.3.2) ===== Der Satz wird serverseitig als erstes Kind des Formulars eingefügt, aber nur wenn wirklich jedes sichtbare Feld required ist. Bewusst KEIN Rot-only-Signal — der Hinweis ist Text und funktioniert auch ohne Farbwahrnehmung. Der Live-Bereich .kp-form-live wird NICHT hier gestylt: seine visually-hidden-Regel steht inline in kp-a11y-forms.php, damit sie nicht ausfallen kann. */ .brxe-form .kp-form-required-note{ margin:0 0 1rem; padding:0 .625rem; /* passt auf den Gutter der .form-group-Spalten */ font-size:var(--fs-sm,.875rem); line-height:1.45; color:var(--c-on-surface-muted,#c9c9c9); } /* ========================================================================= A11Y-PAKET D — 2026-09-07 — WCAG 1.4.3 D1 Ueberschriften-Alias-Haertung, D2/D4 Ghost-Button, Flaechen-Scopes. Das Markenrot #b80000 auf dunklem Grund wird hier bewusst NICHT angefasst. ========================================================================= */ /* --- D2 + D4: Ghost-Button nimmt die Farbe der Flaeche, auf der er sitzt --- Vorher (Zeile 23/24 dieser Datei): color:var(--c-on-surface-inverse) plus eine Extra-Klasse .kp-btn--on-dark, die Weiss festnagelte. Beides behauptete eine Flaeche, die der Button nicht hat: alle Ghost-Buttons haengen unter _background:var(--c-surface-2), also unter der theme-mitlaufenden Flaeche. Gemessen dark #111111 auf #1d1d1d = 1,12 | light #e6e6e6 auf #f5f5f5 = 1,14 | light-on-dark #ffffff auf #f5f5f5 = 1,09. Nachher: 12,1 bis 17,4 : 1 auf jeder der sechs Flaechenstufen. Die alten Zeilen 23/24 werden vom Hauptlauf ERSETZT (siehe Hinweis unten). */ .brxe-button.kp-btn--ghost{ background-color:transparent; border:1.5px solid currentColor; color:var(--c-on-surface,#e6e6e6); } /* --- Flaechen-Scope statt Farb-Klasse --- Gleiche Bauart wie der bestehende kp-invers-scope in den Bricks-Elementen und wie der Header/Footer-Block in Zeile 79-91 dieser Datei. .kp-on-dark ist der neue, neutrale Name; .kp-btn--on-dark bleibt als Alias bestehen, damit vorhandenes Markup nicht bricht - aber sie setzt jetzt eine FLAECHE, keine Farbe. Auf einer hellen Flaeche darf sie nicht mehr stehen; der Hauptlauf entfernt sie dort (siehe P2). */ .kp-on-dark, .brxe-button.kp-btn--on-dark{ --c-surface:var(--c-ink); --c-surface-2:var(--c-ink-2); --c-surface-3:var(--c-ink-3); --c-surface-inverse:var(--c-paper); --c-on-surface:var(--c-text-on-dark); --c-on-surface-muted:var(--c-muted-on-dark); --c-on-surface-strong:var(--c-white); --c-on-surface-inverse:var(--c-ink); --c-outline:var(--c-line-on-dark); } /* --- Foto-Flaeche: nimmt am Theme NICHT teil --- Ein Foto kann nicht gleichzeitig hell- und dunkeltextfaehig sein. Text auf Foto ist in beiden Themes hell; die Abdunklung liefert den Kontrast (siehe P3). --c-overlay-ink war seit Anlage ohne Konsumenten; der Hero ist der erste. Alpha .65 ist aus den Bilddaten gerechnet: hellstes Pixel des Hero-Bildes danach L=0.1281 -> gegen #ffffff 5,90:1 (noetig 4,5). Der Wert steht hier im Scope und nicht am :root, weil kp-theme-light.css (Prio 100, laedt nach dieser Datei) --c-overlay-ink sonst auf .35 zurueckdrehen wuerde -> nur 2,28:1. */ .kp-on-photo{ --c-overlay-ink:rgba(17,17,17,.65); --c-on-surface:var(--c-on-photo); --c-on-surface-muted:var(--c-on-photo); --c-on-surface-strong:var(--c-white); --c-outline:var(--c-line-on-dark); } /* --- D1-Haertung: Ueberschriften folgen der Flaeche, nicht dem :root --- bricks-child/style.css:24 deklariert :root{--color-text:var(--c-on-surface)}. Der var() wird EINMAL am :root aufgeloest und eingefroren; die Regel bricks-child/style.css:68 h1,h2,h3,h4,h5,h6{color:var(--color-text)} ignoriert damit jeden Flaechen-Scope. Live nachgewiesen auf /castle-retreat-seminar-de: --c-on-surface ist im Invers-Scope #111111, --color-text bleibt #e6e6e6 -> H2 mit 1,14:1 auf #f5f5f5. Diese Datei wird inline NACH bricks-child/style.css ausgegeben, gleiche Spezifitaet -> gewinnt ueber die Reihenfolge. ID-Regeln aus dem Bricks-Seiten-CSS (#brxe-...) bleiben unberuehrt, ID schlaegt Element. */ h1,h2,h3,h4,h5,h6{ color:var(--c-on-surface); } /* =========================================================================== a11y 2026-09-07 — WCAG 1.4.10 Reflow bei 320 CSS-px (Arbeitspaket E) Gemessen mit headless Chrome, Viewport 320x800, deviceScaleFactor 1. =========================================================================== */ /* --- E1: Ueberschriften brechen nicht um ----------------------------------- Gemessen: KEIN nowrap, KEIN starres font-size (clamp ist vorhanden). Ursache ist jeweils EIN deutsches Kompositum, das breiter ist als die 280px-Inhaltsbox: "Selbstverteidigung" 306,1px @34px (ksv H2 x3), "Bewegungsmuster" 304,2px @34px (/bunkai H2), "Verteidigungskunst" 281,4px @24px, "Geschaeftsbedingungen" 351,2px @31,6px (/agb H1). Doc-scrollWidth vorher: ksv 326, bunkai 324, agb 351 -> alle 320 nachher. Bewusst NICHT word-break:break-all (zerhackt auch passende Woerter). hyphens:auto trennt silbenrichtig (html lang="de" bzw. "en-US" ist gesetzt, beides geprueft); overflow-wrap:break-word ist nur der Notnagel fuer Woerter ohne Trennpunkt. Beides ist wirkungslos, solange ein Wort passt. KEINE Media-Query: der Ueberlauf tritt gemessen bei 320 und 360 px auf UND erneut bei 900/1024 px (Hero-H1 fs 52-55px in 407/464px-Spalte). Eine max-width-Grenze koennte beides nicht abdecken. Bei 375-768 und 1280 px sind 0 Ueberschriften betroffen -> die Regel ist dort nachweislich ein No-op. h1..h6 statt .brxe-heading, weil die /agb-H1 aus dem WP-Passwortschutz- Template kommt und keine Bricks-Klasse traegt. */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; /* Typografische Untergrenzen, sonst trennt der Browser "Ka-rateseminare". 6 = Wort mindestens 6 Zeichen, 3 = mindestens 3 Zeichen vor dem Trennstrich, 3 = mindestens 3 danach. Entspricht der deutschen Satzkonvention. */ -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 6 3 3; } /* --- E1d: Rechtstexte, nackte URLs als Linktext ---------------------------- /datenschutz und /en/privacy-policy: documentElement.scrollWidth 578 statt 320. .prose (#brxe-a6b0a5 DE / #brxe-32d5c5 EN) ist Flex-Item; min-width:auto loest auf min-content auf, und die wird von der laengsten ausgeschriebenen URL bestimmt (540,7px, support.microsoft.com/...) -> Block 557,63px breit. overflow-wrap:break-word reicht hier NICHT: es aendert die min-content-Breite nicht. "anywhere" geht in die min-content-Berechnung ein und ist genau deshalb hier richtig. Bei kurzen Woertern wirkungslos. Spezifitaet: .brxe-text.prose (0,0,2,0) schlaegt die Kit-Klasse .prose (0,0,1,0) aus kp-kit-css.php, die spaeter (wp_head Prio 101) ausgegeben wird und dort max-width:65ch setzt. */ .brxe-text.prose, .brxe-text.prose p, .brxe-text.prose li, .brxe-text.prose a, .prose a { overflow-wrap: anywhere; } /* --- E2: Complianz-Consent-Banner ragt 12,8px (~13px) heraus --------------- Gemessen bei 320px: Banner selbst korrekt 320px breit, box-sizing:border-box, margin 0 -> es ist WEDER ein fehlendes box-sizing NOCH ein Margin. Ursache: die drei auto-Grid-Spalten (grid-template-columns 97,5938px x3 + 2x10px gap = 312,81px) sprengen die 280px-Content-Box, weil die Kinder min-width:auto haben und ihre min-content-Breite die Spalten aufblaest. Folge: .cmplz-close (das X) liegt bei left 312,8 -> ausserhalb des 320px- Viewports, die drei Consent-Buttons sind rechts angeschnitten. min-width:0 hebt die automatische Mindestgroesse der Grid-Items auf. Gemessen nachher: grid-template-columns 86,66px x3, Banner scrollWidth 320 = clientWidth 320, .cmplz-close right 300, .cmplz-accept right 300. Keine Media-Query noetig: bei 360/400/600/1280px sind grid-template-columns, .cmplz-header-Spalten und Button-Breiten VOR und NACH der Regel bitidentisch (gemessen) -> dort exakter No-op. Gilt automatisch DE + EN (Banner global). */ .cmplz-cookiebanner > * { min-width: 0; } /* =========================================================================== 2026-09-07 — A11Y-PAKET A: EIN Fokusring-Token (WCAG 2.4.7 + 1.4.11) --------------------------------------------------------------------------- Problem: Der bisherige Ring (Z. 193-199) war #b80000 — exakt die Farbe der roten Navileiste #brxe-gpiuui (b_post-44.min.css) => 1,00:1, unsichtbar. Keine Einzelfarbe traegt auf allen Untergruenden (#b80000 / #1d1d1d / #111111 / #262626 / #ffffff / #f5f5f5), currentColor ebenfalls nicht. Loesung: zweifarbiger Ring, weisser Kern (outline, 2px) + dunkler Halo (box-shadow, 2px innen + 2px aussen). Gemessene Kontraste des Kerns bzw. des Halos gegen den jeweiligen Grund (>= 3:1 erfuellt auf jedem): #b80000 -> Kern 6,91:1 | #1d1d1d -> 16,86 | #111111 -> 18,88 #262626 -> 15,13 | #ffffff -> Halo 18,88 | #f5f5f5 -> Halo 17,32 Kern gegen Halo: 18,88:1. Ringstaerke Kern 2px, Gesamtring 6px. Dieser Block ueberschreibt die vier Alt-Stellen bewusst und vollstaendig: kp-fixes.css:193-199, :152-153, :598-600, kp-theme-light.css:86-89. =========================================================================== */ :root{ --kp-focus-core:#ffffff; /* Ringkern — traegt auf dunklem Grund + auf Rot */ --kp-focus-halo:#111111; /* Ringmantel — traegt auf hellem Grund */ --kp-focus-w:2px; /* Kernstaerke — WCAG-Minimum 2px */ --kp-focus-gap:2px; /* Abstand Element -> Kern */ /* Alt-Token aus Z. 7 auf den neuen Kern umbiegen (spaetere Deklaration gewinnt) */ --kp-focus:var(--kp-focus-core); } /* --- Basisring, global ---------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, details:focus-visible, [tabindex]:focus-visible, .brxe-button:focus-visible, .bricks-nav-menu a:focus-visible, .bricks-nav-menu button:focus-visible, .sc-button__link:focus-visible, a.wp-block-button__link:focus-visible{ outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:var(--kp-focus-gap) !important; box-shadow:0 0 0 calc(var(--kp-focus-gap) + var(--kp-focus-w) * 2) var(--kp-focus-halo) !important; border-radius:var(--radius-sm,.25rem); } /* --- Sprachschalter (Flagge in der roten Leiste), ersetzt Z. 152-153 ------- */ #brx-header .bricks-nav-menu-wrapper .lang-switch > a:focus-visible, #brx-header .bricks-nav-menu .lang-switch > a:focus-visible{ outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:var(--kp-focus-gap) !important; box-shadow:0 0 0 6px var(--kp-focus-halo) !important; } /* --- FAQ-Akkordeon, ersetzt Z. 598-600 (dort (0,2,2), hier gleich + spaeter) */ .kp-faq details summary:focus-visible{ outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:-4px !important; /* nach innen: summary ist randlos */ box-shadow:inset 0 0 0 6px var(--kp-focus-halo) !important; } /* --- Theme-/Zoom-Buttons in der Topbar #1d1d1d ---------------------------- kp-theme-light.css laedt bei wp_head Prio 100, also NACH kp-fixes.css (99). Gleiche Spezifitaet + !important wuerde dort verlieren -> `html `-Praefix. */ html .kp-theme-toggle:focus-visible, html .kp-zoom-btn:focus-visible{ outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:var(--kp-focus-gap) !important; box-shadow:0 0 0 6px var(--kp-focus-halo) !important; } /* --- Bricks-Formularfelder ------------------------------------------------ Z. 252-256 setzt bei :focus einen eigenen box-shadow (0,2,1) und wuerde den Halo schlucken. Gleiche Spezifitaet, spaeter im File -> gewinnt. Der rote Rahmen aus Z. 256 bleibt als zusaetzliche Zustandsmarkierung erhalten. */ .brxe-form input:focus-visible, .brxe-form select:focus-visible, .brxe-form textarea:focus-visible{ outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:var(--kp-focus-gap) !important; box-shadow:0 0 0 6px var(--kp-focus-halo) !important; } /* --- A2: Reviews-Widget (business-reviews-bundle 2.0.5) ------------------- public-main.css setzt `.rpi a{outline:0!important;box-shadow:none!important}`, `.rpi button:focus{outline:0!important}` und `.rpi .rpi-x:focus-visible,.rpi-x:focus-visible{outline:0!important}`. Das Plugin-CSS laedt NACH kp-fixes (bewertungen: Z. 946 vs Z. 267), gleiche Spezifitaet + !important verliert also. Darum je +1 Element/Klasse: body .rpi a:focus-visible (0,2,2) > .rpi a (0,1,1) body .rpi button:focus-visible (0,2,2) > .rpi button:focus (0,2,1) body .rpi .rpi-x:focus-visible (0,3,1) > .rpi .rpi-x:focus-vis. (0,3,0) */ body .rpi a:focus-visible, body .rpi button:focus-visible, body .rpi [tabindex]:focus-visible, body .rpi .rpi-x:focus-visible, body .rpi-x:focus-visible, body .rpi-review_us:focus-visible, body .rpi-review_us a:focus-visible{ outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:var(--kp-focus-gap) !important; box-shadow:0 0 0 6px var(--kp-focus-halo) !important; border-radius:var(--radius-sm,.25rem); } /* --- A3: Sprunglink ------------------------------------------------------- Markup kommt aus mu-plugins/kp-a11y-skiplink.php (wp_body_open, Prio 1). Versteckt per clip-Technik (bleibt in der Tab-Reihenfolge, anders als display:none / visibility:hidden). Bei Fokus sichtbar oben links, ueber dem sticky Header, mit demselben Ringtoken. */ .kp-skip-link{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } .kp-skip-link:focus, .kp-skip-link:focus-visible{ position:fixed; top:.75rem; left:.75rem; width:auto; height:auto; margin:0; clip:auto; clip-path:none; overflow:visible; z-index:100001; /* ueber #brx-header (brx-sticky) */ display:inline-block; padding:.7rem 1.25rem; background:var(--c-red,#b80000); color:var(--c-on-accent,#fff) !important; font-size:var(--fs-sm,.9375rem); font-weight:600; line-height:1.25; text-decoration:none; border-radius:0; outline:var(--kp-focus-w) solid var(--kp-focus-core) !important; outline-offset:var(--kp-focus-gap) !important; box-shadow:0 0 0 6px var(--kp-focus-halo) !important; } /* Sprungziel wird per JS fokussierbar gemacht (tabindex="-1") — dort darf kein Ring erscheinen, das Ziel ist kein Bedienelement. */ #brx-content:focus, #brx-content:focus-visible{ outline:none !important; box-shadow:none !important; } /* =========================================================================== 2026-09-07 — A11Y-PAKET T (Restbefunde T1–T4) Alle Werte unten sind live gemessen, hell UND dunkel, DE und EN. Das Markenrot #b80000 wird nicht angefasst. =========================================================================== */ /* --- T1: Footer-Beschriftungen „Menü“/„FAQ“ ------------------------------- Die beiden Bricks-Headings werden zu
(kp-T1-footer-nav.php), die Elternblöcke zu