/*
* Seitenlayout (Body-Klasse .wjh-seite). Bleibt im WJD-CI: Blau #003594, Türkis #47d7ac,
* eckige Formen, Schriften aus dem Theme. Nur ergänzend zum Theme, keine Theme-Regeln überschreiben,
* die auf anderen Seiten gelten.
*/
/* Lesbare Zeilenlänge: Fließtext als zentrierte Spalte, Karten und Spalten bleiben breit. */
.wjh-seite .section__content .wp-block-wjd-group > :is(p, ul.wp-block-list, ol, h3, h4) {
max-width: 760px;
margin-left: auto;
margin-right: auto;
}
.wjh-seite .section__content .wp-block-wjd-group > p,
.wjh-seite .section__content .wp-block-wjd-group > ul li { line-height: 1.65; }
/* Einstieg unter dem Hero */
.wjh-seite p.wjh-lead {
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
line-height: 1.55;
color: #1d1d1b;
}
/* Listen mit türkisen Quadraten statt Standardpunkten */
.wjh-seite .section__content .wp-block-wjd-group > ul.wp-block-list:not(.wjh-zahlen) { list-style: none; padding-left: 0; }
.wjh-seite .section__content .wp-block-wjd-group > ul.wp-block-list:not(.wjh-zahlen) > li {
position: relative;
padding-left: 1.5em;
margin: .5em 0;
}
.wjh-seite .section__content .wp-block-wjd-group > ul.wp-block-list:not(.wjh-zahlen) > li::before {
content: "";
position: absolute;
left: 0;
top: .6em;
width: 8px;
height: 8px;
background: #47d7ac;
}
/* Kennzahlen: */
.wjh-seite ul.wjh-zahlen {
list-style: none;
padding: 0;
margin: 40px auto 0;
max-width: 760px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
}
.wjh-seite ul.wjh-zahlen > li {
margin: 0;
padding: 20px 0 0;
border-top: 4px solid #47d7ac;
font-size: 15px;
line-height: 1.4;
text-wrap: balance;
}
.wjh-seite ul.wjh-zahlen > li::before { content: none; }
.wjh-seite ul.wjh-zahlen strong {
display: block;
font-family: Chivo, sans-serif;
font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
line-height: 1;
color: #003594;
margin-bottom: 8px;
}
/* Karten: ganze Fläche klickbar, klare Hover- und Fokuszustände */
.wjh-seite .card { position: relative; transition: box-shadow .2s ease, transform .2s ease; }
.wjh-seite .card:has(.card__cta[href]:not([href=""])):hover {
box-shadow: 0 10px 28px rgba(0, 53, 148, .14);
transform: translateY(-3px);
}
.wjh-seite .card__cta[href]:not([href=""])::after { content: ""; position: absolute; inset: 0; }
.wjh-seite .card:has(.card__cta:focus-visible) { outline: 3px solid #47d7ac; outline-offset: 3px; }
.wjh-seite .card__cta:focus-visible { outline: none; }
.wjh-seite .card:hover .card__headline { color: #003594; }
@media (prefers-reduced-motion: reduce) {
.wjh-seite .card { transition: none; }
.wjh-seite .card:hover { transform: none; }
}
/* Schritte: Spalten mit Klasse wjh-schritte, Karten-Tag „1", „2", „3" wird zur großen Ziffer */
.wjh-seite .wjh-schritte .card__meta-data-item {
font-family: Chivo, sans-serif;
font-size: 3rem;
line-height: 1;
color: #47d7ac;
letter-spacing: 0;
}
.wjh-seite .wjh-schritte .card { border-top: 4px solid #003594; }
/* Abstand zwischen untereinander gestapelten Karten auf dem Handy */
@media (max-width: 781px) {
.wjh-seite .wp-block-columns { gap: 24px; }
.wjh-seite .wp-block-column .card__content { height: auto !important; }
}
/* Ansprechpersonen: [wjh_personen … stil="kontakt"] */
.wjh-nw-karten--kontakt {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 360px));
justify-content: center;
gap: 20px;
margin-top: 32px;
}
.wjh-nw-karten--kontakt .wjh-nw-karte { flex: none; }
.wjh-nw-karten--kontakt .wjh-nw-karte a {
flex-direction: row;
align-items: center;
text-align: left;
gap: 18px;
height: 100%;
box-sizing: border-box;
padding: 16px;
background: #fff;
border: 2px solid #dfe4ee;
transition: border-color .2s ease;
}
.wjh-nw-karten--kontakt .wjh-nw-karte a:hover { border-color: #003594; }
.wjh-nw-karten--kontakt .wjh-nw-karte__bild { width: 88px; height: 88px; flex: 0 0 88px; margin: 0; }
.wjh-nw-karten--kontakt .wjh-nw-karte__name { display: block; font-size: 1.125rem; }
.wjh-nw-karten--kontakt .wjh-nw-karte__zeile { color: #333; }
.wjh-nw-karten--kontakt .wjh-nw-karte__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wjh-nw-karten--kontakt .wjh-nw-karte__mehr { margin-top: 6px; font-size: 14px; font-weight: 700; color: #003594; }
.wjh-nw-karten--kontakt .wjh-nw-karte__mehr::after { content: " \203A"; }
/* Personen auf blauem Grund lesbar */
.section.is-inverted .wjh-nw-karte__name,
.section.is-inverted .wjh-nw-karte__zeile { color: #fff; }
.section.is-inverted .wjh-nw-karten--kontakt .wjh-nw-karte__name { color: #003594; }
.section.is-inverted .wjh-nw-karten--kontakt .wjh-nw-karte__zeile { color: #333; }
/* Hero-Fotos: Bildausschnitt höher ansetzen, damit Köpfe nicht angeschnitten werden (WJD-Regel). */
.wjh-seite .v-hero .swiper-slide { background-position: center 25% !important; }
/* Karten in einer Reihe gleich hoch */
.wjh-seite .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; }
.wjh-seite .wp-block-columns > .wp-block-column > .card { flex: 1 1 auto; }
/* Zitate nebeneinander: kleiner und ohne riesigen Abstand nach oben */
.wjh-seite .wp-block-column > blockquote.quote { margin-top: 90px; flex: 1 1 auto; }
.wjh-seite .wp-block-column > blockquote.quote .quote__body { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.25; }
.wjh-seite .wp-block-column > blockquote.quote .quote__inner { height: 100%; box-sizing: border-box; }
/* Kartenbilder im festen Seitenverhältnis, damit Fotos nicht die Karte dominieren */
.wjh-seite .card.is-vertical .card__image-wrapper img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; }
.wjh-seite .wp-block-column > .card { margin-bottom: 0; }
.wjh-seite .wp-block-column { padding-bottom: 0; }
.wjh-seite .wp-block-columns + .wp-block-columns { margin-top: 32px; }
/* Aufruf-Bereiche (blau, „funky"): Text mittig, Button hell und gut sichtbar */
.wjh-seite .section.is-funky .wp-block-wjd-group > p { text-align: center; }
.wjh-seite .section.is-funky .wjd-button-wrapper { display: flex; justify-content: center; margin-top: 24px; }
.wjh-seite .section.is-inverted .button.is-default {
color: #003594;
background: #fff;
border-color: #fff;
}
.wjh-seite .section.is-inverted .button.is-default:hover,
.wjh-seite .section.is-inverted .button.is-default:focus-visible {
color: #fff;
background: transparent;
border-color: #fff;
}
.wjh-seite .section.is-inverted .button:focus-visible { outline: 3px solid #47d7ac; outline-offset: 3px; }
/* Kennzahlen auf dem Handy nebeneinander statt untereinander */
@media (max-width: 600px) {
.wjh-seite ul.wjh-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.wjh-seite ul.wjh-zahlen > li { font-size: 13px; padding-top: 12px; }
.wjh-seite ul.wjh-zahlen strong { font-size: 1.6rem; }
}
/* Kartenbild ohne Lücke zum türkisen Streifen: Link und Bild als Block, keine Grundlinie */
.wjh-seite .card__image-link { display: block; }
.wjh-seite .card__image-wrapper img { display: block; }
/* Kurze Abschnitte nur mit Text und Button: alles mittig unter der mittigen Überschrift */
.wjh-seite .wp-block-wjd-group:has(> .wjd-button-wrapper):not(:has(> .wp-block-columns, > ul.wp-block-list, > .wjh-nw-karten)) > p { text-align: center; }
.wjh-seite .wp-block-wjd-group:has(> .wjd-button-wrapper):not(:has(> .wp-block-columns, > ul.wp-block-list, > .wjh-nw-karten)) > .wjd-button-wrapper {
display: flex;
justify-content: center;
margin-top: 24px;
}
/* Bildausschnitt je Foto, wo die Köpfe tief im Bild sitzen (Teamfoto Strategiemeeting) */
.wjh-seite .v-hero .swiper-slide[style*="strategiemeeting-wjh-2025-teamfoto"] { background-position: center 62% !important; }
/* Hochkant-Karten: Bild in seiner Höhe, der Textteil füllt den Rest. Das Theme teilt sonst 50/50,
dann rutscht der türkise Streifen je nach Textlänge unterschiedlich weit unter das Bild. */
.wjh-seite .card.is-vertical .card__image-wrapper { flex: 0 0 auto !important; height: auto !important; }
.wjh-seite .card.is-vertical .card__image-wrapper :is(figure, .figure__image-wrapper, .figure__image) { height: auto !important; }
.wjh-seite .card.is-vertical .card__content { flex: 1 1 auto !important; height: auto !important; }
/* Text rund um mittig gesetzte Kontaktkarten ebenfalls mittig */
.wjh-seite .wp-block-wjd-group:has(> .wjh-nw-karten--kontakt) > p { text-align: center; }
/* Sprungziele für die Abschnittsnavigation, Abstand für den festen Kopfbereich */
.wjh-anker { display: block; height: 0; scroll-margin-top: 140px; }
/* Sprungleiste innerhalb einer Seite: */
.wjh-sprung { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px auto 0; max-width: 760px; }
.wjh-sprung a { padding: 10px 18px; border: 2px solid #003594; color: #003594; font-weight: 700; text-decoration: none; }
.wjh-sprung a:hover, .wjh-sprung a:focus-visible { background: #003594; color: #fff; }
/* WJH A-Z (assets/glossar.js) */
[data-wjh-glossar] { max-width: 760px; margin: 0 auto; }
.wjh-glossar-haft { position: sticky; top: 0; z-index: 50; background: #fff; padding: 0 16px; }
.wjh-glossar-leiste { max-width: 760px; margin: 0 auto; background: #fff; padding: 16px 0 12px; border-bottom: 2px solid #dfe4ee; }
.wjh-glossar-leiste input[type="search"] { width: 100%; box-sizing: border-box; border: 2px solid #003594; border-radius: 0; padding: 12px 14px; font: inherit; }
.wjh-glossar-leiste input:focus-visible { outline: 3px solid #47d7ac; outline-offset: 1px; }
.wjh-glossar-abc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.wjh-glossar-abc a, .wjh-glossar-abc span { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; text-decoration: none; }
.wjh-glossar-abc a { color: #003594; border: 2px solid #003594; }
.wjh-glossar-abc a:hover, .wjh-glossar-abc a:focus-visible { background: #003594; color: #fff; }
.wjh-glossar-abc span { color: #c5cad0; border: 2px solid #eef0f3; }
.wjh-glossar-zahl, .wjh-glossar-leer { font-size: 14px; color: #555; margin: 10px 0 0; }
.wjh-seite .wjh-glossar-buchstabe { margin-top: 40px; scroll-margin-top: 150px; }
.wjh-seite .wjh-glossar-buchstabe .headline-section__content { max-width: 760px; margin: 0 auto; text-align: left; }
.wjh-seite .wjh-glossar-buchstabe .headline-section__headline { font-size: 2.5rem; color: #003594; margin: 0; }
.wjh-seite .wjh-glossar-abschnitt { margin-top: 8px; }
.wjh-begriff { max-width: 760px; margin: 0 auto; padding: 16px 0; border-top: 1px solid #dfe4ee; scroll-margin-top: 150px; }
.wjh-begriff h3 { margin: 0 0 6px; font-size: 1.2rem; color: #003594; }
.wjh-begriff p { margin: 6px 0 0; line-height: 1.6; }
.wjh-begriff:target { background: #eef8f4; box-shadow: -12px 0 0 #eef8f4, 12px 0 0 #eef8f4; }
@media (max-width: 600px) {
.wjh-glossar-abc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.wjh-glossar-abc a, .wjh-glossar-abc span { flex: 0 0 32px; }
}
/* Sprungleiste als haftender Balken (assets/seiten.js verschiebt sie unter den Seitenkopf) */
.wjh-sprung-leiste { position: sticky; top: var(--wjh-sprung-top, 0); z-index: 50; background: #fff; padding: 12px 16px; transition: box-shadow .2s ease; }
.wjh-sprung-leiste.is-haftend { box-shadow: 0 6px 16px rgba(0, 53, 148, .1); }
.wjh-sprung-leiste .wjh-sprung { width: fit-content; max-width: 100%; margin: 0 auto; padding: 6px; gap: 6px; border: 2px solid #47d7ac; flex-wrap: nowrap; overflow-x: auto; }
.wjh-sprung-leiste .wjh-sprung a { border: 0; padding: 10px 18px; white-space: nowrap; }
.wjh-sprung-leiste .wjh-sprung a.is-aktiv { background: #47d7ac; color: #003594; }
.wjh-sprung-leiste .wjh-sprung a:hover:not(.is-aktiv) { background: #e6ebf4; color: #003594; }
@media (max-width: 600px) { .wjh-sprung-leiste .wjh-sprung a { padding: 8px 12px; font-size: 14px; } }
/* Kartenlinks umbrechen statt über den Rand zu laufen */
.wjh-seite .card__cta { white-space: normal; overflow-wrap: anywhere; display: inline; }
.wjh-seite .card__footer { min-width: 0; }
/* Vier Karten nebeneinander bleiben lesbar */
.wjh-seite .wp-block-columns.wjh-vier .card__content { padding: 24px 20px; }
@media (min-width: 782px) and (max-width: 1100px) { .wjh-seite .wp-block-columns.wjh-vier { flex-wrap: wrap !important; } .wjh-seite .wp-block-columns.wjh-vier > .wp-block-column { flex-basis: calc(50% - 1em) !important; } }
/* Das Theme setzt overflow-x: hidden auf main, das schaltet position: sticky ab. clip schneidet genauso ab, ohne Scrollcontainer. */
.wjh-seite main { overflow-x: clip; overflow-y: visible; }