/* ========================================================================== UF Basis — Grundschicht ========================================================================== Diese Datei ersetzt genau das, was das Vorgaengertheme (RehUb 18.9.4) still mitgeliefert hat. Sie ist gegen dessen ausgelieferte Werte gemessen, nicht geschaetzt. Quelle der Messung: berechnete Werte am gerenderten DOM, 15.09.2026, 1440 px, sechs Seitenarten. html font-family "Times New Roman" <- Fehler, siehe unten body font-family Roboto, "Helvetica Neue", -apple-system, system-ui, … body font-size 15px body color #000 body background #fff a color rgb(30,115,190) <- RehUb-Blau, nicht die Marke h1 29px / 34px margin 10px 0 31px h2 25px / 30px margin 10px 0 31px h3 20px / 28px margin 10px 0 25px h4 18px / 24px h5 16px/20px h6 14px/16px table border-collapse:collapse; width:100%; td,th 6px 12px * box-sizing:border-box img max-width:100%; height:auto; vertical-align:top DER FEHLER, DEN DIESE DATEI NICHT WIEDERHOLT -------------------------------------------- RehUb fuehrte einen Meyer-Reset, der `html` in die Ruecksetzliste aufnahm und dort `font: inherit` setzte. Auf dem Wurzelelement loest `inherit` zum Anfangswert auf — der Serifenschrift des Browsers. Die Regel stand spaeter in der Kaskade als `html{font-family:var(--tr-font)}` aus dem Modul-CSS und gewann. Ergebnis: Die Grundschrift der Seite kam ausschliesslich aus RehUbs `body`-Regel, ohne dass das irgendwo stand. Nachgewiesen per CDP CSS.getMatchedStylesForNode auf : html font-family: var(--tr-font) (Modul) html, body, div, span, … font: inherit (RehUb-Reset) Deshalb hier: `html` steht NICHT in der Ruecksetzliste, und die Grundschrift steht literal an `html` UND an `body` — nicht nur als Custom Property, die ein Minifier verlieren kann. REIHENFOLGE ----------- Diese Datei wird an wp_enqueue_scripts Prioritaet 1 angemeldet und liegt damit VOR Modul- und Plugin-CSS. Das ist Absicht: Die Grundschicht soll von jeder spaeteren Regel ueberschreibbar sein. Kein !important — mit genau einer Ausnahme, die unten begruendet ist. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Grundwerte -------------------------------------------------------------------------- */ :root{ /* Die Familie ist bewusst ein Systemschriften-Stapel: kein Request, kein Google-Fonts-Hotlink (in Deutschland angreifbar, LG Muenchen I 3 O 17493/20), kein FOUT. Das Child darf --uf-font ueberschreiben. */ --uf-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --uf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --uf-fs-base: 16px; /* RehUb stand auf 15px — siehe Abschnitt 3 */ --uf-lh-base: 1.6; --uf-ink: #1c2430; /* Ueberschriften */ --uf-body: #374151; /* Fliesstext */ --uf-mut: #5d6879; /* Meta */ --uf-bg: #ffffff; --uf-line: #e6e9ef; --uf-line-ui: #7c8798; --uf-link: #0F3D2F; /* Vorgabe: Markengruen. Child kann ueberschreiben. */ --uf-link-hover: #0A2B21; --uf-link-rule: rgba(15,61,47,.55); --uf-focus: #0F3D2F; --uf-focus-halo: rgba(255,255,255,.92); --uf-maxw: 1240px; --uf-pad-x: 20px; --uf-pad-x-sm: 16px; --uf-touch: 44px; --uf-radius: 10px; } /* -------------------------------------------------------------------------- 2. Ruecksetzung Bewusst kurz. Ein Meyer-Reset setzt rund 90 Elemente zurueck und nimmt dabei Semantik mit, die Browser richtig liefern (b, strong, em, sub, sup). Hier werden nur die Abstaende genullt, die sonst sichtbar springen, wenn ein Modul seine eigenen setzt. `html` fehlt in dieser Liste. Das ist der Kern der Sache — siehe Kopf. -------------------------------------------------------------------------- */ *, *::before, *::after{ box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, pre, fieldset, legend, table, caption{ margin: 0; padding: 0; } /* `hidden` zieht seine Wirkung allein aus der Browser-Grundregel und verliert gegen JEDE Autorenregel — auch gegen eine einzelne Klasse. Auf testranking.de lag deshalb am 12.09.2026 ein unsichtbarer Dialog ueber allen Kategorieseiten und fing jeden Klick ab, bei HTTP 200 und ohne Konsolenfehler. Das ist die einzige erlaubte Ausnahme vom !important-Verbot. */ [hidden]{ display: none !important; } /* -------------------------------------------------------------------------- 3. Grundtypografie RehUb stand auf 15px Fliesstext mit `line-height: normal` und reinem Schwarz. Hier: 16px, 1.6, #374151. Begruendung: - 16px ist die Vorgabe des Browsers; jeder kleinere Wert zwingt einen Teil der Leserschaft zum Zoomen und ist auf Mobilgeraeten ein Ranking-Faktor. - reines Schwarz auf reinem Weiss (21:1) ist fuer Fliesstext zu hart; #374151 auf #fff misst 9,7:1 und liegt damit weit ueber der AAA-Schwelle. Beides sind sichtbare Aenderungen. Sie stehen in der Vergleichsmessung und sind dort als gewollt ausgewiesen. -------------------------------------------------------------------------- */ html{ /* Literal UND als Token: faellt das Token weg, traegt die Literalliste. */ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--uf-font); font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body{ font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-family: var(--uf-font); font-size: var(--uf-fs-base); line-height: var(--uf-lh-base); color: var(--uf-body); background-color: var(--uf-bg); margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: .01ms !important; /* Barrierefreiheit schlaegt Stilregel */ animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } h1, h2, h3, h4, h5, h6{ color: var(--uf-ink); font-weight: 700; line-height: 1.25; text-wrap: balance; } h1{ font-size: 1.875rem; margin: 0 0 1rem; } /* 30px — RehUb 29px */ h2{ font-size: 1.5rem; margin: 2rem 0 .75rem; } /* 24px — RehUb 25px */ h3{ font-size: 1.25rem; margin: 1.5rem 0 .5rem; }/* 20px — RehUb 20px */ h4{ font-size: 1.125rem; margin: 1.25rem 0 .5rem; } h5{ font-size: 1rem; margin: 1rem 0 .5rem; } h6{ font-size: .875rem; margin: 1rem 0 .5rem; } h1:first-child, h2:first-child, h3:first-child{ margin-top: 0; } p{ margin: 0 0 1rem; } p:last-child{ margin-bottom: 0; } b, strong{ font-weight: 700; } i, em{ font-style: italic; } small{ font-size: .875em; } sub, sup{ font-size: .75em; line-height: 0; position: relative; vertical-align: baseline; } sup{ top: -.5em; } sub{ bottom: -.25em; } mark{ background: #fff3bf; color: inherit; padding: 0 .15em; } abbr[title]{ text-decoration: underline dotted; cursor: help; } code, kbd, samp, pre{ font-family: var(--uf-font-mono); font-size: .9375em; } pre{ overflow-x: auto; padding: 1rem; background: #f6f8fb; border-radius: var(--uf-radius); } blockquote{ margin: 1.5rem 0; padding-left: 1rem; border-left: 3px solid var(--uf-line); color: var(--uf-mut); } hr{ border: 0; height: 1px; background: var(--uf-line); margin: 2rem 0; } /* -------------------------------------------------------------------------- 4. Listen RehUb setzte `ul{list-style:none}` global. Das nimmt Aufzaehlungen im redaktionellen Text die Punkte und ist der Grund, warum eine Elementor-Regel auf den Kategorieseiten sie einzeln zurueckholt (`list-style:disc`). Hier andersherum: Listen behalten ihre Zeichen, und Bedienlisten (Navigation, Karten) verlieren sie ueber eine Klasse. -------------------------------------------------------------------------- */ ul, ol{ margin: 0 0 1rem; padding-left: 1.5rem; } li{ margin: 0 0 .25rem; } li > ul, li > ol{ margin-top: .25rem; margin-bottom: 0; } nav ul, nav ol, .uf-liste-blank{ list-style: none; margin: 0; padding: 0; } .uf-liste-blank > li{ margin: 0; } dl{ margin: 0 0 1rem; } dt{ font-weight: 700; } dd{ margin: 0 0 .5rem 1rem; } /* -------------------------------------------------------------------------- 5. Links Die Basisfarbe zieht auf die Marke. RehUb lieferte rgb(30,115,190) — ein Blau aus dem Theme-Bestand, das seit dem Markenwechsel am 12.09.2026 falsch war. Unterstrichen bleibt, was im Fliesstext steht; Bedienelemente nehmen den Unterstrich ueber ihre eigene Klasse zurueck. -------------------------------------------------------------------------- */ a{ color: var(--uf-link); text-decoration: underline; text-decoration-color: var(--uf-link-rule); text-underline-offset: .15em; text-decoration-thickness: from-font; } a:hover, a:focus-visible{ color: var(--uf-link-hover); text-decoration-color: currentColor; } a:not([href]){ color: inherit; text-decoration: none; } /* Fokus: sichtbar auf jedem Grund. Ring innen in der Marke, Halo aussen weiss — so bleibt er auch auf dunklen Flaechen erkennbar. */ :focus-visible{ outline: 2px solid var(--uf-focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--uf-focus-halo); border-radius: 2px; } /* Kein Fokusring bei Mausklick — :focus-visible regelt das, die Altregel `a:focus,button{outline:none}` aus RehUb entfiel ersatzlos. */ /* -------------------------------------------------------------------------- 6. Medien -------------------------------------------------------------------------- */ img, svg, video, canvas, audio, iframe, embed, object{ display: block; max-width: 100%; } img, video{ height: auto; } img{ border: 0; } svg{ fill: currentColor; } figure{ margin: 0 0 1rem; } figcaption{ font-size: .875rem; color: var(--uf-mut); margin-top: .5rem; } /* -------------------------------------------------------------------------- 7. Tabellen RehUb: border-collapse:collapse, width:100%, td/th 6px 12px. Uebernommen, ergaenzt um einen Rollcontainer: Eine breite Datentabelle darf scrollen, der Seitenrumpf nicht. -------------------------------------------------------------------------- */ table{ border-collapse: collapse; width: 100%; font-size: .9375rem; margin: 0 0 1rem; } th, td{ padding: 6px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--uf-line); } th{ font-weight: 700; color: var(--uf-ink); } caption{ text-align: left; color: var(--uf-mut); font-size: .875rem; padding-bottom: .5rem; } .uf-tabelle-rolle{ overflow-x: auto; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- 8. Formularelemente Gemessen ohne Theme: `input` faellt auf Arial 13,33px ohne Polster und ohne Rahmen zurueck — das war auf der alten Seite bereits so, weil RehUb die Felder nur in eigenen Bauteilen stylte. Hier erben sie Schrift und Groesse. -------------------------------------------------------------------------- */ input, select, textarea, button{ font: inherit; /* zulaessig: NICHT auf html, nur auf Formularelementen */ color: inherit; margin: 0; } input, select, textarea{ max-width: 100%; padding: .5rem .75rem; background: #fff; border: 1px solid var(--uf-line-ui); border-radius: var(--uf-radius); } input[type="checkbox"], input[type="radio"]{ width: auto; padding: 0; accent-color: var(--uf-link); min-width: 1rem; min-height: 1rem; } input[type="search"]{ -webkit-appearance: none; appearance: none; } textarea{ resize: vertical; min-height: 6rem; } select{ cursor: pointer; } button, input[type="submit"], input[type="button"]{ cursor: pointer; min-height: var(--uf-touch); padding: 0 1rem; border: 1px solid transparent; border-radius: var(--uf-radius); background: var(--uf-link); color: #fff; line-height: 1.2; } button:hover, input[type="submit"]:hover{ background: var(--uf-link-hover); } button[disabled], input[disabled]{ opacity: .55; cursor: not-allowed; } label{ display: inline-block; } fieldset{ border: 1px solid var(--uf-line); border-radius: var(--uf-radius); padding: 1rem; margin: 0 0 1rem; } legend{ padding: 0 .5rem; font-weight: 700; } ::placeholder{ color: var(--uf-mut); opacity: 1; } /* -------------------------------------------------------------------------- 9. Geruest Nur drei Klassen. Mehr braucht ein Portal nicht, dessen Oberflaeche aus eigenen Modulen kommt. `.rh-container` steht als Zweitname an derselben Huelle (siehe uf_wrap_class() in functions.php). Das Modul-CSS feinjustiert den Seitenrand ueber diesen Selektor; bis diese sechs Regeln umgeschrieben sind, muss der Name bestehen. -------------------------------------------------------------------------- */ .uf-outer{ position: relative; } .uf-wrap{ width: 100%; max-width: var(--uf-maxw); margin-inline: auto; padding-inline: var(--uf-pad-x); } .uf-wrap--voll{ max-width: none; padding-inline: 0; } .uf-wrap--text{ max-width: 720px; } @media (max-width: 767px){ .uf-wrap{ padding-inline: var(--uf-pad-x-sm); } } .uf-inhalt{ min-height: 40vh; padding-block: 1.5rem 3rem; } /* Sprungmarke: sichtbar erst bei Tastaturfokus. */ .uf-skip{ position: absolute; left: 16px; top: -100px; z-index: 1000; display: inline-flex; align-items: center; min-height: var(--uf-touch); padding: 0 1rem; background: var(--uf-link); color: #fff; text-decoration: none; border-radius: var(--uf-radius); } .uf-skip:focus{ top: 16px; color: #fff; } /* Fuer Screenreader vorhanden, visuell entfernt. */ .uf-vh, .screen-reader-text{ position: absolute !important; /* Barrierefreiheit: darf nicht ueberschreibbar sein */ 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; } .screen-reader-text:focus{ position: static !important; width: auto; height: auto; margin: 0; clip: auto; clip-path: none; padding: .75rem 1rem; background: #fff; color: var(--uf-ink); } /* -------------------------------------------------------------------------- 10. Brotkrume -------------------------------------------------------------------------- */ .uf-krume{ font-size: .875rem; color: var(--uf-mut); margin: 0 0 .75rem; } .uf-krume-liste{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .uf-krume-teil{ margin: 0; display: inline-flex; align-items: center; gap: .35rem; } .uf-krume-trenner{ color: var(--uf-line-ui); } .uf-krume a{ color: inherit; text-decoration: none; } .uf-krume a:hover{ color: var(--uf-link); text-decoration: underline; } /* -------------------------------------------------------------------------- 11. Autorenkasten und Seitenmeta -------------------------------------------------------------------------- */ .uf-meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; color: var(--uf-mut); margin: 0 0 1rem; } .uf-autor{ display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; margin: 2rem 0 1rem; border: 1px solid var(--uf-line); border-radius: var(--uf-radius); background: #f6f8fb; } .uf-autor__bild{ flex: 0 0 auto; border-radius: 999px; } .uf-autor__name{ font-weight: 700; color: var(--uf-ink); margin: 0 0 .25rem; font-size: 1rem; } .uf-autor__text{ margin: 0; font-size: .9375rem; } @media (max-width: 560px){ .uf-autor{ flex-direction: column; } } /* -------------------------------------------------------------------------- 12. Gutenberg-Grundlagen Die 27 Seiten dieses Portals enthalten Block-Markup. Ohne diese wenigen Regeln liegt es unausgerichtet. -------------------------------------------------------------------------- */ .alignleft{ float: left; margin: 0 1.5rem 1rem 0; } .alignright{ float: right; margin: 0 0 1rem 1.5rem; } .aligncenter{ margin-inline: auto; } .alignwide, .alignfull{ max-width: none; } .wp-block-image img{ margin-inline: auto; } .wp-caption{ max-width: 100%; } .wp-caption-text{ font-size: .875rem; color: var(--uf-mut); } .clearfix::after{ content: ""; display: table; clear: both; } /* -------------------------------------------------------------------------- 13. WooCommerce-Notfallschicht Die WooCommerce-Stylesheets sind abbestellt (67 KB, s. functions.php). Was davon auf diesem Portal ueberhaupt sichtbar wird, sind Hinweismeldungen und das Suchergebnis-Raster. Beides steht hier — mehr wird nicht gebraucht, solange es weder Warenkorb noch Kasse gibt. -------------------------------------------------------------------------- */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ list-style: none; margin: 0 0 1rem; padding: .75rem 1rem; border-left: 3px solid var(--uf-link); background: #f6f8fb; border-radius: var(--uf-radius); } .woocommerce-error{ border-left-color: #dc2626; } .woocommerce ul.products{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .woocommerce ul.products li.product{ margin: 0; } .woocommerce ul.products li.product a{ text-decoration: none; } .woocommerce ul.products li.product h2{ font-size: 1rem; margin: .5rem 0 .25rem; } .screen-reader-text + .woocommerce-ordering{ margin: 0 0 1rem; } /* -------------------------------------------------------------------------- 14. Druck -------------------------------------------------------------------------- */ @media print{ .uf-skip, nav, form{ display: none !important; } /* Druck: Ausnahme begruendet */ body{ font-size: 11pt; color: #000; background: #fff; } a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; } }