/**
* Wissensdatenbank – Frontend.
*
* Das Aussehen der Reiter kommt aus vitalpilze-blocks/assets/style.css: Die Klassen
* .vp-tabs__nav-link und .vp-tabs__panel sind dort NICHT auf .vp-tabs gescopt, greifen also
* auch hier. Diese Datei ergaenzt nur, was der Block nicht kennt – die scrollende Leiste, den
* Hinweis auf Verdecktes und den Schliessen-Knopf.
*/
.vp-db-search { display: flex; gap: .5rem; margin: 0 0 1.25rem; }
/* ⚠️ Das Feld MUSS seine Optik selbst mitbringen – die Browser-Vorgaben sind zwischen den
Engines nicht vergleichbar. Gemessen am 28.08.2026 auf dieser Seite:
Chromium: Feld 38,2px – so hoch wie der Button, Schrift Arial 13,3px
WebKit: Feld 19,0px – 19,2px NIEDRIGER als der Button, Schrift -apple-system 11px
WebKit gibt `input[type=search]` die native Suchfeld-Darstellung; die bringt eine eigene
feste Höhe mit, an der das `align-items: stretch` des Flex-Containers nichts ändert. Genau
das hat der Betreiber gemeldet („im Vivaldi eckig, im Safari rund"), und genau das sieht
man nicht, wenn man nur in Chromium nachsieht.
`appearance: none` schaltet die native Darstellung ab – danach greift stretch, und beide
Engines zeigen dasselbe. Damit dabei nichts nackt aussieht, stehen Rahmen, Radius,
Innenabstand und Schrift hier ausdrücklich. Radius 3px wie der Button daneben
(vitalpilze/css/member-page.css), nicht der Zufallswert der einen oder anderen Engine.
Nebenwirkung, bewusst in Kauf genommen: Safaris Löschen-Kreuz im Feld
(::-webkit-search-cancel-button) verschwindet mit. Chromium hat ohnehin keins – zurückgeholt
wäre es wieder ein Unterschied zwischen den beiden. */
.vp-db-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
-webkit-appearance: none;
appearance: none;
font: inherit;
padding: .6rem .8rem;
border: 1px solid rgba(0, 0, 0, .25);
border-radius: 3px;
background: #fff;
color: inherit;
}
.vp-db-group { margin: 1.25rem 0 .35rem; }
.vp-db-count { font-weight: 400; opacity: .7; }
.vp-db-list { list-style: none; margin: 0; padding: 0; }
.vp-db-list li { padding: .3rem 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.vp-db-hint { opacity: .7; font-size: .9em; margin-left: .4rem; }
.vp-db-empty { opacity: .75; font-style: italic; }
/* --- Kategorie: nur die Ausnahme -------------------------------------
Das Etikett gibt es NUR fuer Tiermedizin und Human- plus Tiermedizin (siehe
vp_db_domain_badge() in inc/frontend.php). Es sitzt in der .vp-db-hint-Zeile, muss sich
aber von ihr abheben: Die Zeile ist absichtlich blass (opacity .7) und flach – das Etikett
ist die eine Angabe darin, die auffallen soll.
⚠️ Die opacity der Elternzeile wirkt auf Kindelemente und laesst sich von hier NICHT
zuruecknehmen — sie liegt auf dem gerenderten Kasten, nicht auf der Farbe. Deshalb traegt
das Etikett einen kraeftigen Rahmen statt eines dunkleren Textes: Kontrast ueber die Form,
nicht ueber die Farbe.
⚠️ Nicht nur Farbe: Wer rot/gruen nicht unterscheidet, sieht sonst gar nichts. Der Rahmen
und der eigene Untergrund tragen die Aussage allein. */
.vp-db-domain {
display: inline-block;
margin-left: .45rem;
padding: .05em .5em;
border: 1px solid currentColor;
border-radius: 999px;
font-size: .92em;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
vertical-align: baseline;
}
/* --- Reiterleiste ---------------------------------------------------
Sie scrollt waagerecht, statt umzubrechen: Entscheidung des Betreibers. Kein Reiter
schliesst sich je von selbst – wer sich durch fuenf Studien gearbeitet hat, soll die erste
nicht verlieren, weil die sechste aufging. */
/* Gespiegelt aus dem Blocks-CSS (.vp-tabs): Der Container traegt jene Klasse absichtlich
nicht mehr — die Begruendung steht in inc/frontend.php an der Ausgabestelle. */
.vp-db-tabs { margin: 1.5em 0; }
.vp-db-tabs__bar { display: flex; align-items: flex-end; gap: .5rem; }
.vp-db-tabs__nav {
flex: 1 1 auto;
flex-wrap: nowrap; /* ueberschreibt das Umbrechen des Block-CSS */
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scroll-behavior: smooth;
}
/* ⚠️ Der Reiter ist das , nicht der Knopf darin.
Grund: Der Schliessen-Knopf steht als eigenes Element NEBEN dem Reiter-Knopf (ein Button in
einem Button waere ungueltiges HTML). Trueg der Knopf allein die Farbe, endete die
Reiterflaeche vor dem „×" — das Kreuz klebte auf dem Seitenhintergrund, und der Reiter sah
aus wie ein Rechteck mit angeklebtem Fremdkoerper. Deshalb wandern Hintergrund, Rundung und
Rahmen auf das ; der Knopf wird durchsichtig und der Schliessen-Knopf liegt INNERHALB
der Flaeche. Die Werte stammen unveraendert aus vitalpilze-blocks/assets/style.css
(.vp-tabs__nav-link), damit ein Reiter hier so aussieht wie im Tabreiter-Block.
⚠️ Das Blocks-CSS selbst wird nicht angefasst — es traegt auch den Gutenberg-Block und die
Lieferantenliste. */
.vp-db-tabs__item {
display: flex;
align-items: stretch;
flex: 0 0 auto;
/* Hoechstens 150px, und zwar die SICHTBARE GESAMTBREITE inklusive Schliessen-Knopf
(Betreiber, 28.08.2026). Keine feste Breite: „Reishi" soll schmal bleiben duerfen —
die Angabe ist eine Obergrenze, keine Vorgabe. */
max-width: 150px;
/* ⚠️ `width: max-content` gehoert dazu, sonst ist die Obergrenze eine VORGABE: Ohne diese
Zeile wurde „Reishi" auf volle 150px aufgeblasen, weil das als Flex-Element seine
Breite nicht mehr aus dem Inhalt zieht, sobald der Text darin abgeschnitten werden darf
(overflow:hidden nimmt ihm die intrinsische Breite). Gemessen: kurz wie lang beide
exakt 150px. */
width: max-content;
border-radius: 6px 6px 0 0;
background: var(--basic-color-5, #DBDCD2);
color: var(--basic-color-1, #6B722F);
}
.vp-db-tabs__item:hover { background: var(--basic-color-2, rgba(170, 176, 104, 1)); color: #fff; }
.vp-db-tabs__item.is-active { background: var(--basic-color-1, #6B722F); color: #fff; }
.vp-db-tabs__item .vp-tabs__nav-link {
/* Die Farbe kommt jetzt vom . Der Knopf behaelt nur Abstaende und Schrift. */
background: transparent;
color: inherit;
min-width: 0; /* ohne das ignoriert ein Flex-Kind das Abschneiden */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* lange Studientitel enden mit „…", statt zu sprengen */
padding-right: .4em; /* den Rest der Flaeche fuellt der Schliessen-Knopf */
}
.vp-db-tabs__item .vp-tabs__nav-link:hover,
.vp-db-tabs__item .vp-tabs__nav-link:focus-visible,
.vp-db-tabs__item .vp-tabs__nav-link.is-active { background: transparent; color: inherit; }
/* ⚠️ Mindestens 24x24px. Vorher war der Knopf 25x18 und blass (opacity .55) — technisch
funktionierte er, aber er war schwer zu treffen: Wer danebenklickt, landet auf dem Reiter
und AKTIVIERT ihn nur. Fuer den Betreiber sah das aus, als ginge der Knopf nicht. */
.vp-db-tabs__close {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
min-width: 24px; min-height: 24px;
align-self: center;
margin-right: .35em;
border: 0; border-radius: 3px; background: transparent; cursor: pointer;
font-size: 1.15rem; line-height: 1;
color: inherit; opacity: .75;
}
.vp-db-tabs__close:hover, .vp-db-tabs__close:focus-visible {
opacity: 1; background: rgba(0, 0, 0, .12);
}
/* --- Reiter nach Typ (Betreiber, 08.10.2026: „gelb für Indikationen, grün für Vitalpilze, braun für Studien“) ----------------
Die Grundfarben kommen als Variablen aus den Einstellungen (--vp-db-tab-species|indication|study, inc/frontend.php). Alles
Weitere ist daraus ABGELEITET: aktiv = Grundfarbe, Hover = halb zur Fläche hin, inaktiv = blass. Fläche und dunkle Schrift
sind Theme-Farben (--basic-color-4 Weiß, --vp-dunkelgruen); feste Farbwerte stehen hier nur als Rückfall ohne Theme.
Reiter ohne Typ (sollte nicht vorkommen) behalten die bisherige Farbe von oben. */
/* Anteile der Typfarbe je Zustand — am Container, überschreibbar (Betreiber, 08.10.2026: inaktiv „noch kräftiger … so sieht man
fast keinen Unterschied“; vorher 22 % / 55 %). Aktiv ist immer 100 %. */
.vp-db { --vp-db-tab-mix-inaktiv: 45%; --vp-db-tab-mix-hover: 70%; }
/* Grün und Braun inaktiv kräftiger als Gelb (Betreiber, 08.10.2026 auf 0.29.2: „gelb passt. Grün und Braun noch etwas kräftiger“):
eigene Anteile je Typ, sonst gilt der Container-Wert. Grün-Hover 75 %: darüber kippt die dunkle Schrift (80 % → 4,29:1), und weiße
trüge erst ab ~95 % — dann wäre der Hover vom aktiven Reiter nicht mehr zu unterscheiden. */
.vp-db-tabs__item[data-typ="species"], .vp-db-tabs__morelist [data-typ="species"] { --tab: var(--vp-db-tab-species, var(--basic-color-1, #6B722F)); --tab-text-aktiv: var(--basic-color-4, #fff);
--tab-mix-inaktiv: 60%; --tab-mix-hover: 75%; }
/* ⚠️ Braun beim Hover: Bei 70 % liegt es genau in der Mitte, wo WEDER dunkle (3,83:1) NOCH weiße Schrift (3,86:1) 4,5:1 erreicht
(gerechnet und gemessen 08.10.2026). Darum hier 80 % mit weißer Schrift (4,95:1) — weiter zur aktiven Farbe hin, statt zurück. */
.vp-db-tabs__item[data-typ="study"], .vp-db-tabs__morelist [data-typ="study"] { --tab: var(--vp-db-tab-study, var(--basic-color-3, #5D4B17)); --tab-text-aktiv: var(--basic-color-4, #fff);
--tab-mix-inaktiv: 60%; --tab-mix-hover: 80%; --tab-text-hover: var(--basic-color-4, #fff); }
/* Auf Gelb dunkle Schrift — weiße wäre dort nicht lesbar (Kontrast in der Abnahme gemessen). */
.vp-db-tabs__item[data-typ="indication"], .vp-db-tabs__morelist [data-typ="indication"] { --tab: var(--vp-db-tab-indication); --tab-text-aktiv: var(--vp-dunkelgruen, #132E00); } /* Grundfarbe immer aus PHP (Einstellung oder Vorgabe) */
/* Rezepturen (seit 0.39.0): Grundfarbe immer aus PHP (Einstellung oder Vorgabe var(--basic-color-2)), weiße Schrift aktiv. */
.vp-db-tabs__item[data-typ="recipe"], .vp-db-tabs__morelist [data-typ="recipe"] { --tab: var(--vp-db-tab-recipe); --tab-text-aktiv: var(--basic-color-4, #fff); }
.vp-db-tabs__item[data-typ] {
background: color-mix(in srgb, var(--tab) var(--tab-mix-inaktiv, var(--vp-db-tab-mix-inaktiv)), var(--basic-color-4, #fff));
color: var(--vp-dunkelgruen, #132E00);
}
.vp-db-tabs__item[data-typ]:hover {
background: color-mix(in srgb, var(--tab) var(--tab-mix-hover, var(--vp-db-tab-mix-hover)), var(--basic-color-4, #fff));
color: var(--tab-text-hover, var(--vp-dunkelgruen, #132E00));
}
.vp-db-tabs__item[data-typ].is-active { background: var(--tab); color: var(--tab-text-aktiv); }
/* ⚠️ Der Knopf IM Reiter muss durchsichtig sein, sonst sieht man die Typfarbe nur neben dem ×: Im Mitgliederbereich färbt
member-page.css JEDEN .vp-tabs__nav-link mit !important dunkel-/hovergrün (Button-Optik der Tabreiter). Gemessen
08.10.2026: Die Farbe am stimmte, im Bild war der Reiter trotzdem dunkelgrün. Nur für Reiter MIT Typ, nur hier. */
body.vp-template-member-page .vp-db-tabs__item[data-typ] .vp-tabs__nav-link,
body.vp-template-member-page .vp-db-tabs__item[data-typ] .vp-tabs__nav-link:hover,
body.vp-template-member-page .vp-db-tabs__item[data-typ] .vp-tabs__nav-link:focus-visible,
body.vp-template-member-page .vp-db-tabs__item[data-typ] .vp-tabs__nav-link.is-active {
background: transparent !important; color: inherit !important; border-color: transparent !important;
}
/* --- × nur am aktiven Reiter; an den anderen beim Überfahren und bei Tastaturfokus ------------------------------------------
`visibility` statt `display`: Der Platz bleibt, der Reiter springt beim Überfahren nicht in der Breite. Verborgen ist der Knopf
auch per Tab-Taste nicht erreichbar — darum :focus-within: Steht der Fokus auf dem Reiter, erscheint sein ×, und die nächste
Tab-Taste erreicht es. Farbe: die des Reiters (color: inherit oben). */
.vp-db-tabs__item .vp-db-tabs__close { visibility: hidden; }
.vp-db-tabs__item.is-active .vp-db-tabs__close,
.vp-db-tabs__item:hover .vp-db-tabs__close,
.vp-db-tabs__item:focus-within .vp-db-tabs__close { visibility: visible; }
/* Geräte ohne Hover (Touch): nur am aktiven Reiter — einen anderen schließt man, nachdem man ihn angetippt hat. Ein
„klebendes" :hover nach dem Antippen soll das × dort nicht stehen lassen. */
@media (hover: none) {
.vp-db-tabs__item:not(.is-active):hover:not(:focus-within) .vp-db-tabs__close { visibility: hidden; }
}
/* Der Hinweis auf verdeckte Reiter. Er ist ein Knopf und kein Text, weil er etwas tut. */
.vp-db-tabs__more {
flex: 0 0 auto; align-self: center; cursor: pointer;
border: 1px solid var(--basic-color-1, #6B722F); border-radius: 999px;
background: transparent; color: var(--basic-color-1, #6B722F);
padding: .2rem .6rem; font-size: .85rem; white-space: nowrap;
}
.vp-db-tabs__more:hover, .vp-db-tabs__more:focus-visible {
background: var(--basic-color-1, #6B722F); color: #fff;
}
/* Die Liste der verdeckten Reiter (Klick auf „x weitere"). Sie hängt unter dem Knopf, rechtsbündig, über dem Inhalt. Je Eintrag
ein Streifen in der Typfarbe des Reiters (--tab, aus den Typregeln oben). */
.vp-db-tabs__bar { position: relative; }
.vp-db-tabs__morelist {
position: absolute; right: 0; top: 100%; z-index: 20;
margin: .25rem 0 0; padding: .25rem 0; list-style: none;
min-width: 12rem; max-width: min(24rem, 100%); max-height: 60vh; overflow-y: auto;
background: var(--basic-color-4, #fff);
border: 1px solid var(--basic-color-1, #6B722F); border-radius: 6px;
box-shadow: 0 4px 12px color-mix(in srgb, var(--vp-dunkelgruen, #132E00) 20%, transparent);
}
.vp-db-tabs__morelist li { margin: 0; padding: 0; display: flex; align-items: stretch; }
.vp-db-tabs__morelist li > [role="menuitem"] { flex: 1 1 auto; min-width: 0; }
/* × je Eintrag: wie an den Reitern sichtbar beim Überfahren und bei Tastaturfokus, auf Touch-Geräten immer. Farbe vom Eintrag. */
.vp-db-tabs__morelist .vp-db-tabs__morelist-close {
flex: 0 0 auto; width: auto; min-width: 24px; min-height: 24px; align-self: center; margin: 0 .35rem;
border: 0; border-radius: 3px; padding: 0 .3rem; background: transparent; color: inherit;
font-size: 1.15rem; line-height: 1; cursor: pointer; visibility: hidden;
}
.vp-db-tabs__morelist li:hover .vp-db-tabs__morelist-close,
.vp-db-tabs__morelist li:focus-within .vp-db-tabs__morelist-close { visibility: visible; }
@media (hover: none) { .vp-db-tabs__morelist .vp-db-tabs__morelist-close { visibility: visible; } }
.vp-db-tabs__morelist .vp-db-tabs__morelist-close:hover,
.vp-db-tabs__morelist .vp-db-tabs__morelist-close:focus-visible {
background: color-mix(in srgb, var(--tab, var(--basic-color-5, #DBDCD2)) var(--vp-db-tab-mix-inaktiv), var(--basic-color-4, #fff));
}
.vp-db-tabs__morelist button {
display: block; width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
margin: 0; border: 0; border-left: .4rem solid var(--tab, var(--basic-color-5, #DBDCD2)); border-radius: 0;
background: transparent; color: var(--vp-dunkelgruen, #132E00);
padding: .4rem .75rem; font: inherit; line-height: 1.3;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-db-tabs__morelist button:hover, .vp-db-tabs__morelist button:focus-visible {
background: color-mix(in srgb, var(--tab, var(--basic-color-5, #DBDCD2)) var(--vp-db-tab-mix-inaktiv), var(--basic-color-4, #fff));
outline: none;
}
.vp-db-tabs__morelist button[aria-current="true"] { font-weight: 600; }
/* --- Ein Eintrag ---------------------------------------------------- */
.vp-db-entry__title { margin: 0 0 .25rem; }
/* Der englische Originaltitel unter der deutschen Ueberschrift. Klein und zurueckgenommen,
aber NICHT versteckt: Er ist der Bezug zur Quelle, den ein Heilpraktiker zitiert.
Erscheint nur, wenn es eine Uebersetzung gibt -- sonst steht er selbst oben (inc/frontend.php,
vp_db_render_study_title). */
.vp-db-entry__original {
margin: 0 0 .6rem;
font-size: .85em;
line-height: 1.35;
opacity: .7;
}
.vp-db-lat { margin: 0 0 .75rem; opacity: .8; }
.vp-db-rel__label { margin: 1rem 0 .3rem; }
/* ⚠️ Die Kurzfassung hat seit dem 29.08.2026 KEINE Flaeche mehr (Betreiber). Geblieben ist
das Etikett darueber: Es kennzeichnet eine Maschinen-Uebersetzung und ist damit keine
Gestaltung, sondern eine Angabe -- wer die Flaeche entfernt, nimmt es nicht mit.
Der Abstand bleibt, sonst klebt der Text an der Autorenzeile darueber. */
.vp-db-summary { margin: .75rem 0; }
.vp-db-summary__label { margin: 0 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
/* Abschnittsüberschriften der Langfassung (h4) mit kleinerem Abstand darunter (Betreiber, 07.10.2026: „Die großen Titel …
allerdings mit kleinerem Padding-bottom“). Gemessen: Den Abstand macht kein Padding, sondern die Browser-Vorgabe
margin-bottom 1.33em (≈ 32 px), die mit dem margin-top des folgenden Absatzes (18 px) zusammenfällt. Darum ZWEI Regeln:
h4 unten kleiner UND der Absatz direkt danach ohne eigenen Abstand oben — sonst bliebe die Lücke bei 18 px stehen.
Nur in der Langfassung (.vp-db-longform), nicht für alle h4. Der Wert ist eine Variable am Container, überschreibbar. */
.vp-db-longform { --vp-db-longform-kopf-abstand: .3em; }
.vp-db-longform h4 { margin-bottom: var(--vp-db-longform-kopf-abstand); }
.vp-db-longform h4 + p { margin-top: 0; }
.vp-db-summary p:last-child { margin-bottom: 0; }
/* Das „>" vor Vitalpilzen und Indikationen -- ueber CSS und NICHT als Zeichen im HTML.
Der Grund ist nicht Geschmack: Ein Zeichen im Markup wanderte in die Zwischenablage, in
Suchergebnisse und in den Newsletter mit. `::before` bleibt, wo es hingehoert -- auf dem
Bildschirm. `aria-hidden` braucht es nicht: Erzeugte Inhalte liest kein Screenreader als
Text des Eintrags vor.
Studienlisten bekommen es bewusst nicht (Wortlaut des Auftrags). */
.vp-db-rel--species > li::before,
.vp-db-rel--indication > li::before {
content: ">";
margin-right: .4rem;
opacity: .55;
font-weight: 700;
}
.vp-db-disclaimer { margin-top: 2rem; font-size: .85rem; opacity: .75; }
/* Die Herkunftsangabe steht direkt unter dem Hinweis und gehoert optisch zu ihm -- deshalb
kein zweiter grosser Abstand darueber. Etwas kleiner, aber NICHT verblasst: Sie ist eine
Angabe, keine Randnotiz, und der Betreiber hat sie aus einem rechtlichen Grund verlangt. */
.vp-db-herkunft { margin-top: .5rem; font-size: .8rem; opacity: .8; line-height: 1.5; }
/* Die Quellenzeile unter einer Studie. Sie traegt den Nachweis (Quelle, PMID, DOI, Link) und
steht deshalb nicht kleiner da als der uebrige Text. */
.vp-db-source { margin: .75rem 0 0; font-size: .9em; }
.vp-db-source a { white-space: nowrap; }
.vp-db-gate { padding: 1rem; background: var(--basic-color-5, #DBDCD2); border-radius: 6px; }
@media (max-width: 600px) {
.vp-db-search { flex-wrap: wrap; }
}
/* --- Suche: Kategorie, Feld und die aufklappende Trefferliste -----------------------
Die Liste liegt ueber dem Inhalt (position:absolute), damit das Aufklappen die Reiter
darunter nicht verschiebt -- sie sollen an ihrer Stelle bleiben, waehrend man sucht. */
.vp-db-search { position: relative; align-items: stretch; }
.vp-db-search__typ {
-webkit-appearance: none;
appearance: none;
flex: 0 0 auto;
font: inherit;
font-size: 1rem;
line-height: 1.4;
padding: .6rem 2rem .6rem .8rem;
border: 1px solid rgba(0, 0, 0, .25);
border-radius: 3px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23132E00' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right .7rem center;
background-size: 10px 6px;
color: inherit;
}
.vp-db-suggest {
position: absolute;
z-index: 20;
top: 100%;
left: 0;
right: 0;
margin-top: .25rem;
max-height: 60vh;
overflow-y: auto;
background: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.vp-db-suggest__list { list-style: none; margin: 0; padding: 0; }
.vp-db-suggest__list li { margin: 0; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.vp-db-suggest__list li:last-child { border-bottom: 0; }
.vp-db-suggest__list a {
display: block;
padding: .55rem .8rem;
text-decoration: none;
color: inherit;
}
.vp-db-suggest__list a:hover,
.vp-db-suggest__list a:focus { background: #F2F6EE; }
/* Die Fundstelle im Titel. `mark` ist hier die richtige Auszeichnung und nicht nur Farbe:
Sie sagt auch Vorleseprogrammen, dass diese Stelle den Treffer traegt. */
.vp-db-suggest mark { background: #FFF3A3; color: inherit; padding: 0 .1em; }
/* „gefunden in: Autoren" – steht nur da, wo der Treffer NICHT im Titel sichtbar ist. */
.vp-db-suggest__feld { display: block; font-size: .82rem; opacity: .7; margin-top: .15rem; }
.vp-db-suggest__hint { margin: 0; padding: .55rem .8rem; font-size: .88rem; opacity: .8; }
/* ------------------------------------------------------------------
Zurückgezogen — die Warnung an einer redaktionell zurueckgezogenen Studie.
⚠️ Der Eintrag BLEIBT sichtbar (Betreiber, 02.09.2026): Wer sich die Studie notiert hat,
soll die Richtigstellung finden statt vor einer Luecke zu stehen. Der Block ist deshalb
deutlich, aber kein Fehlerbalken — er sagt "das gilt nicht mehr", nicht "hier ist etwas
kaputt".
------------------------------------------------------------------ */
.vp-db-retracted {
border-left: 4px solid #B32D2E;
background: #FDF4F4;
padding: .7rem .9rem;
margin: 0 0 1rem;
border-radius: 3px;
}
.vp-db-retracted p { margin: 0 0 .35rem; }
.vp-db-retracted p:last-child { margin-bottom: 0; }
.vp-db-retracted__head strong { color: #B32D2E; letter-spacing: .02em; }
.vp-db-retracted__date { opacity: .75; }
.vp-db-retracted__reason { font-size: 1.02rem; }
/* Der Satz, der erklaert, warum der Eintrag noch dasteht. Leiser als die Warnung selbst –
er ist die Begruendung, nicht die Nachricht. */
.vp-db-retracted__why { font-size: .85rem; opacity: .75; }
/* Das kurze Etikett in der Trefferliste. Wer eine Liste ueberfliegt, entscheidet DORT,
welche Studie er anklickt – ein Vermerk, den man erst nach dem Oeffnen sieht, kommt zu
spaet. Gleiche Bauform wie .vp-db-domain, damit die Zeile ruhig bleibt. */
.vp-db-retracted-tag {
display: inline-block;
margin-left: .4rem;
padding: 0 .4em;
border-radius: 2px;
background: #B32D2E;
color: #fff;
font-size: .78rem;
font-weight: 600;
}
/* Der Hinweis auf der oeffentlichen Studienseite, wenn es die Studie nicht (mehr) zu sehen gibt.
⚠️ Zurueckhaltender als die Rueckzugs-Warnung im Mitgliederbereich: Dort steht eine
Richtigstellung zu einer Aussage, die jemand gelesen hat. Hier steht nur, dass nichts da ist –
ein roter Kasten machte daraus einen Vorfall. */
.vp-db-study__missing {
border-left: 4px solid #C7C2A8;
background: #F7F6F1;
padding: .7rem .9rem;
margin: 0 0 1rem;
border-radius: 3px;
}
/* --- Anmeldung per Code (inc/code-login.php) --------------------------------------------------------------------------
Felder sonst ungestaltet (WebKit zeichnet ein schmales Systemfeld). Farben nur aus dem Theme. */
.vp-db-otp__form { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .75em; margin: 0 0 1em; }
.vp-db-otp__form input[type="email"],
.vp-db-otp__form input[type="text"] {
font: inherit; padding: .55em .75em; min-width: 16em; max-width: 100%; box-sizing: border-box;
border: 1px solid var(--basic-color-1, #6B722F); border-radius: 4px; background: var(--basic-color-4, #fff); color: inherit;
}
.vp-db-otp__form input[name="vp_db_otp_code"] { min-width: 9em; letter-spacing: .2em; }
.vp-db-otp__andere { flex-basis: 100%; }
.vp-db-otp__andere summary { cursor: pointer; }
.vp-db-otp__neu button { font: inherit; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; }
.vp-db-otp__fehler { font-weight: 600; }
/* --- Rezepturen (seit 0.39.0) ------------------------------------------------------
Farben nur aus Theme-Variablen (Regel „Keine Werte im Code“). */
.vp-db-recipe__disclaimer { padding: .6rem .8rem; background: var(--basic-color-5, #DBDCD2); border-radius: 6px; font-size: .92em; }
.vp-db-recipe__meta { margin: .5rem 0 1rem; }
.vp-db-recipe__meta > span { white-space: nowrap; }
.vp-db-recipe__h { margin-bottom: .3em; }
.vp-db-recipe__ingredients { border-collapse: collapse; margin: 0 0 1rem; }
.vp-db-recipe__ingredients td { padding: .2rem .9rem .2rem 0; vertical-align: top; border: 0; }
.vp-db-recipe__amount { white-space: nowrap; font-weight: 600; text-align: right; }
.vp-db-recipe__note { opacity: .75; font-size: .92em; }
.vp-db-recipe__steps { margin: 0 0 1rem 1.3rem; }
.vp-db-recipe__steps li { margin-bottom: .35rem; }
.vp-db-rel__plain { opacity: .8; }
/* Schloss-Kasten (vp_db_lock_box()): Aussehen aus der Theme-Klasse .vp-lock (style.css, 98a); hier nur der Modifikator. */
.vp-lock.vp-db-recipe-lock--count { padding: .5rem .8rem; } /* zwei Klassen: schlägt .vp-lock unabhängig von der Ladereihenfolge */
.vp-db-rel--recipe > li::before { content: ">"; margin-right: .4rem; opacity: .55; font-weight: 700; }
/* Gesperrte Kategorie blendet das Suchfeld per `hidden` aus, der Filter Mensch/Tier erscheint nur bei Rezepturen. Die
Gestaltungsregeln oben setzen `display` und würden `hidden` sonst überstimmen. */
.vp-db-search [hidden] { display: none !important; }