/* style.css */ /* Theme Name: Vitalpilze GfV Theme URI: https://vitalpilze.de Description: Eigenständiges Theme für die Gesellschaft für Vitalpilzkunde (GfV) Author: Detlef Stöver Author URI: https://vitalpilze.de Version: 1.1.62 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: two-columns, right-sidebar, responsive-layout Text Domain: vitalpilze */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Raleway:wght@400;600&display=swap'); /* ========================================================= Design-System – CSS Custom Properties Brand Manual v1.00 (Mai 2022) + Web-Erweiterungen ========================================================= */ :host { /* Farben (Brand Manual) */ --basic-color-1: rgb(107, 114, 47); /* Armeegrün – Primary */ --basic-color-2: rgba(170, 176, 104); /* Laubgrün – Accent */ --basic-color-3: rgb(93, 75, 23); /* Mokka – Secondary */ --basic-color-4: rgb(255, 255, 255); /* White – Secondary */ --basic-color-5: rgb(219, 214, 210); /* Zen – Secondary */ /* Armeegrün-Abstufungen für Web (Hover, Schatten) */ --basic-color-6: hsl(95deg 30% 40%); --basic-color-7: hsl(95deg 100% 15%); --basic-color-8: hsl(95deg 60% 25%); --basic-color-9: hsl(95deg 30% 50%); /* Dunkelgrün der Knöpfe und dunklen Texte im Mitgliederbereich – bisher überall als Literal (#132E00). Die einzige Farbe hier, die sich nicht aus der Brand-Palette mischen lässt. */ --vp-dunkelgruen: #132E00; /* Aus der Palette abgeleitet (28.09.2026, „Keine Werte im Code"): helle Flächen und Ränder sind Zen, mit Weiß aufgehellt. Ändert sich Zen, ziehen sie mit. */ --vp-kasten-rand: color-mix(in srgb, var(--basic-color-5) 70%, var(--basic-color-4)); /* vorher #e3e4dd */ --vp-flaeche-hell: color-mix(in srgb, var(--basic-color-5) 25%, var(--basic-color-4)); /* vorher #F6F6F1 */ --vp-feld-rand: color-mix(in srgb, var(--basic-color-3) 40%, var(--basic-color-4)); /* vorher #bbb */ /* Konto-Formulare und Hinweise (Profil, Kasse, Kündigung) */ --vp-label-size: .85rem; /* Labels und Hinweistexte teilen sie */ --vp-hinweis-streifen: var(--basic-color-3); /* Streifen des Grund-Hinweises (Mokka) */ /* Fehlerfarbe aus GFV → Einstellungen → Allgemein (vp_error_color → --vp-error-color). */ --vp-feld-fehler-farbe: var(--vp-error-color, currentColor); /* Fonts */ --font-1: 'Raleway', sans-serif; /* Headlines */ --font-2: 'Open Sans', sans-serif; /* Body */ /* Typografie-Skala */ --font-header-size: 40px; --font-subheader-size: 30px; --font-title-size: 27px; --font-subtitle-size: 24px; --font-base-size: 21px; --font-body-size: 18px; --font-small-size: 15px; /* Layout */ --vp-max-width: 1200px; /* Seitlicher Mindestabstand des Inhalts zur Fensterkante. Er wird NICHT als padding gesetzt, sondern ueber die max-width der Inhaltsbloecke — die lange Begruendung steht beim Abschnitt „Seitenrand" weiter unten. Wer ihn irgendwo aufheben will, setzt die Variable auf 0; so macht es der Mitgliederbereich, der eigenes Padding mitbringt. */ --vp-gutter: 16px; --vp-submenu-left: 0; --vp-submenu-width: 710.75px; /* Platzhalter-Farbe */ --color-placeholder: rgb(170, 176, 104); /* Semantische Farb-Aliase */ --vp-default-body-background-color: #fff; --vp-default-body-color: #000; --vp-default-active-background-color: rgba(102, 142, 43, 0.37); --vp-default-extra-color1: var(--basic-color-1); --vp-default-extra-color2: var(--basic-color-3); --vp-default-background-color: var(--basic-color-1); --vp-default-border-color: #5b7c00; --vp-default-hover-color: #5b7c00; --vp-default-color: #fff; --vp-title-color: var(--vp-default-background-color); --vp-button-border-color: var(--vp-default-background-color); --vp-button-border-inverse-color: var(--vp-default-color); --vp-button-background-color: var(--vp-default-background-color); --vp-button-extra-color: var(--vp-default-extra-color1); --vp-button-hover-background-color: var(--vp-default-hover-color); --vp-button-color: var(--vp-default-color); --vp-button-hover-color: var(--vp-default-color); --vp-link-default-color: var(--vp-default-background-color); --vp-link-inverse-color: var(--vp-default-color); --vp-link-hover-color: var(--vp-default-hover-color); --vp-link-active-color: var(--vp-default-color); /* Hintergrundbild (Header) */ --vp-logo: url('https://dev.vitalpilze.de/wp-content/themes/vitalpilze/images/gfv-background.jpeg'); } /* ========================================================= Styles – übernommen und bereinigt aus getwid-vitalpilze ========================================================= */ :host { overflow-x: hidden; /* verhindert horizontales Scrollen durch 100vw-Pseudoelemente */ } :host { font-family: var(--font-2); font-size: var(--font-body-size); color: var(--basic-color-3) !important; } /* Diese Regel setzt Farbe, Kursivschrift UND Unterstrich. Ein `` fiel ihr deshalb zum Opfer und erschien auf der oeffentlichen Seite als kursiver, unterstrichener Textlink statt als Knopf — auf /mitglied-werden/ war das der Kaufknopf. Statt die Regel nachtraeglich mit immer hoeherer Spezifitaet zu ueberschreiben (und dabei die Haelfte der Eigenschaften stehen zu lassen, siehe den Warnkommentar bei .vp-membership-table thead th), wird .vp-btn hier ausgenommen — genauso, wie es die Block-Buttons schon sind. ⛔⛔ `:where()` UM DAS ARGUMENT IST PFLICHT, NICHT GESCHMACK — es haelt die Spezifitaet bei 0. Ein blosses `:not(.vp-btn)` zaehlt seine Klasse MIT: Aus 0,0,2 wird 0,1,2, und damit schlaegt diese Regel ploetzlich alles, was auf 0,1,1 liegt — also jede Regel der Form `.klasse a` irgendwo in den anderen Stylesheets. Am 14.09.2026 genau so passiert: Die Navigation im Mitgliederbereich (.vp-account-nav a, .vp-member-menu-list a, .vp-member-back a in css/member-page.css) bekam Unterstriche und braune statt weisser Schrift. Die Aenderung stand im Theme, der Schaden zwei Dateien weiter — gemeldet hat es der Betreiber. Die Lehre steht hier und nicht im Vorgangsdokument: Eine Ausnahme, die die Spezifitaet anhebt, ist keine Ausnahme mehr, sondern eine neue Regel — und die gewinnt gegen Dinge, an die beim Schreiben niemand gedacht hat. `:not(:where(…))` nimmt nur aus, ohne zu gewinnen. */ :host a:not(:where(.vp-btn)) { color: var(--basic-color-3); font-style: italic; text-decoration: underline 1px solid var(--basic-color-2); } :host a:not(.wp-block-button__link):not(.wp-element-button):not(:where(.vp-btn)):hover { color: var(--basic-color-1); } :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 { font-family: var(--font-1); font-weight: 400; color: var(--basic-color-1); } :host h1 strong, :host h2 strong, :host h3 strong, :host h4 strong { font-weight: 700; color: inherit; } :host h1 { font-size: var(--font-header-size); } :host h2 { font-size: var(--font-subheader-size); } :host h3 { font-size: var(--font-title-size); } :host h4 { font-size: var(--font-subtitle-size); } :host h5 { font-size: var(--font-base-size); } :host h6 { font-size: var(--font-body-size); } blockquote.blockquote { background: var(--basic-color-5); box-shadow: 0.5em 0.5em var(--basic-color-2); font-family: var(--font-2); font-style: italic; font-weight: bold; line-height: 1.5; padding: 0.5em 1em; margin: 10em; } /* Notiz-Blockquote (vitalpilze-note Shortcode) */ .wp-block-quote { margin: 2.5rem 0; /* überschreibt Browser-Default blockquote { margin: 1em 40px } */ font-size: 1.1rem; font-style: italic; color: var(--basic-color-3); } .wp-block-quote p { margin-bottom: 0; } /* Erster Absatz = Flex: Zeichen links eigenständig, Text rechts (kein Umlauf darunter) */ .wp-block-quote p:first-of-type { display: flex; align-items: flex-start; gap: 1rem; } .wp-block-quote p:first-of-type::before { content: '\201C'; flex: 0 0 auto; font-size: 5rem; line-height: 0.75; font-style: normal; color: var(--basic-color-1); } .link { background: var(--basic-color-1); border-radius: 5px; color: var(--basic-color-4); padding: 0.5em; } .link:hover { background: var(--basic-color-3); color: var(--basic-color-4); cursor: pointer; } .inline-block { display: inline-block !important; } /* notice boxes */ .notice { background: #fff; border: 1px solid #c3c4c7; border-left-width: 4px; box-shadow: 0 1px 1px rgb(0 0 0 / 4%); margin: 5px 15px 2px; padding: 1px 12px; } .notice p { margin: 0.5em 0; padding: 2px; } .notice.notice-success { background-color: #e1ffe8; border-left-color: #00a32a; } .notice.notice-warning { background-color: #fff7e1; border-left-color: #ffb900; } .notice.notice-error { background-color: #fae6e6; border-left-color: #d63638; } .notice.notice-info { background-color: #e1f8ff; border-left-color: #00a0d2; } /* borlab cookies */ .borlabs-cookie-preference svg { scale: 0.5; } /* bootstrap */ :host .dropdown-toggle::after { display: none !important; } :host .nav-pills .nav-link { color: var(--basic-color-3); background-color: var(--basic-color-5); } :host .nav-pills .nav-link:hover { background-color: var(--basic-color-3); color: var(--basic-color-4); text-decoration: none; } :host .nav-pills .nav-link.active, :host .nav-pills .show>.nav-link { background-color: var(--basic-color-2); color: var(--basic-color-4); } :host .button:hover { color: var(--vp-default-color); } /* ================================ Seitenrand ================================= Bis zum 14.09.2026 hatte der Inhalt GAR KEINEN seitlichen Abstand. Was auf dem Desktop wie einer aussah, war der Rest der Zentrierung: Die Bloecke sind auf --vp-max-width (1200px) begrenzt und mit `margin: auto` mittig gesetzt — bei 1280px Fenster bleiben links und rechts 40px uebrig, bei 390px genau 0. Der Text klebte also auf JEDER oeffentlichen Seite an der Kante, und zwar schon unterhalb von 1200px Fensterbreite. Gemeldet hat es der Betreiber. Der Abstand sitzt am gemeinsamen Container `#main.site-main` — und zwar aus einem handfesten Grund: Der erste Anlauf am selben Tag setzte ihn ueber die max-width der Inhaltsbloecke (`.hentry > .entry-content > *`). Das wirkte auf jeder SEITE, aber auf keiner Ansicht, die aus einer VORLAGE kommt: 404, Suchergebnis mit und ohne Treffer, Blog- und Autorenarchiv, das Webinar-Archiv und die Webinar-Einzelansicht standen weiterhin auf 0. Gefunden hat es der Master — durch einen Tippfehler in der Adresse, nicht durch die Pruefliste: Eine Liste aus `wp post list --post_type=page` kann eine Ansicht ohne Seite gar nicht enthalten. `.site-main` umschliesst alle diese Vorlagen (404.php, archive.php, search.php, index.php, single.php, page.php, front-page.php) — und kuenftige gleich mit. Der Mitgliederbereich benutzt es NICHT (er hat `main.vp-member-main`), bleibt also von selbst unberuehrt. ⚠️ Warum kein padding an den BLOECKEN und keines zusaetzlich: Beides zusammen rueckt doppelt ein (16 vom Container plus 16 vom Block = 32 bei 390px). Der Container traegt den Rand, die Bloecke tragen nur noch ihre Breitenbegrenzung. Die Zahlen bleiben dadurch exakt, wie sie waren: bei 1280px ist der Innenraum 1248, der 1200er Block darin mittig, also 16 + 24 = 40 wie vorher; bei 390px sind es 16. ⚠️ Warum die Vollbreiten-Elemente das ueberleben: `.vp-container` (die farbigen Baender der Startseite) laeuft nicht selbst ueber die volle Breite — sein HINTERGRUND tut es, ueber ein `::before` mit `width:100vw; left:50%; transform:translateX(-50%)`. Das ist am Viewport ausgerichtet, nicht am Block. Ein schmalerer, weiterhin mittiger Block aendert daran nichts. Nachgemessen bei 390, 768 und 1280px. ⚠️ Geschaltet wird ueber die Variable --vp-gutter, NICHT ueber `:not(...)` im Selektor. Ein `:not()` zaehlt sein Argument mit und haette die Spezifitaet angehoben; genau das hat am selben Tag schon einmal acht fremde Regeln ueberstimmt (siehe den Kommentar bei `body a`). Eine Variable aendert keine Spezifitaet. ============================================================================ */ #main.site-main { padding-left: var(--vp-gutter, 16px); padding-right: var(--vp-gutter, 16px); } /* Der Mitgliederbereich bringt seinen Abstand im eigenen Layout mit (.vp-member-inner). Die Zeile wirkt heute nicht — sein Container heisst `vp-member-main`, nicht `site-main`, die Regel darueber trifft ihn also gar nicht. Sie steht trotzdem hier, damit die Absicht („dieser Bereich bekommt KEINEN zusaetzlichen Rand") eine Vorlagen-Umstellung ueberlebt. */ :host(.vp-template-member-page) { --vp-gutter: 0px; } /* Basis-Layout (entry-header, Detailseiten-Abstände etc.) */ .site-main .entry-header, .site-main .page-header { text-align: center; margin-top: 3em; } :host .hentry>.entry-header, :host .hentry>.entry-footer, :host .hentry>.post-thumbnail, :host .hentry>.entry-content>* { max-width: var(--vp-max-width); margin-left: auto; margin-right: auto; /* ⚠️ Gehoert zum Seitenrand oben, ist keine Kosmetik. Mit dem Rand wird der Textblock schmaler — und ein sehr langes Wort ohne Trennstelle passt dann nicht mehr in die Zeile. In den AGB steht eine ausgeschriebene Adresse (https://ec.europa.eu/consumers/odr/, 313px breit); bei 390px Fenster ragte sie nach dem Einruecken 7px nach rechts hinaus und machte die Seite schiebbar. Vorher fiel das nicht auf, weil der Block die volle Fensterbreite hatte. `break-word` und nicht `anywhere`: Es bricht NUR, wenn es sonst ueberlaufen wuerde, und laesst die Mindestbreiten-Berechnung in Flex/Grid unberuehrt. Normaler Fliesstext sieht damit aus wie vorher. */ overflow-wrap: break-word; } /* Der Aktions-Block der Webinar-Einzelseite bekommt dieselbe Linie wie der Text darueber. Die Regel oben trifft nur KINDER von .entry-content. `.vp-webinar-action` ist aber ein GESCHWISTER davon (single-vitalpilze_webinar.php: header.entry-header, div.entry-content, div.vp-webinar-action sind die drei direkten Kinder des article) — sie erreicht ihn nie. Ergebnis: Die Absaetze standen bei 1280px auf 40, der „In den Warenkorb"-Knopf darunter auf 16. Bei 390px stehen beide auf 16, dort faellt nichts auf. ⚠️ Warum hier und nicht im Plugin-CSS: `vp_webinar_render_single_body()` steigt fuer Besucher OHNE Zugang frueh aus (shortcode.php:154) und gibt `vp_webinar_render_action()` zurueck, BEVOR `vp_webinar_recording_styles()` laeuft. Eine Regel dort fehlte also ausgerechnet im Zustand mit dem Kauf-Knopf — dem einzigen, um den es geht. ⚠️ Warum an die Body-Klasse gebunden und nicht an `.vp-webinar-action` allein: Dieselbe Klasse steht ein drittes Mal im Mitgliederbereich (inc/member-chrome.php:263). Der ist nicht gemeint und bringt seinen Abstand selbst mit. */ :host(.single-vitalpilze_webinar) .hentry>.vp-webinar-action { max-width: var(--vp-max-width); margin-left: auto; margin-right: auto; } :host(.tribe-filter-live) .site-main>.hentry>.entry-header, :host(.single) .site-main>.hentry>.entry-header, :host(.page) .site-main>.hentry>.entry-header { max-width: var(--vp-max-width); margin-top: 3.5rem; } /* Vitalpilz-Detailseite: Abstände zwischen Übertitel/Titel/Eintragstitel halbieren */ :host(.single-vitalpilze_mushroom) .site-main .page-header .pre-page-title { margin-bottom: 0; } :host(.single-vitalpilze_mushroom) .site-main .page-header .page-title { margin-top: 0.2em; margin-bottom: 0.2em; } :host(.single-vitalpilze_mushroom) .site-main>.hentry>.entry-header { margin-top: 1.75rem; } :host(.single-vitalpilze_mushroom) .site-main>.hentry>.entry-header .entry-title { margin-bottom: 1.75rem; } :host(.home.tribe-filter-live) .site-main>.hentry>.entry-header, :host(.home.page) .site-main>.hentry>.entry-header, :host(.home.page) .site-main>.hentry>.entry-footer, :host(.home.page) .site-main>.hentry>.post-thumbnail, :host(.home.page) .site-main>.hentry>.entry-content>* { max-width: var(--vp-max-width); margin-left: auto; margin-right: auto; padding-top: 5em; } :host(.tribe-filter-live) .site-main>.hentry>.entry-header .entry-title, :host(.single) .site-main>.hentry>.entry-header .entry-title, :host(.page) .site-main>.hentry>.entry-header .entry-title { margin: 0 auto 3.5rem; text-align: center; } /* FAQ-Seite: Akkordeon näher an den Titel */ :host(.page-id-1384) .site-main>.hentry>.entry-header .entry-title { margin-bottom: 1.5rem; } :host .widget-area .widget a { color: inherit; } .vp-seperator { margin-top: 1em !important; margin-bottom: 1em !important; } /* Therapeuten-Seite: mehr Abstand um die Trennlinie zwischen Legende und Suche */ :host(.page-id-448) .vp-seperator { margin-top: 2em !important; margin-bottom: 2em !important; } .vp-column-3 { columns: 250px 3; } .vp-post-image, .vp-post-image>figure { margin: 0em 3em 0 0 !important; width: min(400px, 100%) !important; } .vp-post-image img { margin: 0 1em 1em 0; width: 100% !important; max-width: inherit !important; } .site-main .page-header .pre-page-title, .site-main .entry-header .pre-page-title, .hentry>.entry-header .pre-entry-title { display: flex; flex: 1; line-height: 150%; justify-content: center; text-transform: uppercase; } @media (min-width: 1200px) { :host(.page) .site-main>.hentry>.entry-header, :host(.page) .site-main>.hentry>.entry-footer, :host(.page) .site-main>.hentry>.post-thumbnail, :host(.page) .site-main>.hentry>.entry-content>* { max-width: var(--vp-max-width); margin-left: auto; margin-right: auto; } } /* sidebar right */ .hentry>.entry-content .vitalpilze-list-menu h3:not(:nth-child(1)) { padding-top: 1em; } .hentry>.entry-content .vitalpilze-menu-title { font-weight: bold; padding: 0.5em 1em 0.5em 2em; text-transform: uppercase; } .hentry>.entry-content .vitalpilze-list-menu { list-style: none; max-width: 100%; padding: 0.5em 1em 0.5em 2em; } .hentry>.entry-content .vitalpilze-list-menu li { padding: 0.4em 0; } .hentry>.entry-content .vitalpilze-list-menu>li>a { color: inherit; text-decoration: none; } .hentry>.entry-content .vitalpilze-list-menu>li>a:hover { color: var(--basic-color-1); } .hentry>.entry-content .vitalpilze-list-menu li.active { position: relative; } .hentry>.entry-content .vitalpilze-list-menu li.active::before { content: ""; position: absolute; left: -0.9em; top: 50%; transform: translateY(-50%); border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--basic-color-1); } .vitalpilze-theme-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 2.5rem; box-sizing: border-box; } .vitalpilze-theme-col-left { flex: 1 1 0; box-sizing: border-box; min-width: 0; } .vitalpilze-theme-col-right { flex: 0 0 30%; box-sizing: border-box; min-width: 0; } @media (max-width: 781px) { .vitalpilze-theme-col-left, .vitalpilze-theme-col-right { flex-basis: 100% !important; } } .vitalpilze-theme-row .vitalpilze-theme-col-right { background: var(--basic-color-5); padding: 1.25em 1em; } /* Bild links floaten + Text läuft darunter weiter */ .vitalpilze-theme-col-left .wp-block-image.alignleft { float: left; margin: 0 2em 1em 0; } /* Clearfix */ .vitalpilze-theme-col-left::after { content: ""; display: table; clear: both; } /* Mobil (WordPress-Standard <782px): Spalten stapeln sich automatisch */ @media (max-width: 781px) { .vitalpilze-theme-row .vitalpilze-theme-col-right { margin: 0 !important; } } /* background container */ .vp-container { position: relative; padding-top: 3em; padding-bottom: 3em; margin-bottom: 0 !important; } .vp-container:before { content: ""; background: var(--basic-color-5); position: absolute; left: 50%; right: 0; top: 0; bottom: 0; width: 100vw; transform: translate(-50%, 0); z-index: -1; } .vp-container-light:before { content: ""; background: var(--basic-color-4); position: absolute; left: 50%; right: 0; top: 0; bottom: 0; width: 100vw; transform: translate(-50%, 0); z-index: -1; } .vp-container-pilze:before { background-color: var(--basic-color-4); background-image: var(--vp-logo); background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: .2; height: 150%; } /* vertical fit to content */ .vp-vertical-fill .wp-block-column { display: flex; flex-direction: column; } .vp-vertical-fill .wp-block-column>p { flex: 1; } /* block header */ .wp-block-column>h3 { margin-bottom: 0.5em; } /* image shadow */ /* Bild-Stile: vp-img-shadow und vp-img-radius-quarter → in blocks.css */ /* buttons and links */ /* Basis-Button-Mixin: Army Green → Hover Mokka, uppercase */ input[type="submit"], input[type="button"], button.vp-btn, a.vp-btn, .button, .wp-block-file__button, .mepr-btn, .mp-btn { display: inline-block; background: var(--basic-color-1); color: var(--basic-color-4); border: none; border-radius: 5px; padding: 0.75em 1.75em; font-family: var(--font-2); font-size: var(--font-small-size); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.2s; } input[type="submit"]:hover, input[type="button"]:hover, button.vp-btn:hover, a.vp-btn:hover, .button:hover, .wp-block-file__button:hover, .mepr-btn:hover, .mp-btn:hover { background: var(--basic-color-3); color: var(--basic-color-4); text-decoration: none; } a.more-link, a.more-link:hover { color: var(--basic-color-4); text-decoration: none; } /* header */ #vp-header-overlay { height: 5.5rem; position: relative; overflow: hidden; } #vp-header-overlay:after { background: var(--basic-color-2); content: ""; position: absolute; width: 100%; height: 100%; opacity: 0.8; } #vp-header-overlay .vp-header-layer { aspect-ratio: 16/10; background-image: var(--vp-logo); position: absolute; left: 0; top: 50%; right: 0; width: 100%; height: auto; opacity: 1; transform: translate(0, -50%); } #masthead.site-header img.custom-logo { max-width: 150px; } /*@media (min-width: 992px){ #masthead.site-header img.custom-logo { margin-top: -12px; } }*/ /* fix header on PC/Laptop screens */ /*@media (max-width: 768px){ #masthead .main-navigation:not(.toggled) { display: none; } }*/ @media (min-width: 992px) { :host { margin-top: 5.5rem !important; } #vp-header-overlay { margin-top: 5.5rem !important; } .masthead-fixed { background: var(--basic-color-4); position: fixed; top: 0; left: 0; right: 0; z-index: 1003; } #masthead.site-header { max-width: var(--vp-max-width); } } /* footer */ .footer-sidebars-wrapper.vp-footer { color: var(--basic-color-4); padding: 0; font-size: var(--font-small-size); font-family: var(--font-2); } .footer-sidebars-wrapper.vp-footer .footer-sidebars { max-width: 100%; width: 100%; flex-direction: column; } .footer-sidebars-wrapper.vp-footer .footer-line-content { max-width: var(--vp-max-width); margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 50px 0 0; } .footer-sidebars-wrapper.vp-footer .footer-line-1 { background: var(--basic-color-1); } .footer-sidebars-wrapper.vp-footer .footer-line-2 { background: var(--basic-color-3); } .footer-sidebars-wrapper.vp-footer .widget-area-1, .footer-sidebars-wrapper.vp-footer .widget-area-2 { min-width: 25%; } .footer-sidebars-wrapper.vp-footer .widget-area-3 { min-width: 50%; } .footer-sidebars-wrapper.vp-footer .widget-area-4 { min-width: 40%; } .footer-sidebars-wrapper.vp-footer .widget-area-5, .footer-sidebars-wrapper.vp-footer .widget-area-6, .footer-sidebars-wrapper.vp-footer .widget-area-7 { min-width: 20%; } .footer-sidebars-wrapper.vp-footer .widget-area-4 img { max-width: 250px; width: 100%; } .footer-sidebars-wrapper.vp-footer input[type=text], .footer-sidebars-wrapper.vp-footer input[type=email], .footer-sidebars-wrapper.vp-footer select { background: transparent; border: none; border-bottom: 1px solid var(--basic-color-2); color: var(--basic-color-4); margin-bottom: 1em; } .footer-sidebars-wrapper.vp-footer select.input { padding: 0.25em !important; } .footer-sidebars-wrapper.vp-footer input[type=text]:focus, .footer-sidebars-wrapper.vp-footer input[type=email]:focus, .footer-sidebars-wrapper.vp-footer select:focus, .footer-sidebars-wrapper.vp-footer input[type=text]:active, .footer-sidebars-wrapper.vp-footer input[type=email]:active, .footer-sidebars-wrapper.vp-footer select:active { border-bottom: 1px solid var(--basic-color-4); } .footer-sidebars-wrapper.vp-footer select[name=anrede] option:first-child, .footer-sidebars-wrapper.vp-footer *::placeholder { color: var(--basic-color-2); opacity: 1; } .footer-sidebars-wrapper.vp-footer a { color: var(--basic-color-4); text-decoration: none; } /* Newsletter-Formular im Footer (Aufbau wie V1): E-Mail über die volle Breite, darunter Anrede · Vorname · Nachname, dann Listen in einer Zeile, Zustimmung, Knopf. */ .footer-sidebars-wrapper.vp-footer .mailster-form-fields { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 0.5em; } .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-wrapper { flex: 1 1 100%; } .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-wrapper.mailster-anrede-wrapper { flex: 0 0 auto; min-width: 0; width: auto; } .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-firstname-wrapper, .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-lastname-wrapper { flex: 1 1 0; min-width: 0; } /* Felder erben die Footer-Schrift (WebKit nimmt sonst system-ui in kleiner Größe). */ .footer-sidebars-wrapper.vp-footer .mailster-form input[type=text], .footer-sidebars-wrapper.vp-footer .mailster-form input[type=email], .footer-sidebars-wrapper.vp-footer .mailster-form select { font: inherit; letter-spacing: inherit; width: 100%; } .footer-sidebars-wrapper.vp-footer .mailster-form select[name=anrede] { color: var(--basic-color-2); } .footer-sidebars-wrapper.vp-footer .mailster-lists-wrapper { display: flex; align-items: baseline; gap: 2em; } .footer-sidebars-wrapper.vp-footer .mailster-lists-wrapper ul.mailster-list { display: flex; flex-wrap: wrap; gap: 0 2em; list-style: none; margin: 0; padding: 0; } .footer-sidebars-wrapper.vp-footer .mailster-lists-wrapper ul.mailster-list > li { margin: 0; } .footer-sidebars-wrapper.vp-footer .mailster-lists-wrapper > label { white-space: nowrap; } /* Sternchen am Listen-Label wie Text (V1), nicht im Stil der Mailster-Pflichtmarke */ .footer-sidebars-wrapper.vp-footer .mailster-lists-wrapper > label .mailster-required { color: inherit; font-size: inherit; } .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-dsgvo-wrapper { margin: 1em 0; } .footer-sidebars-wrapper.vp-footer .mailster-list-description { display: none; } .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-dsgvo-wrapper a, .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-_gdpr-wrapper a { text-decoration: underline; } .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-submit-wrapper input[type=submit] { font-weight: 500; } @media (max-width: 480px) { /* schmal wie V1: Vorname und Nachname je eine eigene Zeile */ .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-firstname-wrapper, .footer-sidebars-wrapper.vp-footer .mailster-form .mailster-lastname-wrapper { flex-basis: 100%; } } .footer-sidebars-wrapper.vp-footer a:hover { color: var(--basic-color-2); } /* Klassische Nav-Menü-Widgets (Fallback) */ .footer-sidebars-wrapper.vp-footer .widget_nav_menu .menu { list-style: none; padding: 0; margin: 0; } .footer-sidebars-wrapper.vp-footer .widget_nav_menu .menu li { margin-top: 0.5em; } /* Gutenberg List-Block im Footer */ .footer-sidebars-wrapper.vp-footer .wp-block-list { list-style: none; padding: 0; margin: 0; } .footer-sidebars-wrapper.vp-footer .wp-block-list li { margin-top: 0.5em; } .footer-sidebars-wrapper.vp-footer .widget-area { padding: 0 1.5em 2.5em; /* ⚠️ `border-box` gehört zum `padding` darüber und steht deshalb hier, nicht anderswo. Ohne die Zeile lief die Fußzeile auf JEDER Seite der Website waagerecht über: Die Breiten der Bereiche summieren sich je Reihe auf genau 100 % (25+25+50 und 40+20+20+20) — bei `content-box` kommt der Innenabstand OBENDRAUF, also je Reihe 3 bzw. 4 × 45 px. Gemessen am 04.09.2026: 140 px Überstand bei 1280 px Fensterbreite, 180 px bei 1200 px, auf Startseite, Kontakt, Impressum, Datenschutz und Mitglied-werden gleichermaßen. ⚠️ Nicht die Media-Query mit `flex-wrap: nowrap` (Zeile ~872) ist die Ursache — das war die naheliegende Vermutung und sie ist durch Halbieren zur Laufzeit WIDERLEGT: Mit erzwungenem Umbruch blieb der Überstand unverändert bei 140 px. Eine Reihe belegt schon für sich 100 % plus Innenabstand; Umbrechen hilft dagegen nichts. ⚠️ Der Selektor ist mit Absicht derselbe wie beim Innenabstand: nur die Widget-Bereiche DIESER Fußzeile. Ein allgemeineres `box-sizing` (oder gar `*`) verschöbe Layouts an Stellen, die niemand angesehen hat. Folge, vom Betreiber gewollt: Die Spalten sind 300/300/600 statt 345/345/645 — der Inhalt wird je 45 px schmaler, die Aufteilung bleibt. */ box-sizing: border-box; } /* Abstände zwischen Widget-Blöcken reduzieren */ .footer-sidebars-wrapper.vp-footer .widget { margin-bottom: 0; } .footer-sidebars-wrapper.vp-footer p { margin-top: 0.15em; margin-bottom: 0.3em; } .footer-sidebars-wrapper.vp-footer h5 { color: var(--basic-color-4); font-family: var(--font-2); font-size: var(--font-title-size); font-weight: 600; margin-top: 0; margin-bottom: 0.4em; } /* Sub-Label innerhalb eines Widgets (z.B. "Folge uns auf Facebook", "Hotline") */ .footer-sidebars-wrapper.vp-footer .vp-footer-title { display: inline-block; width: 100%; font-size: var(--font-small-size); font-weight: 700; margin-top: 1.2em; } footer#colophon { background: var(--basic-color-3); padding: 1em 0; margin: 0; } footer#colophon .site-info { color: var(--basic-color-5); max-width: var(--vp-max-width); margin: 0 auto; padding: 0 1.5em; text-align: center; } footer#colophon .site-info-powered { display: block; margin-top: 0.25em; font-size: 0.85em; opacity: 0.7; } footer#colophon .site-info-powered a { color: inherit; text-decoration: underline; } /* facebook logo */ .vp-facebook { display: flex; flex-flow: column nowrap; } .vp-facebook .container { display: flex; flex-flow: row nowrap; height: 50px; align-items: center; padding: 0.5em 0; gap: 1em; } .vp-facebook .logo { display: flex; } .vp-facebook .logo svg { width: 42px; height: 42px; } .vp-facebook .links { display: flex; flex-flow: column nowrap; } @media (min-width: 992px) { .footer-sidebars-wrapper.vp-footer .footer-line-content { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .site-header .site-title { display: none; } .site-content, .footer-sidebars-wrapper { margin-top: 0; } .site-content { margin-bottom: 3em; position: relative; } .footer-sidebars-wrapper { margin-bottom: 0; } /* homepage */ .vp-home-header h1 { font-size: 1.5em !important; } @media (min-width: 990px) { .vp-home-header h1 { font-size: 2em !important; } } /* ============================================================ Erkrankungen – Buchstabenfilter + Listen ============================================================ */ /* Alphabet-Button-Leiste */ .vitalpilze-search-container { margin-bottom: 1.5em; } .vitalpilze-search { display: flex; flex-flow: row wrap; justify-content: center; list-style: none; padding: 0; margin: 0 0 3px; gap: 3px; } /* Tastatur-Versatz: N (15. Element = ☰ + A-M) startet versetzt → Keyboard-Stagger */ @media (min-width: 768px) { .vitalpilze-search > li:nth-child(15) { margin-left: 25px; } } /* Vergrößertes ☰-Symbol nur im Erkrankungen-Filter (nicht im Lexikon, wo "A" erster Button ist) */ #vitalpilze-diseases-search .vitalpilze-search > li:first-child a { font-size: 1.2em; line-height: 1; transform: translateY(-0.1em); } .vitalpilze-search > li { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--basic-color-1); overflow: hidden; margin: 0; box-sizing: border-box; flex-shrink: 0; } .vitalpilze-search > li.active { background: rgba(102, 142, 43, 0.37); } .vitalpilze-search a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--basic-color-3); text-decoration: none; font-weight: 700; font-size: var(--font-small-size); } .vitalpilze-search > li.active a { color: var(--basic-color-3); } .vitalpilze-search > li a:hover { background: #6B722F; color: #fff !important; } /* Erkrankungsliste */ .vitalpilze-list-diseases { list-style: none; padding: 0; } .vitalpilze-list-diseases > li { padding: 0.25em 0; } /* Veterinär-Tabs (Katze/Pferd/Hund) – eigenständig, kein Bootstrap */ .vitalpilze-disease-tabs .nav-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; list-style: none; padding: 0; margin: 0 0 1.5em; } .vitalpilze-disease-tabs .nav-item { margin: 0; min-width: 9em; text-align: center; } .vitalpilze-disease-tabs .nav-link { display: block; padding: 0.6em 1.5em; border: 1px solid var(--basic-color-1); border-radius: 5px; color: var(--basic-color-3); background: transparent; text-decoration: none; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s; } .vitalpilze-disease-tabs .nav-link:hover { background: var(--basic-color-3); color: var(--basic-color-4) !important; } .vitalpilze-disease-tabs .nav-link.active { background: var(--basic-color-1); color: var(--basic-color-4) !important; } /* Panes: nur aktiver sichtbar, Bild + Liste nebeneinander */ .vitalpilze-disease-tabs .tab-pane { display: none; } .vitalpilze-disease-tabs .tab-pane.active { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 1.5em; } .vitalpilze-disease-tabs .disease-animal { flex: 0 0 auto; margin-bottom: 1em; } .vitalpilze-disease-tabs .disease-animal img { display: block; max-width: 250px; width: 100%; height: auto; border-radius: 5px; } .vitalpilze-diseases .vp-disease-list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; flex: 1 1 0; min-width: 0; } .vitalpilze-diseases .vp-disease-list li { padding: 0.3em 0; } @media (max-width: 600px) { .vitalpilze-disease-tabs .disease-animal { flex-basis: 100%; order: 2; } .vitalpilze-disease-tabs .disease-animal img { max-width: 100%; } } @media (min-width: 768px) { .vitalpilze-small-size { clear: both; max-width: 760px; margin: auto; } } /* ============================================================ Akkordeon (core/details) – z.B. FAQ-Seite ============================================================ */ .wp-block-details { border: 1px solid var(--basic-color-5); border-radius: 5px; margin-bottom: 0.75em; background: var(--basic-color-4); overflow: hidden; } .wp-block-details > summary { display: flex; align-items: center; gap: 0.75em; padding: 1em 1.25em; font-family: var(--font-1); font-size: var(--font-body-size); font-weight: 700; color: var(--basic-color-1); cursor: pointer; list-style: none; transition: background 0.2s, color 0.2s; } /* Standard-Dreieck entfernen */ .wp-block-details > summary::-webkit-details-marker { display: none; } .wp-block-details > summary::marker { content: ""; } /* Eigenes +/− Symbol links */ .wp-block-details > summary::before { content: "+"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--basic-color-1); color: var(--basic-color-4); font-size: 1.1em; line-height: 1; font-weight: 400; } .wp-block-details[open] > summary::before { content: "\2212"; /* Minus */ } .wp-block-details > summary:hover { background: var(--basic-color-5); } .wp-block-details[open] > summary { background: var(--basic-color-5); border-bottom: 1px solid var(--basic-color-5); } .wp-block-details > *:not(summary) { padding: 0 1.25em; } .wp-block-details > summary + * { padding-top: 1em; margin-top: 0; } .wp-block-details > *:last-child { padding-bottom: 1em; } /* ============================================================ Download-Bereich ([vp-downloads] Shortcode) ============================================================ */ .vp-downloads { list-style: none; margin: 0 0 2em; padding: 0; display: flex; flex-direction: column; gap: 0.75em; } .vp-download-link { display: flex; align-items: center; gap: 1em; padding: 0.75em 1em; border: 1px solid var(--basic-color-5); border-radius: 5px; background: var(--basic-color-4); text-decoration: none !important; color: var(--basic-color-3); transition: background 0.2s, border-color 0.2s; } .vp-download-link:hover { background: var(--basic-color-5); border-color: var(--basic-color-1); } .vp-download-thumb { flex: 0 0 auto; display: flex; } .vp-download-thumb svg { display: block; width: 40px; height: 40px; } .vp-download-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .vp-download-title { font-family: var(--font-1); font-weight: 700; color: var(--basic-color-1); } .vp-download-meta { font-size: var(--font-small-size); color: var(--basic-color-3); opacity: 0.7; } .vp-download-action { flex: 0 0 auto; padding: 0.4em 1.1em; border-radius: 5px; background: var(--basic-color-1); color: var(--basic-color-4) !important; font-size: var(--font-small-size); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .vp-download-link:hover .vp-download-action { background: var(--basic-color-3); } @media (max-width: 600px) { .vp-download-action { display: none; } } /* shortcode menu */ .hentry .entry-content>div { margin-bottom: 2em; } /* Pilz-Teaser: Titel oben, darunter Bild links + Text rechts */ .vp-mushroom-item { padding: 2em 0; border-bottom: 1px solid var(--basic-color-5); } .vp-mushroom-item:first-child { padding-top: 0; } .vp-mushroom-item:last-child { border-bottom: none; } .vp-mushroom-item__title { margin-top: 0; margin-bottom: 0.75em; font-weight: 700; } .vp-mushroom-item__body::after { content: ""; display: table; clear: both; } .vp-mushroom-item__image { float: left; width: 400px; max-width: 45%; margin-right: 3em; margin-bottom: 1em; } .vp-mushroom-item__image figure { margin: 0; } .vp-mushroom-item__image img { width: 100%; height: auto; display: block; box-shadow: 15px 15px 0 0 rgb(170 176 104 / 50%); } .vp-mushroom-item__content p:last-of-type { margin-bottom: 1em; } .vp-mushroom-item__content .wp-block-buttons { margin-top: 1.5em; } @media (max-width: 600px) { .vp-mushroom-item__image { float: none; width: 100%; max-width: 100%; margin-right: 0; } } .vitalpilze-menu img { max-width: 300px; width: 100%; } .vitalpilze-menu .vp-image-box__content, .vitalpilze-menu .wp-block-media-text__content { text-align: left; } /* mailster */ .mailster-form-info.error ul li:before { content: "-"; margin-right: 5px; } .mailster-form-info.error ul li { margin: 0; } .mailster-form .mailster-wrapper { display: inline-block; } .mailster-form .mailster-wrapper.mailster-_coolcaptcha-wrapper { display: flex; align-items: end; flex-direction: row-reverse; } .mailster-form .mailster-wrapper.mailster-anrede-wrapper.col-sm-2 { min-width: 5.6em; width: 15%; } .mailster-form .mailster-wrapper.mailster-_gdpr-wrapper { margin: 1em 0; } .mailster-form .mailster-wrapper.mailster-_gdpr-wrapper label { padding-left: 1.5em; } .mailster-form .mailster-wrapper.mailster-_gdpr-wrapper input[name=_gdpr] { position: absolute; left: 0; } .mailster-form .mailster-wrapper.mailster-submit-wrapper { display: block; } .mailster-form .mailster-wrapper.mailster-submit-wrapper input[type=submit] { background: var(--basic-color-5); border-radius: 5px; color: var(--basic-color-3); padding: 1em; } .mailster-form .mailster-wrapper.mailster-submit-wrapper input[type=submit]:hover { background: var(--basic-color-2); } /* the events calendar enhancements */ .tribe-events-back a { color: var(--base-color-2) !important; font-size: 15px; font-weight: 700; text-decoration: none; } #tribe-events, #tribe-events-pg-template, .tribe-events-pg-template { background-color: var(--tec-color-background-events); padding: 40px 20px 20px; } .vitalpilz-event-referents { padding: 0 0 1em; } .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-subscribe-dropdown { margin-left: auto; margin-right: auto; } .tribe-common--breakpoint-medium.tribe-common .tribe-common-g-row--gutters>.tribe-common-g-col { width: 100%; } .single-tribe_events .tribe-blocks-editor h1.tribe-events-single-event-title { font-size: var(--font-subtitle-size); } .tribe-events-calendar-list__event-datetime .timezone, .duration.time .timezone, .duration.time .at { color: #b9bec2; } ul.ecs-event-list { list-style: none; padding: 0; } ul.ecs-event-list>li.ecs-event { margin-bottom: 2em; } /* memberpress enhancements */ .mepr_spacer { display: flex; width: 100%; } #mepr-account-welcome-message { margin-bottom: 1em; } .mp_wrapper form { display: flex; flex-flow: row wrap; justify-content: space-between; text-align: left; gap: 1em; } .mp_wrapper form>div { margin: 0; width: 100%; } .mp_wrapper form.mepr-form h3 { font-size: 100%; font-weight: bold; text-transform: uppercase; color: var(--basic-text-color); } .mp_wrapper form .mp-form-row { max-width: calc(var(--vp-max-width) / 2 - 2em); } .mp_wrapper form .mp-form-row.mepr_price { max-width: 100%; margin-bottom: 2em; } .mp_wrapper form .mp-form-row.vp-notice { width: 100% !important; max-width: 100% !important; } .mp_wrapper form>.mepr-payment-methods-wrapper { display: flex; width: 100%; flex-flow: column nowrap; background: #f5f5f5; padding: 1em; } .mp_wrapper form .mp-form-row.mepr_mepr_ist_mykotherapeut { display: contents; } .mp_wrapper form .mp-form-row.mepr_payment_method-wrapper { display: flex; flex-flow: row wrap; margin: 0 !important; max-width: 100%; width: 100%; } .mp_wrapper form .mp-form-row.mepr_payment_method { margin: 0 !important; padding: 0 0.5em !important; } .mp_wrapper .mepr-payment-method { margin: 5px 0; } .mp_wrapper .mepr-payment-method-label .mp-checkbox-field { display: flex !important; flex-flow: row nowrap; align-items: center; } .mp_wrapper form>.mp-form-submit { display: block; margin-top: 1em; width: 100%; } .mp-form-row.mepr_vat_customer_type_row { margin-top: 1em; } .mp_wrapper form .mp-form-row.mepr_mepr_anrede { display: flex; flex-flow: column wrap; max-width: 100% !important; } .mp_wrapper form .mp-form-row.mepr_mepr_anrede .mp-form-label { width: 100%; max-width: 100%; } .mp_wrapper form .mp-form-row.mepr_mepr_anrede select { max-width: 7em; } .mp_wrapper form .iti--separate-dial-code { display: flex; } .mp_wrapper form .mp-form-row.mepr_mepr_nachweis>a { margin: 1em 0; padding: 0 0.15em; display: inline-block; } #mepr_nachweis { margin: 0.5em 0 1em; } .mp_wrapper form.mepr-signup-form .tos-wrapper { display: flex; flex-flow: row wrap; width: 100%; gap: 1em; margin-top: 1em; } @media (min-width: 800px) { .mp_wrapper form>div { width: calc(100% / 2 - 1em); } .mp_wrapper form .mp-form-row.mepr_payment_method, .mp_wrapper form.mepr-signup-form .tos-wrapper>div { flex: 1; } } @media (min-width: 1326px) { .mp-form-row.mepr_vat_customer_type_row { margin-top: 0; align-items: center; display: flex; min-height: 4.4em; } } .mp_wrapper textarea, .mp_wrapper select, .mp_wrapper input[type=text], .mp_wrapper input[type=url], .mp_wrapper input[type=email], .mp_wrapper input[type=tel], .mp_wrapper input[type=number], .mp_wrapper input[type=password] { height: auto; } .mp_wrapper.mp_invoice th:last-child { text-align: right; } .mepr_vat_number_row+.mepr_spacer { /*display: none;*/ } #mepr-account-nav { border: 1px solid var(--vp-default-border-color); padding: 0.5em; text-align: center; display: flex; flex-direction: column; } #mepr-account-nav .mepr-nav-item { display: contents; } #mepr-account-nav .mepr-nav-item.mepr-active-nav-tab>a { background: var(--vp-default-active-background-color); color: var(--vp-link-default-color); text-decoration: none; } #mepr-account-nav .mepr-nav-item>a { padding: 0.75em; text-decoration: none; } #mepr-account-nav .mepr-nav-item>a:hover { background: var(--vp-default-background-color); color: var(--vp-default-color); text-decoration: none; } .wp-block-memberpress-protected-content .vp-protected-content-message { background: var(--basic-color-5); color: var(--basic-color-3); padding: 1em; } .mpcs-course-list .course-progress { background: var(--basic-color-6); } .mpcs-course-list .course-progress .user-progress { background: var(--basic-color-7); color: var(--basic-color-4); } /* :host(.vp-no-webinar) .mp_wrapper { display: none; } */ @media (min-width: 480px) { #mepr-account-nav { flex-direction: row; padding: 0; } } /* shortcode suppliers */ /* Länder-Pills in Button-Optik: ruhend Dunkelgrün #132E00, Hover + aktiv im Hover-Grün #39661A (aktiver Reiter bleibt unterscheidbar). !important schlägt sicher das Blocks-CSS (.vp-tabs.is-style-pills …) unabhängig von der Ladereihenfolge. Gilt überall, wo die Lieferantenliste erscheint (öffentlich + Mitgliederbereich). */ .vitalpilze-suppliers .vp-tabs__nav-link { background: #132E00 !important; color: #fff !important; border-color: #132E00 !important; } .vitalpilze-suppliers .vp-tabs__nav-link:hover, .vitalpilze-suppliers .vp-tabs__nav-link:focus-visible, .vitalpilze-suppliers .vp-tabs__nav-link.is-active { background: #39661A !important; color: #fff !important; border-color: #39661A !important; } .vitalpilze-suppliers .vp-supplier-country { margin-bottom: 2em; } .vitalpilze-suppliers .vp-supplier-country-title { margin: 0 0 0.5em; } .vitalpilze-suppliers .vp-supplier-list { border: 1px solid #ccc; display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; width: 100%; } .vitalpilze-suppliers .vp-supplier-list>li { display: flex; flex-direction: column; gap: 0.25em; padding: 0.75em; margin: 0; position: relative; } .vitalpilze-suppliers .vp-supplier-list>li:nth-child(even) { background: var(--basic-color-9); } .vitalpilze-suppliers .vp-supplier-list>li:nth-child(odd) { background: var(--basic-color-6); } .vitalpilze-suppliers .vp-supplier-name { font-weight: 700; } @media (min-width: 768px) { .vitalpilze-suppliers .vp-supplier-list>li { flex-direction: row; gap: 1em; } .vitalpilze-suppliers .vp-supplier-list>li>div { flex: 1 1 0; min-width: 0; /* erlaubt Schrumpfen → Spalten bleiben im Rahmen, lange URLs brechen um */ } .vitalpilze-suppliers .vp-supplier-list>li .vp-supplier-url { text-align: right; } } .vitalpilze-suppliers .vp-supplier-url a { overflow-wrap: anywhere; } /* member area: „Bestellungen"/Rechnungen-Tabelle – Farben wie Lieferanten-Liste */ .vp-account-content table.vp-invoices-table { border: 1px solid #ccc; border-collapse: collapse; width: 100%; } .vp-account-content table.vp-invoices-table th, .vp-account-content table.vp-invoices-table td { padding: 0.75em; text-align: left; border: none; } .vp-account-content table.vp-invoices-table thead th { background: var(--basic-color-6); color: #fff; } .vp-account-content table.vp-invoices-table tbody tr:nth-child(even), .vp-account-content table.vp-invoices-table tbody tr:nth-child(even) td { background: var(--basic-color-9); } .vp-account-content table.vp-invoices-table tbody tr:nth-child(odd), .vp-account-content table.vp-invoices-table tbody tr:nth-child(odd) td { background: var(--basic-color-6); } /* therapist finder */ .hentry>.entry-content .therapists-legend { display: flex; flex-wrap: wrap; list-style: none; padding: 0; } .hentry>.entry-content .therapists-legend>li { margin: 0.5em; } .hentry>.entry-content .therapists-legend>li .vp-profession { max-height: 1.25em; } /* Therapeutensuche – Umkreissuche */ .vp-therapist-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1em; max-width: var(--vp-max-width); margin: 0 auto 1em; } .vp-search-field { display: flex; flex-direction: column; gap: 0.25em; } .vp-search-field label { font-size: var(--font-small-size); font-weight: 700; color: var(--basic-color-3); } .vp-search-field input[type="text"], .vp-search-field input[type="number"], .vp-search-field select { padding: 0.5em 0.75em; border: 1px solid var(--basic-color-5); border-radius: 5px; font-family: var(--font-2); /* font-size + line-height + box-sizing identisch → gleiche Höhe für alle Felder (Browser-Default für