/* ========================================================= Entwurf J (Nutzer 10.10.): dieselben Seiten wie Entwurf I. Farbkonzept wie hausdermaterialisierung.org (bunte Flächen, Farbe auf Farbe), Härte wie hausderstatistik.org (flach, eckig, dünne dunkle Linien, umrandete Knöpfe, nüchterne große Schrift, dunkler Fuß mit weißen Logos). Runde 5: – 18 stimmige Farbsätze (je höchstens 3 Farben + Dunkel/Weiß), zufällig – neu NUR beim Neuladen, beim Weiterklicken bleibt der Satz (functions.php: pluri_j_sets + Würfel im Kopf) – Logo: großer Schriftzug PLURI; beim Drüberfahren verwandeln sich die Buchstaben in die Teile des Zeichens – aktive Punkte und Language Station in EINER Form: „Blatt“ (zwei schräg gegenüberliegende runde Ecken wie die PLURI-Teile), dezent – Language Station in Versalien, kräftig, ohne Pfeil ========================================================= */ /* ---------- Grundfarben (Fallback, falls kein Satz gesetzt ist) ---------- */ html.look-j{--j-dark:#2b2b2b;--j-line:var(--j-dark);--hero:#0063e3;--on-hero:#ffff00;--j-bg:#5bc5f2;--j-text:var(--j-dark);--j-block:#ffff00;--j-block-text:var(--j-dark);--j-station:#ffff00;--j-station-text:var(--j-dark);--j-logo:#0063e3} html.look-j[data-hero]{--on-hero-2:var(--on-hero);--on-tint:var(--j-dark)} html.look-j,html.look-j body.look-b{--blue:#0063e3;--pink:#fc0e99;--cyan:#5bc5f2;--green:#39aa34;--orange:#ed7125;--yellow:#ffff00} /* ---------- Grund, Text, Schrift (Inter wie Helvetica / Haus der Statistik; keine Versalien) ---------- */ html.look-j body.look-b{ --canvas:var(--j-bg); --bg:var(--j-bg); --surface:var(--j-block); --stone:var(--j-bg); --hair:var(--j-text); --line:var(--j-text); --ink:var(--j-text); --ink-2:var(--j-text); --muted:var(--j-text); --head:"InterB","Helvetica Neue",Helvetica,Arial,sans-serif; --body:"InterB","Helvetica Neue",Helvetica,Arial,sans-serif; --heads:var(--head); background:var(--j-bg); color:var(--j-text); font-size:19px; font-weight:400; } html.look-j{background:var(--j-bg)} html.look-j body.look-b,html.look-j body.look-b *{font-family:"InterB","Helvetica Neue",Helvetica,Arial,sans-serif !important;text-transform:none !important;letter-spacing:-.005em} html.look-j body.look-b :is(h1,h2,h3,h4,.b-h,.b-h-lg,.b-display,.page-title){font-weight:600 !important;letter-spacing:-.02em !important} html.look-j body.look-b :is(.b-links a,.b-btn,.btn,.wp-block-button__link,.b-boxes a,.b-tabs-mini a,.chip,.kicker,.b-mega__h,.b-mega__catt,.b-mega__acts b,.b-mega__partners b,.b-mega__mini b){font-weight:500 !important} /* ---------- Alles eckig, keine Schatten, kein Glow ---------- */ html.look-j body.look-b *,html.look-j body.look-b *::before,html.look-j body.look-b *::after{border-radius:0 !important} html.look-j body.look-b :is(.b-bar,.b-mega,.b-station-btn,.b-sheet,.b-sheet--sub,.card,.card .ph,.b-lb__big,.b-tabs-mini a,.b-boxes a,.b-acts .b-rows li,.b-lang__pop,.b-consent,.b-tip,.b-tip2){box-shadow:none !important;animation:none !important} html.look-j body.look-b .b-mega.open{clip-path:inset(0) !important} html.look-j .b-topfade{display:none !important} /* ---------- Die eine Form: „Blatt“ – aktive Punkte und Language Station (Nutzer: einheitlich, etwas rund, nicht max) ---------- */ html.look-j body.look-b :is( .b-station-btn,.b-dr__station, .b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a,.b-links li.mega-on > a, .b-lang__pop a[aria-current],.b-tabs--acts .b-boxes a.is-on,.b-tabs-mini a.is-on,.filters .chip.on,.filters button.chip[aria-pressed="true"],.b-wiki__toc a.on ):not(#j){border-radius:14px 0 14px 0 !important} /* große aktive Kästen (Bereiche der Language Station): dieselbe Blatt-Form, etwas größer */ html.look-j body.look-b .b-tabs:not(.b-tabs--acts) .b-boxes a.is-on:not(#j),html.look-j body.look-b .b-station--wide .b-boxes a.is-on:not(#j){border-radius:36px 0 36px 0 !important} /* ---------- Kopf: Farbfläche; Inhalt beginnt mit einer dünnen Linie ---------- */ html.look-j body.look-b :is(.b-sheet--sub,body.home .b-sheet,.b-sheet){background:var(--j-bg) !important;border-top:2px solid var(--on-hero)} html.look-j body.look-b .b-grab i{background:var(--j-text) !important;opacity:.6} /* ---------- Kopfleiste: weiß, eckig, dünne Linie ---------- */ html.look-j body.look-b .b-bar{background:#fff !important;border:1.5px solid var(--j-dark)} html.look-j body.look-b .b-links a{color:var(--j-dark) !important;font-size:16px !important} /* ---------- Logo: großer Schriftzug in der Satz-Farbe; beim Drüberfahren werden die Buchstaben zum Zeichen ---------- */ html.look-j body.look-b .b-logo{color:var(--j-logo)} html.look-j body.look-b .b-logo svg.j-logo{height:30px !important;width:auto;overflow:visible} html.look-j body.look-b .b-footer__logo{color:#fff} html.look-j body.look-b .b-footer__logo svg.j-logo{height:48px !important;width:auto;overflow:visible} .j-logo .jl,.j-logo .jm{transform-box:fill-box;transform-origin:50% 50%} .j-logo .jl{transition:transform .6s cubic-bezier(.65,0,.35,1) var(--d),opacity .35s ease calc(var(--d) + 120ms)} .j-logo .jm{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.55) rotate(-18deg);transition:transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--d) + 80ms),opacity .3s ease var(--d)} :is(.b-logo,.b-footer__logo a):is(:hover,:focus-visible) .j-logo .jl{transform:translate(var(--tx),var(--ty)) scale(.32);opacity:0;transition:transform .55s cubic-bezier(.65,0,.35,1) var(--d),opacity .3s ease calc(var(--d) + 150ms)} :is(.b-logo,.b-footer__logo a):is(:hover,:focus-visible) .j-logo .jm{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.j-logo .jl,.j-logo .jm{transition:opacity .2s ease !important}:is(.b-logo,.b-footer__logo a):hover .j-logo .jl{transform:none}.j-logo .jm{transform:none}} /* Preloader: das Zeichen in der Satz-Farbe */ html.look-j #b-pre{background:var(--j-bg) !important} html.look-j #b-pre .pp{fill:var(--j-logo) !important} /* ---------- Language Station: klare Fläche, dunkle Linie, VERSALIEN, kräftig, ohne Pfeil ---------- */ html.look-j body.look-b .b-station-btn,html.look-j.nav-pinned body.look-b .b-station-btn{background:var(--j-station) !important;color:var(--j-station-text) !important;border:1.5px solid var(--j-dark);justify-content:center;padding:0 26px !important;transition:background-color .12s ease,color .12s ease} html.look-j body.look-b :is(.b-station-btn,.b-dr__station):not(#j){text-transform:uppercase !important;font-weight:700 !important;letter-spacing:.04em !important} html.look-j body.look-b :is(.b-station-btn,.b-dr__station) .b-dot:not(#j){display:none !important} html.look-j body.look-b .b-station-btn:hover{background:var(--j-dark) !important;color:var(--j-station) !important} html.look-j body.look-b .b-dr__station{background:var(--j-station) !important;color:var(--j-station-text) !important;box-shadow:none !important;border:1.5px solid var(--j-dark);justify-content:center} /* ---------- Knöpfe wie bei Haus der Statistik: umrandet, Pfeil frei und dünn, Hover invertiert ---------- */ html.look-j body.look-b :is(.wp-block-button .wp-block-button__link,a.btn,.b-btn,.b-more__btn,.b-embed__load,a.card .cta,.b-wiki__go,.b-mega__all,.b-pager__prev,.b-pager__next,.filters .chip,.b-fhead__btn,.b-consent__b){ background:transparent !important;color:currentColor !important;box-shadow:inset 0 0 0 1.5px currentColor !important;min-height:0 !important} html.look-j body.look-b .b-sheet :is(.wp-block-button .wp-block-button__link,a.btn,.b-btn,a.card .cta,.b-more__btn){color:var(--j-text) !important} html.look-j body.look-b :is(.wp-block-button .wp-block-button__link,a.btn,.b-btn,.b-more__btn,.b-embed__load,a.card .cta,.b-wiki__go,.b-mega__all,.b-pager__prev,.b-pager__next,.filters .chip,.b-fhead__btn,.b-consent__b):hover, html.look-j body.look-b a.card:hover .cta{background:var(--j-text) !important;color:var(--j-bg) !important;box-shadow:inset 0 0 0 1.5px var(--j-text) !important} html.look-j body.look-b :is(.filters .chip.on,.filters button.chip[aria-pressed="true"]){background:var(--j-text) !important;color:var(--j-bg) !important} html.look-j body.look-b .b-dot:not(#j){background:none !important;box-shadow:none !important;border:0 !important;color:inherit !important;width:22px !important;height:22px !important} html.look-j body.look-b .b-dot:not(#j) svg{width:18px !important;height:18px !important} html.look-j body.look-b .b-dot:not(#j) svg path[stroke]{stroke-width:1.5 !important} html.look-j body.look-b .wp-block-button .wp-block-button__link{padding:10px 14px 10px 18px !important} html.look-j body.look-b :is(a.btn,.b-btn,.b-mega__all):has(.b-dot){padding-right:14px !important} /* ---------- Kästen: flache Farbfläche; Listen statt Kästen ---------- */ html.look-j body.look-b :is(.b-actsov__card,.b-card,.comp,.callout,.pr-side){background:var(--j-block) !important;color:var(--j-block-text) !important;--ink:var(--j-block-text);--ink-2:var(--j-block-text);--j-text:var(--j-block-text);--j-bg:var(--j-block);box-shadow:none !important} html.look-j body.look-b :is(.b-acts .b-rows li,.b-wiki__entry,.b-wiki__list a,.b-actsov__news a,.b-actsov__go,.b-actsov__journal,.b-about__more .b-boxes a,.b-mega__cats a,.b-mega__acts a,.b-mega__partners a,.b-mega__mini a){background:transparent !important;box-shadow:none !important} html.look-j body.look-b .b-acts .b-rows{gap:0 !important;border-top:1.5px solid var(--j-text) !important} html.look-j body.look-b .b-acts .b-rows li{border-bottom:1.5px solid var(--j-text) !important;padding:clamp(18px,1.8vw,26px) clamp(12px,1.2vw,18px) !important} html.look-j body.look-b .b-acts .b-rows li:is(.is-on,:hover){background:var(--j-block) !important} html.look-j body.look-b .b-acts .b-rows li:is(.is-on,:hover) :is(h3,h3 a,p){color:var(--j-block-text) !important} html.look-j body.look-b .b-acts .b-rows li[data-part]{--pc:var(--j-block) !important} html.look-j body.look-b .b-wiki__entry{border-top:1.5px solid var(--j-text) !important;padding-left:0 !important;padding-right:0 !important} html.look-j body.look-b :is(.b-facts li,.b-partners,.logos,.logos > *,.pluri-row,hr){border-color:var(--j-text) !important} /* ---------- Menüfeld: weiß, Zeilen mit Linien, größere Schrift; Hover dunkel ---------- */ html.look-j body.look-b .b-mega{background:#fff !important;border:1.5px solid var(--j-dark);border-top:0;--j-text:var(--j-dark);--ink:var(--j-dark);--ink-2:var(--j-dark);color:var(--j-dark)} html.look-j body.look-b :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini){gap:0 !important;border-top:1.5px solid var(--j-dark)} html.look-j body.look-b :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini) > li > a{min-height:0 !important;padding:13px 10px !important;border-bottom:1.5px solid var(--j-dark) !important;color:var(--j-dark) !important} html.look-j body.look-b :is(.b-mega__catt,.b-mega__acts b,.b-mega__partners b,.b-mega__mini b){font-size:18px !important;line-height:1.3} html.look-j body.look-b .b-mega__partners small{font-size:14px} html.look-j body.look-b .b-mega__no{color:var(--j-dark) !important} html.look-j body.look-b :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini) > li > a:hover{background:var(--j-dark) !important;color:#fff !important} html.look-j body.look-b :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini) > li > a:hover *{color:#fff !important} html.look-j body.look-b .b-mega__all{color:var(--j-dark) !important} html.look-j body.look-b .b-mega__all:hover{background:var(--j-dark) !important;color:#fff !important} html.look-j body.look-b .b-mega__img::after{background-color:#fff !important} /* ---------- Menü: aktiv = Kopffarbe mit dunkler Linie; Hover dunkel ---------- */ html.look-j body.look-b :is(.b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a,.b-links li.mega-on > a,.b-lang__pop a[aria-current]){background:var(--hero) !important;color:var(--on-hero) !important;box-shadow:inset 0 0 0 1.5px var(--j-dark) !important} html.look-j body.look-b :is(.b-links li:not(.mega-on):not(.is-active):not(.current-menu-item):not(.current_page_item) > a:hover,.b-links:has(li.mega-on) li:not(.mega-on) > a:hover,.b-lang__btn:hover,.b-lang.open .b-lang__btn,.b-lang__pop a:not([aria-current]):hover){background:var(--j-dark) !important;color:#fff !important} html.look-j body.look-b .b-links:has(li.mega-on) li:not(.mega-on) > a{background:transparent !important;color:var(--j-dark) !important;box-shadow:none !important} html.look-j body.look-b .b-lang__pop{background:#fff !important;border:1.5px solid var(--j-dark);box-shadow:none !important} html.look-j body.look-b .b-lang__pop a,html.look-j body.look-b .b-lang__pop a:hover,html.look-j body.look-b .b-lang__pop a[aria-current]{font-weight:500 !important;font-size:17px !important} html.look-j body.look-b .b-lang__pop a .b-lang__eigen{color:inherit !important;opacity:.75 !important;font-weight:400 !important;font-size:14px !important} /* ---------- Reiter im Kopf: Linie in der Kopfschrift; aktiv weiß; Hover invertiert ---------- */ html.look-j body.look-b .b-top .b-tabs .b-boxes a:not(.is-on){background:transparent !important;color:var(--on-hero) !important;box-shadow:inset 0 0 0 1.5px var(--on-hero) !important} html.look-j body.look-b .b-top .b-tabs .b-boxes a.is-on{background:#fff !important;color:var(--j-dark) !important;box-shadow:inset 0 0 0 1.5px var(--j-dark) !important} html.look-j body.look-b .b-top .b-tabs .b-boxes a:not(.is-on):hover{background:var(--on-hero) !important;color:var(--hero) !important} html.look-j body.look-b .b-top .b-tabs .b-boxes a :is(span,small,em,b){color:inherit !important} html.look-j body.look-b .b-tabs-mini a{box-shadow:inset 0 0 0 1.5px var(--j-dark) !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important} html.look-j body.look-b .b-tabs-mini a:not(.is-on){background:#fff !important;color:var(--j-dark) !important} html.look-j body.look-b .b-tabs-mini a.is-on,html.look-j body.look-b .b-tabs-mini a.is-on:hover{background:var(--hero) !important;color:var(--on-hero) !important} html.look-j body.look-b .b-tabs-mini a:not(.is-on):hover{background:var(--j-dark) !important;color:#fff !important} html.look-j body.look-b .b-tabs-mini a :is(span,em,b){color:inherit !important;opacity:1 !important} /* ---------- Fuß: dunkel wie Haus der Statistik, Schrift und Logos weiß ---------- */ html.look-j body.look-b .b-footer{background:var(--j-dark) !important;color:#fff;--ink:#fff;--ink-2:#fff;--hair:rgba(255,255,255,.5);border-top:0} html.look-j body.look-b .b-footer a,html.look-j body.look-b .b-footer h2{color:#fff !important} /* ---------- Bilder einfarbig gedruckt (Filter je Farbsatz); Drüberfahren zeigt das Original ---------- */ html.look-j body.look-b :is(.ph,.b-thumb) img, html.look-j body.look-b .b-sheet :is(.wp-block-image,.wp-block-gallery,.jpost-hero,.res-ph,.pr-img,figure) img{filter:var(--jd-c,grayscale(1))} html.look-j body.look-b .b-top img{filter:var(--jd-h,grayscale(1))} html.look-j body.look-b .b-mega__img img{filter:grayscale(1) contrast(1.1)} html.look-j body.look-b :is(a:hover,.ph:hover,figure:hover) img,html.look-j body.look-b img:hover{filter:none} /* Logos einfarbig, ohne Kachel */ html.look-j body.look-b :is(.lg,.b-mega__logo,.b-partners__logo){background:none !important;box-shadow:none !important;padding:0 !important} html.look-j body.look-b :is(.lg,.b-partners__logo) img{filter:grayscale(1) contrast(1.4) !important;mix-blend-mode:multiply} html.look-j body.look-b .b-mega__logo img{filter:grayscale(1) contrast(1.3) !important} html.look-j body.look-b .logos .lg{width:clamp(60px,5vw,72px);height:clamp(60px,5vw,72px)} html.look-j body.look-b .b-partners__logo{width:clamp(54px,4.4vw,64px);height:clamp(54px,4.4vw,64px)} html.look-j body.look-b .b-mega__logo{width:40px;height:40px} /* ---------- Kein Bild: Schraffur in der Schriftfarbe ---------- */ html.look-j body.look-b :is(.ph.is-empty,.card .ph.is-empty,.b-thumb.ph.is-empty,.b-thumb.is-empty,.b-mega__img.ph.is-empty){ background:repeating-linear-gradient(-45deg,var(--j-text) 0 1.5px,transparent 1.5px 9px) !important;background-size:auto !important;box-shadow:inset 0 0 0 1.5px var(--j-text) !important; } html.look-j body.look-b .b-mega__img.ph.is-empty{background:repeating-linear-gradient(-45deg,var(--j-dark) 0 1.5px,#fff 1.5px 9px) !important} /* ---------- Zeichen und Icons weg ---------- */ html.look-j :is(.b-tabs--acts .b-boxes__ic,.b-tabs-mini__ic,.b-mega__part,.b-actsov__ic,.b-parts,.b-acts .b-rows li .b-mini,.b-facts__ic){display:none !important} html.look-j body.look-b .b-facts li{grid-template-columns:1fr !important} html.look-j .b-acts .b-rows li{grid-template-columns:minmax(0,1fr) !important} html.look-j .b-acts .b-rows li :is(h3,p){grid-column:1 !important} html.look-j .b-tabs-mini a.has-ic{padding:10px 14px} html.look-j .b-mega__acts--2 a{gap:0} html.look-j .b-top .b-tabs--acts .b-boxes a{padding-left:16px !important;padding-right:14px !important} /* ---------- Tooltip, Einwilligung: weiß mit dunkler Linie ---------- */ html.look-j body.look-b :is(.b-tip,.b-tip2,.b-consent){background:#fff !important;color:var(--j-dark) !important;border:1.5px solid var(--j-dark);box-shadow:none !important} html.look-j body.look-b .b-consent{--j-text:var(--j-dark);--j-bg:#fff} html.look-j body.look-b .b-consent__b{color:var(--j-dark) !important} html.look-j body.look-b .b-consent__b:hover{background:var(--j-dark) !important;color:#fff !important} /* ---------- Karten-Titel beim Drüberfahren ---------- */ html.look-j body.look-b a.card h3:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px} /* aktiver Menüpunkt: schlichte Fläche in der Kopffarbe, keine Kontur/Ringe (Nutzer: Doppelring passte nicht) */ html.look-j body.look-b :is(.b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a,.b-links li.mega-on > a,.b-lang__pop a[aria-current]):not(#j){box-shadow:none !important;outline:none !important;border:0 !important} /* Nutzer 10.10.: Hover in Kopfleiste, Menüfeld, Sprachliste und Sticky-Reitern farbig – Kastenfarbe des Satzes statt Dunkelgrau */ html.look-j body.look-b :is( .b-links li:not(.mega-on):not(.is-active):not(.current-menu-item):not(.current_page_item) > a:hover,.b-links:has(li.mega-on) li:not(.mega-on) > a:hover, .b-lang__btn:hover,.b-lang.open .b-lang__btn,.b-lang__pop a:not([aria-current]):hover, .b-mega__cats > li > a:hover,.b-mega__acts > li > a:hover,.b-mega__partners > li > a:hover,.b-mega__mini > li > a:hover,.b-mega__all:hover, .b-tabs-mini a:not(.is-on):hover,.b-drawer .b-dr__grp ul a:hover ):not(#j){background:var(--j-block) !important;color:var(--j-block-text) !important} html.look-j body.look-b :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini) > li > a:hover *:not(#j){color:var(--j-block-text) !important} /* Nutzer 10.10.: keine Blatt-Form – alle Ecken gleich, dezent gerundet (aktive Punkte + Language Station); große aktive Kästen etwas mehr */ html.look-j body.look-b :is( .b-station-btn,.b-dr__station, .b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a,.b-links li.mega-on > a, .b-lang__pop a[aria-current],.b-tabs--acts .b-boxes a.is-on,.b-tabs-mini a.is-on,.filters .chip.on,.filters button.chip[aria-pressed="true"],.b-wiki__toc a.on ):not(#j):not(#k){border-radius:12px !important} html.look-j body.look-b :is(.b-tabs:not(.b-tabs--acts) .b-boxes a.is-on,.b-station--wide .b-boxes a.is-on):not(#j):not(#k){border-radius:24px !important} /* Versalien der Language Station auch für den Text im inneren Element */ html.look-j body.look-b :is(.b-station-btn,.b-dr__station) *:not(#j){text-transform:uppercase !important;font-weight:700 !important;letter-spacing:.04em !important} /* Logo-Hover: nach dem Zeichen erscheint rechts die Unterzeile (3 Zeilen), „PLURI“ ist dann weg */ .j-logo .jt{font-size:40px;font-weight:600;letter-spacing:-.01em;opacity:0;transform:translateX(-14px);transition:opacity .2s ease,transform .3s ease} :is(.b-logo,.b-footer__logo a):is(:hover,:focus-visible) .j-logo .jt{opacity:1;transform:none;transition:opacity .35s ease .42s,transform .5s cubic-bezier(.2,.8,.2,1) .42s} @media (prefers-reduced-motion:reduce){.j-logo .jt{transform:none !important}} /* Language Station noch etwas kräftiger (Inter liegt nur bis 600 vor – leichte Kontur macht die Schrift dicker) */ html.look-j body.look-b :is(.b-station-btn,.b-dr__station),html.look-j body.look-b :is(.b-station-btn,.b-dr__station) *:not(#j){-webkit-text-stroke:.6px currentColor;paint-order:stroke fill} /* Unterzeile im Logo: Versalien, größer, kräftiger (Nutzer 10.10.) */ html.look-j .j-logo .jt:not(#j),html.look-j .j-logo .jt tspan:not(#j){text-transform:uppercase !important;font-size:44px;font-weight:700 !important;letter-spacing:.035em !important;-webkit-text-stroke:1.2px currentColor;paint-order:stroke fill} /* Unterzeile im Logo noch dicker: echte Montserrat Bold wie der PLURI-Schriftzug (Inter gibt es nur bis 600) */ html.look-j .j-logo .jt:not(#j),html.look-j .j-logo .jt tspan:not(#j){font-family:"MontB",sans-serif !important;font-weight:700 !important;font-size:44px;letter-spacing:.03em !important;-webkit-text-stroke:1.6px currentColor} html.look-j .j-logo .jt:not(#j),html.look-j .j-logo .jt tspan:not(#j){letter-spacing:.055em !important} /* minimal mehr Zeichenabstand */ html.look-j .j-logo .jt:not(#j),html.look-j .j-logo .jt tspan:not(#j){font-size:48px} /* ein Tick größer */ /* Logo verwandelt sich auch von selbst (Klasse j-morph aus b.js, etwa jede Minute) – gleich wie beim Hover */ .b-logo.j-morph .j-logo .jl{transform:translate(var(--tx),var(--ty)) scale(.32);opacity:0;transition:transform .55s cubic-bezier(.65,0,.35,1) var(--d),opacity .3s ease calc(var(--d) + 150ms)} .b-logo.j-morph .j-logo .jm{opacity:1;transform:none} .b-logo.j-morph .j-logo .jt{opacity:1;transform:none;transition:opacity .35s ease .42s,transform .5s cubic-bezier(.2,.8,.2,1) .42s} /* Nutzer 10.10.: Bereichs-Kästen (Language Station auf der Startseite, Bereichs-Reiter, „Weiter entdecken“) in der VOLLEN Kopffarbe statt aufgehellter Mischfarbe – was oben ist, steht unten genauso; Hover dunkel mit Kopffarbe */ html.look-j body.look-b :is(.b-station--wide .b-boxes a,.b-sheet .b-boxes a:not(.is-on),.b-about__more .b-boxes a):not(#j){background:var(--hero) !important;color:var(--on-hero) !important;box-shadow:none !important} html.look-j body.look-b :is(.b-station--wide .b-boxes a,.b-sheet .b-boxes a:not(.is-on),.b-about__more .b-boxes a):not(#j) *{color:inherit !important} html.look-j body.look-b :is(.b-station--wide .b-boxes a,.b-sheet .b-boxes a:not(.is-on),.b-about__more .b-boxes a):not(#j):hover{background:var(--j-dark) !important;color:var(--hero) !important} /* Nutzer 10.10.: Inhalts-Knöpfe (z. B. „Watch video“, „PDF download“) hatten keinen sichtbaren Hover und waren rund (alte Regeln aus I gewannen): eckig; Hover = Fläche in der Akzentfarbe des Satzes (Kastenfarbe – Grün, Blau …) mit passender Schrift */ html.look-j body.look-b :is(.wp-block-button .wp-block-button__link,a.btn,.b-btn,.b-more__btn,.b-embed__load,a.card .cta,.b-wiki__go,.b-pager__prev,.b-pager__next,.filters .chip,.b-fhead__btn):not(#j){border-radius:0 !important} html.look-j body.look-b :is(.wp-block-button .wp-block-button__link,a.btn,.b-btn,.b-more__btn,.b-embed__load,a.card .cta,.b-wiki__go,.b-pager__prev,.b-pager__next,.filters .chip:not(.on),.b-fhead__btn):not(#j):hover, html.look-j body.look-b a.card:hover .cta:not(#j){background:var(--j-block) !important;color:var(--j-block-text) !important;box-shadow:inset 0 0 0 1.5px var(--j-block-text) !important} /* in Kästen (die selbst die Kastenfarbe haben) ist der Hover dunkel */ html.look-j body.look-b :is(.b-actsov__card,.b-card,.comp,.callout,.pr-side) :is(.wp-block-button .wp-block-button__link,a.btn,.b-btn):not(#j):hover{background:var(--j-dark) !important;color:#fff !important;box-shadow:none !important} /* Nutzer 10.10. („Kontrast darf nie kippen“): weiße Flächen aus I nehmen die INHALTSfarbe (mit Inhalts-Schrift) – nur echte Kästen haben die Kastenfarbe + eigene Schrift */ html.look-j body.look-b{--surface:var(--j-bg)} /* Praktiken-Karten: Angaben (Dauer, Gruppe, Kosten) ohne Icons, schlicht umrandet in der Schriftfarbe */ html.look-j body.look-b .card .meta > span:not(#j){background:transparent !important;color:var(--j-text) !important;box-shadow:inset 0 0 0 1.5px currentColor !important;padding-left:10px !important} html.look-j body.look-b .card .meta > span:not(#j)::before{display:none !important} /* Nutzer 10.10. („Kontrast fails!!“): in Kästen ALLE Grundfarben-Variablen auf die Kastenfarbe umstellen – sonst behalten Flächen darin die Inhaltsfarbe (z. B. gelbe Schlagwörter mit weißer Schrift im blauen Kasten) */ html.look-j body.look-b :is(.b-actsov__card,.b-card,.comp,.callout,.pr-side){--canvas:var(--j-block);--surface:var(--j-block);--stone:var(--j-block);--hair:var(--j-block-text);--line:var(--j-block-text)} /* Schlagwörter/Tags überall: keine Fläche, feine Linie in der Schriftfarbe – damit nie eine Fläche gegen die Schrift läuft */ html.look-j body.look-b :is(.tags a,.tags span,.tags li,.pr-tags a,.pr-tags span,.b-tag):not(#j){background:transparent !important;color:inherit !important;box-shadow:inset 0 0 0 1.5px currentColor !important} html.look-j body.look-b :is(.tags a,.pr-tags a,.b-tag):not(#j):hover{background:currentColor !important} html.look-j body.look-b :is(.tags a,.pr-tags a,.b-tag):not(#j):hover > *{color:var(--j-bg) !important} /* Hover-/Umkehr-Zustände: alle Texte darin übernehmen die Schriftfarbe des Zustands (Weiter-Leiste war Schrift dunkel auf dunkel) */ html.look-j body.look-b :is(.b-pager__prev,.b-pager__next,.b-pager__all,.wp-block-button__link,a.btn,.b-btn,a.card .cta,.b-mega__all,.b-boxes a,.b-tabs-mini a,.b-links a,.b-lang__pop a,.filters .chip):is(:hover,.is-on,.on,[aria-current]) :is(span,small,b,strong,em,i):not(.b-dot):not(#j){color:inherit !important} html.look-j body.look-b :is(.b-pager__prev,.b-pager__next):not(#j):hover{background:var(--j-block) !important;color:var(--j-block-text) !important} /* Language Station beim Hover in der Kastenfarbe des Satzes (Nutzer 10.10.: „hier würde Blau Sinn machen“); gleiche Farbe → dunkel */ html.look-j body.look-b :is(.b-station-btn,.b-dr__station):not(#j):hover{background:var(--j-sh,var(--j-dark)) !important;color:var(--j-sht,#fff) !important} /* ---------- Kopfleiste (Nutzer 10.10.): ohne Fläche und ohne Rand – Logo und Menü stehen frei (oben in der Kopf-Schrift, beim Scrollen in der Inhalts-Schrift). Erst wenn man einen Punkt öffnet, werden Leiste + Untermenü EIN weißer Kasten mit Rand, ohne Bruch dazwischen. ---------- */ html.look-j body.look-b .b-nav{--nav-fg:var(--on-hero)} html.look-j.nav-pinned body.look-b .b-nav{--nav-fg:var(--j-text)} html.look-j body.look-b .b-bar:not(#j){background:transparent !important;border:1.5px solid transparent !important;box-shadow:none !important;transition:background-color .15s ease,border-color .15s ease} html.look-j body.look-b .b-bar :is(.b-links > ul > li > a,.b-links .menu > li > a,.b-lang__btn,.b-menu):not(#j){color:var(--nav-fg) !important} html.look-j body.look-b .b-bar .b-logo:not(#j){color:var(--nav-fg) !important} html.look-j body.look-b .b-bar :is(.b-lang,.b-sep,.b-lang__btn){border-color:currentColor !important} /* aktiver Punkt auf freier Leiste: umgekehrt (Fläche in der Schriftfarbe), Hover in der Kastenfarbe */ html.look-j body.look-b .b-bar:not(:has(li.mega-on)) :is(.b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a):not(#j){background:var(--nav-fg) !important;color:var(--hero) !important} html.look-j.nav-pinned body.look-b .b-bar:not(:has(li.mega-on)) :is(.b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a):not(#j){color:var(--j-bg) !important} /* offen: ein weißer Kasten – Leiste ohne Linie unten, Menüfeld schließt bündig an */ html.look-j body.look-b .b-bar:has(li.mega-on):not(#j){background:#fff !important;border-color:var(--j-dark) !important;border-bottom-color:#fff !important;--nav-fg:var(--j-dark)} html.look-j body.look-b .b-bar:has(li.mega-on) .b-logo:not(#j){color:var(--j-logo) !important} html.look-j body.look-b .b-bar:has(li.mega-on) .b-mega:not(#j){border:1.5px solid var(--j-dark) !important;border-top:0 !important;margin-left:-1.5px;margin-right:-1.5px;box-shadow:none !important} html.look-j body.look-b .b-bar:has(li.mega-on) .b-mega::before{display:none !important} /* Kontrast in der offenen (weißen) Leiste: Sprache und Schrift immer dunkel */ html.look-j body.look-b .b-bar:has(li.mega-on) :is(.b-lang__btn,.b-links a):not(#j){color:var(--j-dark) !important} html.look-j body.look-b .b-bar:has(li.mega-on) .b-links li.mega-on > a:not(#j){color:var(--on-hero) !important} /* ---------- Kontrast-Korrekturen aus der Messung aller 22 Sätze ---------- */ /* Station-Kästen: Nummer und Zusatz übernehmen die Kastenschrift (hatten eigene, zu blasse Farben) */ html.look-j body.look-b :is(.b-station--wide .b-boxes a,.b-sheet .b-boxes a:not(.is-on),.b-about__more .b-boxes a) :is(.b-boxes__no,.b-boxes__t,small,em,span,b):not(#j){color:inherit !important;opacity:1 !important} /* Sprung-Link „Zum Inhalt“ (nur bei Tastatur sichtbar) immer dunkel auf weiß */ html.look-j body.look-b .skip:not(#j){background:#fff !important;color:var(--j-dark) !important} /* Knöpfe überall in der Schriftfarbe des Grundes (Fehlerseite: grauer „Home“-Knopf) */ html.look-j body.look-b .btn:not(#j){color:var(--j-text) !important} /* offenes Menü: wirklich EIN Kasten – keine Linie zwischen Leiste und Untermenü (auch nicht vom inneren Feld) */ html.look-j body.look-b .b-bar:has(li.mega-on) :is(.b-mega,.b-mega__in):not(#j){border-top:0 !important;box-shadow:none !important;outline:0 !important} html.look-j body.look-b .b-bar:has(li.mega-on):not(#j)::after{display:none !important} /* ---------- Nutzer 10.10.: „alle Fades raus – alles instant, statisch“. Keine Übergänge/Einblendungen; das Menü öffnet als EIN Block sofort. Ausnahmen (gewünscht): Logo-Verwandlung, Aufblinken in der Q&A, Titelwort-Wechsel auf der Startseite ---------- */ html.look-j body.look-b *:not(.jl):not(.jm):not(.jt):not(.b-wiki__entry):not(.b-ch),html.look-j body.look-b *::before,html.look-j body.look-b *::after{transition:none !important} html.look-j body.look-b *:not(.b-wiki__entry):not(.b-ch):not(.b-rotor__w)::before,html.look-j body.look-b *:not(.b-wiki__entry):not(.b-ch):not(.b-rotor__w)::after{animation:none !important} html.look-j body.look-b .b-mega:not(#j){clip-path:none !important;opacity:1 !important;transform:none !important} html.look-j body.look-b :is(.b-lang__pop,.b-lang__pop a,.b-tabs-mini,.b-tip,.b-tip2,.b-lb,.b-cine,.b-consent,.b-mega__in,.b-mega__col,.b-mega li){animation:none !important;transition:none !important} html.look-j #b-pre{transition:none !important} /* stehender Farbkopf ohne Parallax, Blur und Ausblenden */ html.look-j body.look-b :is(.b-top,body.home .b-hero):not(#j){transform:none !important} html.look-j body.look-b .b-top :is(.b-tabs,.phead > *,.jpost-head > *):not(#j),html.look-j body.look-b.home .b-hero > .b-wrap:not(#j){filter:none !important;opacity:1 !important} /* ---------- Menü: größere Schrift (wie der Einleitungstext); Sprachwahl ohne Trennlinie und ohne Pfeil ---------- */ html.look-j body.look-b .b-links > ul > li > a:not(#j),html.look-j body.look-b .b-links .menu > li > a:not(#j),html.look-j body.look-b .b-lang__btn:not(#j){font-size:20px !important} html.look-j body.look-b .b-lang:not(#j){border-left:0 !important;padding-left:0 !important} html.look-j body.look-b .b-lang__btn svg:not(#j){display:none !important} /* Logo behält seine Farbe (zu, offen, beim Scrollen) – Farbe je Satz aus functions.php (pluri_j_logofarben, Kontrast geprüft) */ html.look-j body.look-b .b-bar .b-logo:not(#j),html.look-j body.look-b .b-bar:has(li.mega-on) .b-logo:not(#j){color:var(--j-logo) !important} html.look-j.nav-pinned body.look-b .b-bar:not(:has(li.mega-on)) .b-logo:not(#j){color:var(--j-logo-pin,var(--j-logo)) !important} html.look-j body.look-b .b-logo svg.j-logo :is(path,rect,text):not(#j){stroke:transparent !important} /* Menü schließt als EIN Block: ohne offenen Punkt ist das Untermenü sofort weg (das Skript versteckt es sonst erst nach der alten Ausblendzeit) */ html.look-j body.look-b .b-bar:not(:has(li.mega-on)) .b-mega:not(#j){display:none !important} /* offener Kasten ohne Kerbe: Leiste ohne Unterkante, das Menüfeld schließt mit seinem Rand an */ html.look-j body.look-b .b-bar:has(li.mega-on):not(#j){border-bottom-width:0 !important} /* Unterzeile genau so hoch wie das Zeichen: Versalhöhe 0,7 × 50 + 2 × 52,4 Zeilenabstand = Zeichenhöhe (0,42 × 334) */ html.look-j .j-logo .jt:not(#j),html.look-j .j-logo .jt tspan:not(#j){font-size:50px} /* Nutzer 10.10.: Fuß-Logo viel kleiner (wie das Kopf-Logo) – die Unterzeile lief in die Spalte daneben */ html.look-j body.look-b .b-footer__logo svg.j-logo:not(#j){height:28px !important} /* =========== Runde 6 (Nutzer 10.10. vormittags) =========== */ /* Schriftzug PLURI einen Tick größer – Zeichen und Unterzeile bleiben auf dem Schirm gleich groß (functions.php teilt durch 34/30) */ html.look-j body.look-b .b-logo svg.j-logo:not(#j){height:34px !important} html.look-j body.look-b .b-footer__logo svg.j-logo:not(#j){height:32px !important} /* Unterzeile wieder wie vorher (48 px, Kontur 1,6 – beides ÷ 34/30), senkrecht mittig zum Zeichen (Lage in functions.php) */ html.look-j .j-logo .jt:not(#j),html.look-j .j-logo .jt tspan:not(#j){font-size:42.35px;-webkit-text-stroke:1.41px currentColor} /* Logo immer schwarz – auch im offenen (weißen) Kasten */ html.look-j body.look-b .b-bar:has(li.mega-on) .b-logo:not(#j){color:#141414 !important} /* Aktive Kästen wie der aktive Menüpunkt: umgekehrt – Fläche in der Schriftfarbe des Grundes, Schrift in der Farbe des Grundes */ html.look-j body.look-b .b-top .b-tabs .b-boxes a.is-on:not(#j),html.look-j body.look-b .b-lang__pop a[aria-current]:not(#j){background:var(--on-hero) !important;color:var(--hero) !important;box-shadow:none !important} html.look-j body.look-b .b-sheet .b-boxes a.is-on:not(#j){background:var(--j-text) !important;color:var(--j-bg) !important;box-shadow:none !important} html.look-j body.look-b :is(.b-top .b-tabs .b-boxes a.is-on,.b-lang__pop a[aria-current],.b-sheet .b-boxes a.is-on):not(#j) *{color:inherit !important} /* Hover der übrigen Kästen im Kopf farbig (Kastenfarbe), damit er sich vom aktiven unterscheidet */ html.look-j body.look-b .b-top .b-tabs .b-boxes a:not(.is-on):not(#j):hover{background:var(--j-block) !important;color:var(--j-block-text) !important;box-shadow:inset 0 0 0 1.5px var(--j-block-text) !important} /* Einzelseiten: Bilder in ihren echten Farben (kein Zweifarbdruck) */ html.look-j body.look-b.single .b-top img,html.look-j body.look-b.single .b-sheet :is(.wp-block-image,.wp-block-gallery,.jpost-hero,.res-ph,.pr-img,figure) img{filter:none} /* Menüfeld cleaner: feine helle Linien statt dunkler; jede Spalte beginnt mit ihrer ersten Linie auf derselben Höhe (14 px unter der Überschrift) */ html.look-j body.look-b .b-mega :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini):not(#j){margin-top:0 !important;border-top:1px solid rgba(20,20,20,.14) !important} html.look-j body.look-b .b-mega :is(.b-mega__cats,.b-mega__acts,.b-mega__partners,.b-mega__mini) > li > a:not(#j){border-bottom:1px solid rgba(20,20,20,.14) !important} html.look-j body.look-b .b-mega .b-facts:not(#j){margin-top:0 !important} html.look-j body.look-b .b-mega .b-facts li:not(#j){border-color:rgba(20,20,20,.14) !important;border-top-width:1px !important} html.look-j body.look-b .b-mega .b-facts li:last-child:not(#j){border-bottom-width:1px !important} /* Sprache (EN) genau wie die Menüpunkte */ html.look-j body.look-b .b-lang__btn:not(#j){font-weight:500 !important;letter-spacing:-.005em !important} /* Pfeile in Knöpfen: kleiner, feiner, eckig, näher am Text */ html.look-j body.look-b .b-dot:not(#j){width:14px !important;height:14px !important;margin:0 !important;flex:0 0 14px} html.look-j body.look-b .b-dot:not(#j) svg{width:14px !important;height:14px !important} html.look-j body.look-b .b-dot:not(#j) svg path[stroke]{stroke-width:1.5 !important;stroke-linecap:square !important;stroke-linejoin:miter !important} html.look-j body.look-b :is(a.btn,.b-btn,.b-mega__all,.wp-block-button__link,.b-more__btn,a.card .cta):has(.b-dot):not(#j){gap:8px !important;padding-right:12px !important} /* Fuß: „Farbe ändern“ – zeigt alle 3 s einen anderen Farbsatz (Kopffarbe + Kopfschrift), ein Klick übernimmt ihn für die Seite */ html.look-j body.look-b .j-farbe{font:inherit;font-weight:500;letter-spacing:inherit;line-height:inherit;border:0;border-radius:0 !important;padding:4px 10px;margin:-4px 0 -4px -10px;background:var(--hero);color:var(--on-hero);cursor:pointer;text-align:left} html.look-j body.look-b .j-farbe:focus-visible{outline:2px solid #fff;outline-offset:2px} /* offener Kasten (Nutzer: „die Linie matcht nicht“ – bei Bildschirm-Zoom rundete der 1,5-px-Rand anders als der Versatz des Menüfelds): Rahmen als innere Schatten statt Rand – Leiste und Menüfeld liegen genau übereinander, die Linie läuft bei jedem Zoom bündig durch */ html.look-j body.look-b .b-bar:not(#j):not(#k){border-width:0 !important} html.look-j body.look-b .b-bar:has(li.mega-on):not(#j):not(#k){box-shadow:inset 0 1.5px 0 var(--j-dark),inset 1.5px 0 0 var(--j-dark),inset -1.5px 0 0 var(--j-dark) !important} html.look-j body.look-b .b-bar:has(li.mega-on) .b-mega:not(#j):not(#k){border:0 !important;margin:0 !important;box-shadow:inset 1.5px 0 0 var(--j-dark),inset -1.5px 0 0 var(--j-dark),inset 0 -1.5px 0 var(--j-dark) !important} html.look-j body.look-b .b-mega .b-mega__foot:not(#j){border-top:1px solid rgba(20,20,20,.14) !important} /* Seitengrund (sichtbar nur im allerersten Bild beim Seitenwechsel, bevor der Inhalt steht) in der Kopffarbe – oben ist jede Seite Kopffarbe, so blitzt nichts anderes auf */ html.look-j:not(#j){background:var(--hero)} /* Kontrast (Messung Satz 7): Beschreibung in Praktiken-Karten hatte festes Grau (#333) – auf blauem Inhalt 2,3:1. Jetzt Inhalts-Schrift */ html.look-j body.look-b .card p:not(#j){color:var(--j-text) !important} /* „Farbe ändern“ in der unteren Zeile des Menüfelds: so groß wie die Links daneben */ html.look-j body.look-b .b-mega__legal .j-farbe:not(#j){margin:0;padding:3px 8px;font-size:inherit} /* Nutzer 10.10.: EU-Logo schwarzweiß (Menüfeld und Fuß) */ html.look-j body.look-b :is(.b-mega__eu,.b-footer__eu) img:not(#j){filter:grayscale(1) contrast(1.6) !important} html.look-j body.look-b .b-mega__legal .j-farbe:not(#j){font-size:11.5px !important;font-weight:700 !important;line-height:1 !important;padding:5px 8px} /* Nutzer 10.10.: „Farbe ändern“ runder – im Fuß wie die aktiven Punkte (12 px), im kleinen Knopf des Menüfelds anteilig (8 px) */ html.look-j body.look-b .j-farbe:not(#j):not(#k){border-radius:12px !important} html.look-j body.look-b .b-mega__legal .j-farbe:not(#j):not(#k){border-radius:8px !important} /* Nutzer 10.10.: keine Boxen bei Datum und Kategorie in den Karten – schlichter Text, getrennt durch einen Mittelpunkt */ html.look-j body.look-b .card .meta > span:not(#j):not(#k){box-shadow:none !important;background:transparent !important;padding:0 !important;border:0 !important} html.look-j body.look-b .card .meta:not(#j):not(#k){gap:0 !important} html.look-j body.look-b .card .meta > span + span:not(#j):not(#k)::before{content:"·" !important;display:inline !important;width:auto !important;height:auto !important;background:none !important;-webkit-mask:none !important;mask:none !important;margin:0 .5em !important;color:inherit} /* Nutzer 10.10.: Aktivitäten farbig – Hover in der Farbe der Aktivität (Kopffarbe ihres Satzes, --jh/--jht aus functions.php); ihre Seiten tragen diesen Satz. Gleicht die Farbe der Fläche darunter (b.js setzt .j-gleich), bleibt der Hover in der Kastenfarbe – nie Farbe auf gleicher Farbe */ html.look-j body.look-b .b-top .b-tabs--acts .b-boxes a:not(.is-on):not(.j-gleich):not(#j):hover, html.look-j body.look-b .b-mega__acts > li > a:not(#j):not(#k):hover, html.look-j body.look-b .b-acts .b-rows li[data-part]:not(.j-gleich):not(#j):is(.is-on,:hover){background:var(--jh,var(--j-block)) !important;color:var(--jht,var(--j-block-text)) !important} html.look-j body.look-b .b-top .b-tabs--acts .b-boxes a:not(.is-on):not(.j-gleich):not(#j):hover{box-shadow:inset 0 0 0 1.5px var(--on-hero) !important} html.look-j body.look-b :is(.b-mega__acts > li > a:hover,.b-acts .b-rows li[data-part]:not(.j-gleich):is(.is-on,:hover)) :is(b,span,h3,h3 a,p):not(#j):not(#k){color:inherit !important} /* ---------- Menüfelder „Aktivitäten“ und „Journal“ (Nutzer 10.10.): Hover links zeigt rechts, was dazugehört. Alle Felder liegen übereinander im selben Rasterfeld – das höchste bestimmt die Höhe, nichts springt ---------- */ html.look-j body.look-b .b-mega__panes:not(#j){display:grid !important;align-content:start} html.look-j body.look-b .b-mega__pane{grid-area:1/1;visibility:hidden;min-width:0} html.look-j body.look-b .b-mega__pane.is-zeig{visibility:visible} html.look-j body.look-b .b-mega__txt{margin:16px 0 0;font-size:18px;line-height:1.45;max-width:44ch;color:var(--j-dark)} html.look-j body.look-b .b-mega__pane .b-mega__all--j:not(#j){margin-top:20px;display:inline-flex} /* gezeigter Punkt links = wie Hover (Farbe der Aktivität, sonst Kastenfarbe); Journal-Kategorien einer Aktivität ebenfalls in deren Farbe */ html.look-j body.look-b :is(.b-mega__acts,.b-mega__cats) > li.is-zeig > a:not(#j):not(#k), html.look-j body.look-b .b-mega__cats > li > a[style*="--mc"]:not(#j):not(#k):hover{background:var(--jh,var(--j-block)) !important;color:var(--jht,var(--j-block-text)) !important} html.look-j body.look-b :is(.b-mega__acts,.b-mega__cats) > li.is-zeig > a :is(b,span,small):not(#j):not(#k), html.look-j body.look-b .b-mega__cats > li > a[style*="--mc"]:hover :is(span,small):not(#j):not(#k){color:inherit !important} /* Nutzer 10.10. („zu krasse Kontraste – das soll nie so kommen“): große Kästen nie in der Kastenfarbe (die kann Neon sein) – Kopffarbe mit Kopfschrift. Neon bleibt auf kleinen Elementen (Station, Hover) */ html.look-j body.look-b :is(.b-actsov__card,.b-card,.comp,.callout,.pr-side):not(#j):not(#k){background:var(--hero) !important;color:var(--on-hero) !important;--ink:var(--on-hero);--ink-2:var(--on-hero);--j-text:var(--on-hero);--j-bg:var(--hero);--canvas:var(--hero);--surface:var(--hero);--stone:var(--hero);--hair:var(--on-hero);--line:var(--on-hero)} /* Grundfarben ohne Skript (kein Satz gewürfelt): auch pastellig – Butter / Rosa / Babyblau */ html.look-j:not([data-jset]){--hero:#fff3b0;--on-hero:#141414;--j-bg:#ffc8dd;--j-text:#141414;--j-block:#bde0fe;--j-block-text:#141414;--j-station:#bde0fe;--j-station-text:#141414;--j-logo:#141414} /* angedockte Reiter-Leiste: aktiver Reiter umgekehrt wie überall (stand in der Kopffarbe auf der Kopffarbe – unsichtbar) */ html.look-j body.look-b .b-tabs-mini a.is-on:not(#j):not(#k),html.look-j body.look-b .b-tabs-mini a.is-on:hover:not(#j):not(#k){background:var(--on-hero) !important;color:var(--hero) !important} /* Hover in der Kopfleiste in derselben Form wie der aktive Punkt (12 px rund) – eckiger Hover neben rundem aktiven Punkt passte nicht */ html.look-j body.look-b :is(.b-links > ul > li > a,.b-links .menu > li > a,.b-lang__btn):not(#j):not(#k){border-radius:12px !important} /* ---------- Übersicht „Aktivitäten“ (Nutzer 10.10.): alle Aktivitäten untereinander, jede mit eigenem Kopf in ihrer Farbe, darunter ihre Berichte ---------- */ html.look-j body.look-b .j-secs{display:grid;gap:clamp(56px,6vw,96px)} html.look-j body.look-b .j-sec__head{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:stretch;padding:clamp(28px,3.4vw,52px);background:var(--jh,var(--hero));color:var(--jht,var(--on-hero));--j-text:var(--jht,var(--on-hero));--j-bg:var(--jh,var(--hero))} html.look-j body.look-b .j-sec__head.has-img{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} html.look-j body.look-b .j-sec__head.j-gleich{background:var(--hero);color:var(--on-hero);--j-text:var(--on-hero);--j-bg:var(--hero)} html.look-j body.look-b .j-sec__txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0} html.look-j body.look-b .j-sec__no{font-size:15px;font-weight:500;margin-bottom:auto;padding-bottom:28px} html.look-j body.look-b .j-sec__head h2{margin:0;font-size:clamp(34px,4.2vw,64px) !important;line-height:1.02;color:inherit} html.look-j body.look-b .j-sec__head h2 a{color:inherit;text-decoration:none} html.look-j body.look-b .j-sec__head h2 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px} html.look-j body.look-b .j-sec__head p{margin:18px 0 0;font-size:clamp(17px,1.3vw,20px);line-height:1.45;max-width:46ch;color:inherit} html.look-j body.look-b .j-sec__btn:not(#j){margin-top:28px;color:inherit !important} html.look-j body.look-b .j-sec__img{min-height:220px;overflow:hidden} html.look-j body.look-b .j-sec__img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.15) !important;mix-blend-mode:multiply} html.look-j body.look-b .j-sec__cards{margin-top:clamp(24px,2.4vw,36px)} @media (max-width:760px){html.look-j body.look-b .j-sec__head.has-img{grid-template-columns:minmax(0,1fr)}html.look-j body.look-b .j-sec__img{min-height:0;aspect-ratio:4/3}} /* Fuß: „Farbe ändern“ unter Kontakt, unten ausgerichtet (auf Höhe der letzten Zeile von „Entdecken“) */ html.look-j body.look-b .b-footer__kontakt{display:flex;flex-direction:column;align-self:stretch} html.look-j body.look-b .b-footer__kontakt .j-farbe--fuss:not(#j){margin:auto 0 -7px -10px;align-self:flex-start} /* Übersicht (Nutzer 10.10.): die Einträge stehen MIT im farbigen Kasten – Kopf und Karten sind eine Fläche in der Farbe der Aktivität */ html.look-j body.look-b .j-sec{padding:clamp(28px,3.4vw,52px);background:var(--jh,var(--hero));color:var(--jht,var(--on-hero));--j-text:var(--jht,var(--on-hero));--j-bg:var(--jh,var(--hero));--ink:var(--jht,var(--on-hero));--ink-2:var(--jht,var(--on-hero));--hair:var(--jht,var(--on-hero));--line:var(--jht,var(--on-hero))} html.look-j body.look-b .j-sec.j-gleich{background:var(--hero);color:var(--on-hero);--j-text:var(--on-hero);--j-bg:var(--hero);--ink:var(--on-hero)} html.look-j body.look-b .j-sec__head:not(#j){padding:0 !important;background:transparent !important;color:inherit !important} html.look-j body.look-b .j-sec__cards:not(#j){margin-top:clamp(36px,3.4vw,56px)} html.look-j body.look-b .j-sec .card :is(h3,p,.meta span,.cta):not(#j){color:inherit !important} /* Fotos im Kasten einfarbig in der Kastenfarbe (Schatten dunkel, Licht = Kastenfarbe); beim Drüberfahren das Original */ html.look-j body.look-b .j-sec .card .ph img:not(#j){filter:grayscale(1) contrast(1.15) !important;mix-blend-mode:multiply} html.look-j body.look-b .j-sec .card .ph:hover img:not(#j){filter:none !important;mix-blend-mode:normal} /* Einträge ohne Bild (Module, Folgen, Ergebnisse): oben eine feine Linie statt Bild */ html.look-j body.look-b .j-item:not(#j){border-top:1.5px solid currentColor;padding-top:18px !important} html.look-j body.look-b .j-item h3:not(#j){margin-top:6px} /* Link-Zeichen auf den Bildern in der Farbe der Kategorie (im Kasten: Farbe der Aktivität, sonst Kopffarbe) – volle Farbe statt aufgehellt */ html.look-j body.look-b .card .ph::after{background-color:var(--jh,var(--hero)) !important} /* Language Station (Nutzer 10.10.): nicht so dick – etwas dünner, ein Tick mehr Buchstabenabstand */ html.look-j body.look-b :is(.b-station-btn,.b-dr__station):not(#j):not(#k),html.look-j body.look-b :is(.b-station-btn,.b-dr__station) *:not(#j):not(#k){-webkit-text-stroke:0 !important;font-weight:600 !important;letter-spacing:.075em !important} /* Bildfläche im Kasten in der Kastenfarbe – sonst mischt sich das Foto mit hellem Grund und bleibt grau */ html.look-j body.look-b .j-sec{--surface:var(--jh,var(--hero));--canvas:var(--jh,var(--hero));--stone:var(--jh,var(--hero))} html.look-j body.look-b .j-sec.j-gleich{--surface:var(--hero);--canvas:var(--hero);--stone:var(--hero)} html.look-j body.look-b .j-sec .card .ph:not(#j){background-color:var(--surface) !important;isolation:auto} /* Nutzer 10.10.: „Logo raus“ – kein farbiges PLURI-Zeichen im Kopf von „Über PLURI“ (und anderen Seiten mit Logo-Kasten) */ html.look-j body.look-b .phead > .b-logobox:not(#j){display:none !important} /* Einträge im Menüfeld (Module, Folgen …): Titel mit kleiner Zeile darunter */ html.look-j body.look-b .b-mega__items .b-mega__catt small:not(#j){display:block;margin-top:4px;font-size:14px !important;font-weight:400 !important;opacity:.8} /* Kopfleiste über dem stehenden Farbkopf: Kopffarben behalten, auch wenn schon gescrollt (nav-pinned) – erst über dem Inhalt (j-ueber, b.js) die Inhaltsfarben */ html.look-j.nav-pinned:not(.j-ueber) body.look-b .b-nav{--nav-fg:var(--on-hero)} html.look-j.nav-pinned:not(.j-ueber) body.look-b .b-bar:not(:has(li.mega-on)) :is(.b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a):not(#j):not(#k){color:var(--hero) !important} html.look-j.nav-pinned:not(.j-ueber) body.look-b .b-bar:not(:has(li.mega-on)) .b-logo:not(#j):not(#k){color:var(--j-logo) !important} /* Beitragsseite (Nutzer 10.10.): Einleitung über dem Fließtext – so kräftig wie vorher im Kopf, ungekürzt; danach normaler Fließtext */ html.look-j body.look-b .jpost-text :is(.jpost-lead,.is-style-pluri-lead):not(#j){font-weight:600 !important;font-size:clamp(19px,1.35vw,23px) !important;line-height:1.45 !important;letter-spacing:-.01em;margin:0 0 1.1em;max-width:40em} /* Nutzer 10.10.: Logo bündig mit dem Inhalt (Titel, Text) – die Leiste rückt um ihren Innenabstand (18 px) + den Rand im Logo (≈ 2 px) nach links; so bleibt das Logo auch beim Öffnen des Menüs an seiner Stelle (der weiße Kasten steht dann 20 px über) */ @media (min-width:761px){html.look-j body.look-b .b-bar:not(#j):not(#k){margin-left:-20px}} /* Übersicht „Aktivitäten“ (Nutzer 10.10.: „wenn man in den Onlinekurs geht, muss es auch die Farbe haben“): jeder Kasten immer in der echten Farbe seiner Aktivität – alle sechs Pastelltöne gehören einer Aktivität, darum ist der Inhalt hier weiß (kein Kasten kann wie der Grund aussehen) */ html.look-j body.look-b.page-template-templatesactivities-php .b-sheet:not(#j):not(#k){background:#fff !important;--j-bg:#fff;--j-text:#141414;--canvas:#fff;--bg:#fff;--surface:#fff;--stone:#fff;--ink:#141414;--ink-2:#141414;--hair:#141414;--line:#141414} /* Nutzer 10.10. („der unterstrichene Text ist unten dünner“): Kartentitel ungekürzt – Chrome zeichnet die Unterstreichung auf der mit „…“ gekürzten Zeile dünner; ohne Kürzung sind alle Zeilen gleich (und der Hinweis mit dem vollen Titel ist nicht mehr nötig) */ html.look-j body.look-b .card h3:not(#j):not(#k){display:block !important;-webkit-line-clamp:unset !important;line-clamp:none !important;overflow:visible !important;-webkit-box-orient:unset !important} /* Q&A-Suche (Nutzer 10.10. „broke?“): EIN Rahmen – feine dunkle Linie um das Feld, kein farbiger Ring; das Eingabefeld selbst ohne eigenen Fokus-Rahmen, beim Tippen wird die Linie des Felds kräftiger */ html.look-j body.look-b .b-wiki__search:not(#j):not(#k){background:transparent !important;box-shadow:inset 0 0 0 1.5px var(--j-text) !important;border:0 !important} html.look-j body.look-b .b-wiki__search:focus-within:not(#j):not(#k){box-shadow:inset 0 0 0 2.5px var(--j-text) !important} html.look-j body.look-b .b-wiki__search input:not(#j):not(#k),html.look-j body.look-b .b-wiki__search input:focus:not(#j):not(#k),html.look-j body.look-b .b-wiki__search input:focus-visible:not(#j):not(#k){outline:none !important;box-shadow:none !important;border:0 !important;background:transparent !important;color:var(--j-text) !important} /* aktiver Eintrag im Q&A-Verzeichnis: umgekehrt wie überall (dunkle Fläche, Schrift in der Farbe des Grundes) */ html.look-j body.look-b .b-wiki__toc a.on:not(#j):not(#k){background:var(--j-text) !important;color:var(--j-bg) !important} /* ---------- Infografik auf „Über PLURI“ (Nutzer 10.10.: „komplett anders, geil, Farben richtig“): Ergebnis oben, Aktivitäten als Säulen mit feinen Linien zum Dach, dunkles Fundament – Farben = Pastellton der jeweiligen Aktivität (--jh), jede Fläche führt zu ihrer Seite ---------- */ html.look-j body.look-b .j-info{display:grid;gap:0;color:var(--j-text)} html.look-j body.look-b .j-info a{text-decoration:none !important} html.look-j body.look-b .j-info__k{display:block;font-size:13px;font-weight:500;letter-spacing:.02em} html.look-j body.look-b .j-info__dach{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:140px;padding:18px 22px;background:var(--jh,var(--hero));color:var(--jht,#141414) !important} html.look-j body.look-b .j-info__dach b{font-size:clamp(28px,2.6vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1} html.look-j body.look-b .j-info__saeulen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding-top:28px} html.look-j body.look-b .j-info__s{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:260px;padding:14px 12px 16px;background:var(--jh,var(--hero));color:var(--jht,#141414) !important} html.look-j body.look-b .j-info__s::before{content:"";position:absolute;left:50%;top:-28px;height:28px;border-left:1.5px solid var(--j-text)} html.look-j body.look-b .j-info__no{font-size:13px;font-weight:500} html.look-j body.look-b .j-info__s b{font-size:clamp(15px,1.12vw,18px);font-weight:600;line-height:1.15;letter-spacing:-.01em;hyphens:auto;overflow-wrap:break-word} html.look-j body.look-b .j-info__basis{margin-top:8px;padding:16px 22px 18px;background:#141414;color:#fff} html.look-j body.look-b .j-info__basis div{display:flex;flex-wrap:wrap;gap:4px 28px;margin-top:10px} html.look-j body.look-b .j-info__basis b{font-size:clamp(17px,1.3vw,21px);font-weight:600;letter-spacing:-.01em} /* Hover wie überall umgekehrt: dunkle Fläche, Schrift in der Farbe der Fläche */ html.look-j body.look-b :is(.j-info__dach,.j-info__s):hover{background:#141414 !important;color:var(--jh,var(--hero)) !important} html.look-j body.look-b .j-info :is(.j-info__dach,.j-info__s):focus-visible{outline:2.5px solid #141414;outline-offset:2px} @media (max-width:700px){ html.look-j body.look-b .j-info__saeulen{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:8px} html.look-j body.look-b .j-info__s{min-height:140px} html.look-j body.look-b .j-info__s::before{display:none} } /* Symbole rechts: eckig wie die Grafik */ html.look-j body.look-b .b-bau__ic svg{width:48px;height:32px} /* Infografik als weiße Tafel über die ganze Breite (in der halben Spalte zerbrachen die Säulennamen; auf einem Pastellgrund kann eine Fläche wie der Grund aussehen – auf Weiß zeigt jede ihre echte Farbe); die drei Erklärungen darunter in drei Spalten (Dach, Säulen, Fundament) */ html.look-j body.look-b .b-bau:not(#j):not(#k){grid-template-columns:minmax(0,1fr) !important;align-items:start;gap:clamp(28px,3vw,44px);background:#fff !important;color:#141414;--j-text:#141414;--j-bg:#fff;--canvas:#fff;--surface:#fff;--hair:rgba(20,20,20,.18);--ink:#141414;--ink-2:#141414} html.look-j body.look-b .b-bau__list:not(#j){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)} html.look-j body.look-b .b-bau__list li:not(#j):not(#k){display:block;padding:16px 0 0 !important;border-top:1.5px solid #141414 !important} html.look-j body.look-b .b-bau__ic:not(#j){display:block;width:auto;height:auto;background:none !important;margin-bottom:14px} html.look-j body.look-b .b-bau__ic svg:not(#j){width:48px;height:32px;display:block} @media (max-width:760px){html.look-j body.look-b .b-bau__list:not(#j){grid-template-columns:minmax(0,1fr)}} html.look-j body.look-b .j-info__s b:not(#j){hyphens:manual;overflow-wrap:normal} /* Abschnittsnummern auf „Über PLURI“ in der Schriftfarbe (Gelb auf Pfirsich war kaum lesbar) */ html.look-j body.look-b .b-about__no:not(#j):not(#k){color:var(--j-text) !important} /* lange Wörter (Handlungsempfehlungen) trennen, Symbole linksbündig über ihrem Text */ html.look-j body.look-b .j-info__s b:not(#j):not(#k){hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal} html.look-j body.look-b .b-bau__ic:not(#j):not(#k){text-align:left;place-items:start;justify-content:flex-start} html.look-j body.look-b .b-bau__ic svg:not(#j):not(#k){margin:0 !important} html.look-j body.look-b .j-info__s b:not(#j):not(#k){overflow-wrap:break-word} /* Startseite: Titelwort im Gooey-Wechsel (b.js) – altes und neues Wort liegen im selben Rasterfeld übereinander, mittig */ html.look-j body.look-b .b-rotor__w.j-goo{display:inline-grid;justify-items:center;align-items:center} html.look-j body.look-b .j-goo__w{grid-area:1 / 1;white-space:nowrap} /* Nutzer 10.10.: Unterzeile der Startseite und Eckdaten (Laufzeit, Förderung) etwas dicker */ html.look-j body.look-b .b-hero .b-sub:not(#j):not(#k){font-weight:500 !important} html.look-j body.look-b .b-facts li:not(#j):not(#k),html.look-j body.look-b .b-facts li *:not(svg):not(path):not(rect):not(#j):not(#k){font-weight:500 !important} /* Nutzer 10.10.: fließender Verlauf in den Köpfen wieder raus – klare Farbe */ html.look-j .j-flow{display:none !important} /* Titelwort in Pastell (Nutzer 10.10.: „wie die Hintergründe“): feine dunkle Kontur, damit es auf jedem Pastellkopf lesbar bleibt */ /* Nutzer 10.10.: „kein Rand!“ – das Pastellwort steht ohne Kontur */ /* Nutzer 10.10.: Reiter der Aktivitäten und des Journals über die volle Breite (seit der Journal-Reiter fehlt, blieb rechts Platz) – alle gleich breit */ @media (min-width:900px){ html.look-j body.look-b .b-tabs--acts .b-boxes:not(#j):not(#k){display:grid !important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none !important;width:100%} html.look-j body.look-b .b-tabs--acts .b-boxes > li:not(#j):not(#k){width:auto !important;max-width:none !important;flex:none !important;min-width:0} html.look-j body.look-b .b-tabs--acts .b-boxes > li > a:not(#j):not(#k){width:100%} } /* Nutzer 10.10.: das Logo lässt sich nicht ziehen (kein Geisterbild mit Link) */ html.look-j :is(.b-logo,.b-footer__logo a),html.look-j :is(.b-logo,.b-footer__logo a) *{-webkit-user-drag:none;user-select:none;-webkit-user-select:none} /* Aktivitäten-Übersicht: auch der Seitengrund unter dem weißen Inhalt weiß (sonst Streifen in der Kopf-/Inhaltsfarbe vor dem Fuß) */ html.look-j body.look-b.page-template-templatesactivities-php:not(#j){background:#fff !important} /* Fuß „Farbe ändern“ (Nutzer 10.10.): kleinere Buchstaben, Innenabstand links und rechts; steht bündig mit der Spalte */ html.look-j body.look-b .b-footer__kontakt .j-farbe--fuss:not(#j):not(#k){font-size:16px !important;line-height:1.2 !important;padding:8px 16px !important;margin:auto 0 0 0 !important} /* Infografik-Hover (Nutzer 11.10.: „nicht schwarz – die Farbe, etwas anders“): dieselbe Farbe eine Stufe tiefer, Schrift bleibt dunkel */ html.look-j body.look-b :is(.j-info__dach,.j-info__s):hover:not(#j):not(#k){background:oklch(from var(--jh,var(--hero)) calc(l - .07) calc(c + .03) h) !important;color:var(--jht,#141414) !important} /* Nutzer 11.10.: angeheftete Leiste über dem Inhalt (j-ueber, b.js) = weißer Kasten mit feiner Linie wie beim geöffneten Menü – sonst liegt sie unleserlich auf dem Text. Über dem farbigen Kopf bleibt sie frei. Aktiver Punkt im weißen Kasten wie im offenen Menü: Kopffarbe, dunkle Schrift */ html.look-j.j-ueber body.look-b .b-nav:not(#j){--nav-fg:#141414} html.look-j.j-ueber body.look-b .b-bar:not(:has(li.mega-on)):not(#j):not(#k){background:#fff !important;box-shadow:inset 0 0 0 1.5px var(--j-dark) !important} html.look-j.j-ueber body.look-b .b-bar .b-logo:not(#j):not(#k){color:#141414 !important} html.look-j.j-ueber body.look-b .b-bar:not(:has(li.mega-on)) :is(.b-links > ul > li > a,.b-links .menu > li > a,.b-lang__btn):not(#j):not(#k){color:#141414 !important} html.look-j.j-ueber body.look-b .b-bar:not(:has(li.mega-on)) :is(.b-links ul li.menu-item.is-active > a,.b-links ul li.current_page_item > a,.b-links ul li.current-menu-item:not(.menu-item-type-custom) > a):not(#j):not(#k){background:var(--hero) !important;color:#141414 !important} /* Angedockte Reiter (Nutzer 11.10.): feine dunkle Linie wie die weiße Kopfleiste, links bündig mit ihr (Leiste steht 20 px vor dem Inhalt), rechts bündig mit der Language Station */ html.look-j body.look-b .b-tabs-mini a:not(.is-on):not(#j):not(#k){box-shadow:inset 0 0 0 1.5px var(--j-dark) !important} /* Nutzer 11.10. („warum ist die 01 nicht pink?“): Abschnittsnummern auf „Über PLURI“ in der Kopffarbe – eine Stufe satter, damit sie auf dem Pastellgrund lesbar bleiben */ html.look-j body.look-b .b-about__no:not(#j):not(#k){color:oklch(from var(--hero) calc(l - .1) calc(c + .07) h) !important} /* Nutzer 11.10. („ist das das gleiche Pink wie oben?“): Abschnittsnummern genau in der Kopffarbe */ html.look-j body.look-b .b-about__no:not(#j):not(#k){color:var(--hero) !important} /* Nutzer 11.10. („achte drauf, dass die Breite passt“): als Kasten (angeheftet über dem Inhalt oder mit offenem Menü) steht die Leiste bündig mit der Inhaltsbreite – das Vorrücken um 20 px (Logo bündig mit dem Text) gilt nur, solange sie frei über dem Kopf liegt. Angedockte Reiter: ebenfalls Inhaltsbreite */ @media (min-width:761px){ html.look-j.j-ueber body.look-b .b-bar:not(#j):not(#k),html.look-j body.look-b .b-bar:has(li.mega-on):not(#j):not(#k){margin-left:0} } /* Bereichs-Kästen der Station (Nutzer 11.10.): große Nummer in der Farbe des Seitengrunds (--j-seite = Inhaltsfarbe der Seite, auch im Kasten); „N Praktiken“ und „Zu den Praktiken“ stehen in allen Kästen auf derselben Höhe (unten), Abstände gleich */ html.look-j{--j-seite:var(--j-bg)} html.look-j body.look-b .comps .comp .num:not(#j):not(#k){color:var(--j-seite) !important;opacity:1 !important} html.look-j body.look-b .comps .comp:not(#j):not(#k){display:flex;flex-direction:column} html.look-j body.look-b .comps .comp > p.muted:not(#j):not(#k){margin-top:auto !important;padding-top:20px} html.look-j body.look-b .comps .comp > .btn:not(#j):not(#k){margin-top:18px !important;align-self:flex-start} /* Nutzer 11.10. („das obere Pink hier“): Nummern der Bereichs-Kästen in der Farbe des Sprache(n)Labor-Knopfs oben (dritte Farbe des Satzes) */ html.look-j body.look-b .comps .comp .num:not(#j):not(#k){color:var(--j-station) !important} /* Nutzer 11.10. („hier die Buttons farbig machen … auch die violette“): „Zu den Praktiken“ in der Farbe des Sprache(n)Labor-Knopfs oben – wie die Nummern, feine dunkle Linie wie der Knopf; Hover = Umkehrung (dunkel, Schrift in der Knopffarbe) */ html.look-j body.look-b .comps .comp > .btn:not(#j):not(#k){background:var(--j-station) !important;color:var(--j-station-text) !important;box-shadow:inset 0 0 0 1.5px var(--j-dark) !important} html.look-j body.look-b .comps .comp > .btn:not(#j):not(#k):is(:hover,:focus-visible){background:var(--j-dark) !important;color:var(--j-station) !important} /* Über PLURI (Nutzer 11.10.): Kopf mittig – „Über“ klein, darunter groß der PLURI-Schriftzug aus dem Logo (immer schwarz wie das Logo), Einleitung mittig darunter */ html.look-j body.look-b .phead--wort:not(#j):not(#k){grid-template-columns:minmax(0,1fr) !important} html.look-j body.look-b .phead--wort :is(.ph,.b-logobox,.kicker):not(#j):not(#k){display:none !important} html.look-j body.look-b .phead--wort .t:not(#j):not(#k){align-items:center !important;text-align:center !important;justify-content:center !important;min-height:clamp(300px,46vh,500px) !important;padding:clamp(24px,4vh,56px) 0 clamp(8px,2vh,24px) !important;max-width:none !important;width:100%} html.look-j body.look-b .j-wortkopf:not(#j):not(#k){display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,22px);margin:0 auto;font-size:inherit !important;line-height:1 !important;cursor:default} html.look-j body.look-b .j-wortkopf__klein:not(#j):not(#k){display:block;font-size:clamp(19px,1.7vw,26px) !important;font-weight:600 !important;letter-spacing:-.01em !important;line-height:1 !important;color:var(--on-hero)} html.look-j body.look-b .j-wort:not(#j):not(#k){display:block;width:clamp(250px,50vw,760px);height:auto;overflow:visible;color:var(--j-logo,#141414)} html.look-j body.look-b .phead--wort .lead:not(#j):not(#k){margin:clamp(22px,3vh,36px) auto 0 !important;max-width:46ch;text-align:center} @media (max-width:760px){html.look-j body.look-b .phead--wort .t:not(#j):not(#k){min-height:0 !important;padding-top:36px !important}html.look-j body.look-b .j-wort:not(#j):not(#k){width:min(78vw,340px)}} /* Über-Kopf: „Über“ bündig links über dem P (der Wurm des I kreuzt es so nie), Einleitung mit Abstand für den Wurm unter dem R */ html.look-j body.look-b .j-wortkopf:not(#j):not(#k){align-items:flex-start !important;width:max-content;max-width:100%} html.look-j body.look-b .j-wortkopf__klein:not(#j):not(#k){padding-left:.06em} html.look-j body.look-b .phead--wort .lead:not(#j):not(#k){margin-top:clamp(30px,3.6vw,58px) !important} /* Nutzer 11.10.: PLURI-Schriftzug im Über-Kopf 20 % kleiner */ html.look-j body.look-b .j-wort:not(#j):not(#k):not(#m){width:clamp(200px,40vw,608px)} @media (max-width:760px){html.look-j body.look-b .j-wort:not(#j):not(#k):not(#m){width:min(62vw,272px)}}