:root {
--sh-ink: #07090a;
--sh-paper: #ffffff;
/* 1.15.0: Eine Akzentfarbe. Blaugrau (#78aaba) und Rosé (#efdadd) stammten
aus der früheren Blau-Grau-/Rosé-Welt der Ursprungsvideos und standen
neben dem Signalgrün — auf der Seite wirkte das mal grün, mal blau oder
rosa. Beide Variablen zeigen jetzt auf die grüne Familie: --sh-blue ist
das dunkle, auf hellem Grund lesbare Grün (wie --sh-signal-deep),
--sh-rose ein heller Grünton für Flächen. */
--sh-blue: #f500a8;
--sh-rose: #ff4fc3;
--sh-signal: #ff3eb5;
--sh-warm: #F8F6F9;
--sh-muted: #acb8bb;
--sh-shell: 1220px;
--sh-content-width: 720px;
--sh-gutter: clamp(2rem, 5.5vw, 6rem);
--sh-body-font: Inter, Arial, Helvetica, sans-serif;
--sh-display-font: Inter, Arial, Helvetica, sans-serif;
--sh-body-size: 18px;
--sh-button-radius: 0px;
--sh-link-decoration: none;
--sh-line: rgba(248,247,242,.22);
}
* { box-sizing: border-box; }
html { background: var(--sh-ink); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--sh-ink); color: var(--sh-paper); font-family: var(--sh-body-font); font-size: var(--sh-body-size); line-height: 1.55; }
body.nav-open { overflow: hidden; }
body, button, input, textarea, select { font-family: var(--sh-body-font); }
/* 1.10.2: Bedienelemente (Buttons, Navigation, Formularfelder, Labels)
bleiben bewusst bei der Display-Grotesk statt der neuen Fließtext-Serife
Fraunces zu folgen — Fraunces ist für echten Lesetext gedacht, UI-Chrome
soll wie gewohnt kantig/klar bleiben, kein serifiger Button-Text. */
button, input, textarea, select,
.primary-navigation, .footer-column, .footer-bottom,
.header-cta, .wp-element-button, .wp-block-button__link, .button,
.eyebrow, .sh20-kicker,
.wordmark, .footer-mark { font-family: var(--sh-display-font); }
a { color: inherit; text-decoration-line: var(--sh-link-decoration); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--sh-blue); }
img, video { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
.site-shell, .sh20-bridge, .sh20-section-heading, .sh20-story-list, .sh20-pathways, .sh20-membership, .sh20-contact { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.screen-reader-text:focus, .skip-link:focus { z-index: 10000; clip: auto; width: auto; height: auto; left: 1rem; top: 1rem; margin: 0; overflow: visible; padding: .8rem 1rem; background: var(--sh-rose); color: var(--sh-ink); outline: 3px solid var(--sh-paper); }
.topbar { border-bottom: 1px solid var(--sh-line); background: var(--sh-ink); color: var(--sh-paper); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.topbar a, .topbar span { display: block; padding: .62rem 0; text-decoration: none; }
.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--sh-line); background: rgba(7,9,10,.96); color: var(--sh-paper); backdrop-filter: blur(16px); }
.has-sticky-header .site-header { position: sticky; top: 0; }
body.admin-bar.has-sticky-header .site-header { top: 32px; }
.header-inner { min-height: 78px; display: flex; align-items: center; gap: 1.2rem; }
.site-branding { flex-shrink: 0; }
.custom-logo-link { display: block; line-height: 0; }
.custom-logo { max-height: 40px; width: auto; filter: grayscale(1) contrast(3); }
.wordmark, .footer-mark { display: inline-flex; align-items: baseline; gap: .14em; font-family: var(--sh-display-font); font-size: 1.3rem; font-weight: 800; letter-spacing: -.07em; line-height: 1; text-decoration: none; }
.wordmark em, .footer-mark i { color: var(--sh-blue); font-family: inherit; font-style: normal; }
.wordmark small { align-self: flex-end; padding-bottom: .1rem; color: var(--sh-muted); font-family: var(--sh-body-font); font-size: .54rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.primary-navigation { margin-left: auto; }
.primary-navigation ul, .site-footer ul { list-style: none; padding: 0; margin: 0; }
.primary-navigation .menu { display: flex; align-items: center; gap: clamp(.65rem, 1.05vw, 1.15rem); }
.primary-navigation a { font-size: .69rem; font-weight: 750; letter-spacing: .055em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.primary-navigation .menu-item-has-children { position: relative; }
.primary-navigation .menu-item-has-children > a::after { content: ' +'; color: var(--sh-blue); }
.primary-navigation .sub-menu { position: absolute; left: -.9rem; top: calc(100% + 1rem); width: 240px; display: grid; gap: .35rem; padding: .85rem; border: 1px solid var(--sh-line); background: var(--sh-ink); box-shadow: .55rem .55rem 0 var(--sh-blue); opacity: 0; pointer-events: none; transform: translateY(-.45rem); transition: .16s ease; }
.primary-navigation .menu-item-has-children:hover > .sub-menu, .primary-navigation .menu-item-has-children:focus-within > .sub-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.primary-navigation .sub-menu a { display: block; padding: .5rem; white-space: normal; }
.header-cta, .wp-element-button, .wp-block-button__link, .button, .woocommerce a.button, .learndash-wrapper .ld-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .75rem 1rem; border: 1px solid var(--sh-paper); border-radius: var(--sh-button-radius); background: var(--sh-paper); color: var(--sh-ink) !important; font-size: .72rem; font-weight: 800; letter-spacing: .055em; line-height: 1.2; text-decoration: none; text-transform: uppercase; transition: background .16s ease, color .16s ease, transform .16s ease; }
.header-cta:hover, .wp-element-button:hover, .wp-block-button__link:hover, .button:hover, .woocommerce a.button:hover, .learndash-wrapper .ld-button:hover { border-color: var(--sh-blue); background: var(--sh-blue); color: var(--sh-ink) !important; transform: translate(-2px,-2px); }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--sh-paper); background: transparent; color: var(--sh-paper) !important; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--sh-paper); color: var(--sh-ink) !important; }
.menu-toggle { display: none; width: 44px; padding: 10px; border: 0; background: transparent; color: var(--sh-paper); cursor: pointer; }
.menu-toggle span:not(.screen-reader-text) { display: block; width: 24px; height: 2px; margin: 5px auto; background: currentColor; }
/* Modern SH 2.0 homepage */
.homepage-content > .entry-content {
overflow: clip;
}
/* Gefunden über Element-untersuchen-Screenshot (1.9.36): WordPress zentriert
per !important jedes direkte Kind eines "constrained layout"-Blocks auf
die globale Inhaltsbreite aus theme.json (contentSize: 760px), auch wenn
dieses Theme selbst schon margin:0 setzt, !important schlägt eine
einfache Regel immer, unabhängig von Spezifität. Dadurch rutschten Titel
und Überschriften site-weit nach rechts/mittig, sobald ein Abschnitt auf
Gutenberg-Blöcke umgestellt wurde. Jeder eigens gebaute Startseiten-
Abschnitt regelt seine Breite aber schon selbst über --sh-shell/--sh-
gutter, daher hier global für die ganze Startseite neutralisiert. */
.homepage-content .is-layout-constrained > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
.sh20-manifesto { min-height: min(760px, calc(100vh - 78px)); display: grid; align-items: end; padding: clamp(5rem, 10vw, 9.5rem) var(--sh-gutter) 3.5rem; border-bottom: 1px solid var(--sh-line); }
/* 1.9.37: Abstand Eyebrow/Kicker → folgende Überschrift war überall auf der
Startseite nur 1rem/16px, das wirkte "verklebt" (Header, Insights,
Zertifizierung, Direkt-loslegen). Auf einen spürbaren, aber weiterhin
responsiven Abstand angehoben. */
/* 1.9.39: noch mal deutlich mehr Abstand, 1.9.37 hat offenbar noch nicht
gereicht (Kicker klebte laut Rückmeldung weiterhin am Titel). */
.sh20-kicker, .eyebrow { margin: 0 0 clamp(1.75rem, 3.2vw, 2.5rem); color: var(--sh-signal); font-size: clamp(.72rem, 1.1vw, .88rem); font-weight: 800; letter-spacing: .1em; line-height: 1.35; text-transform: uppercase; }
/* Kein max-width in ch mehr (1.9.34): "Selbsthilfe" und "braucht" brechen
jetzt über feste
im Pattern um, nicht mehr über eine auf ein
bestimmtes Wort zugeschnittene Breite. Dadurch bleibt der Titel links
ausgerichtet, egal wie lang das gerade eingetippte blaue Wort ist. */
.sh20-manifesto h1 { max-width: 100%; margin: 0; overflow-wrap: break-word; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(3.5rem, 9.2vw, 9.5rem); font-weight: 800; letter-spacing: -.075em; line-height: .88; }
.sh20-manifesto h1 .signal { display: inline-block; max-width: 100%; }
.sh20-manifesto h1 .signal { color: var(--sh-blue); }
/* Blinkender Schreibmaschinen-Cursor, wiederverwendbar überall, wo Text per JS
getippt wird (Startseiten-Titel und Statement-Paare weiter unten). Nutzt
currentColor, passt sich also automatisch an Blau (Titel) oder Weiß
(Statement-Paare) an. */
.sh20-typing::after { display: inline-block; width: .05em; height: .78em; margin-left: .04em; background: currentColor; content: ''; vertical-align: -.05em; animation: sh20-caret-blink 1s step-end infinite; }
@keyframes sh20-caret-blink { 50% { opacity: 0; } }
.sh20-manifesto__bottom { width: min(100%, var(--sh-shell)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 410px); align-items: end; gap: 2rem; margin-top: clamp(3rem, 8vw, 7.5rem); }
.sh20-manifesto__bottom p { max-width: 38ch; margin: 0; color: rgba(248,247,242,.82); font-size: clamp(1.05rem, 1.5vw, 1.32rem); line-height: 1.4; }
.sh20-scroll-cue { display: inline-flex; align-items: center; gap: .6rem; color: var(--sh-paper); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; }
.sh20-scroll-cue::before { width: 2rem; height: 1px; background: var(--sh-blue); content: ''; }
.sh20-problem-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--sh-line); }
.sh20-problem-strip p { min-height: 9rem; display: flex; align-items: flex-end; margin: 0; padding: clamp(1.25rem, 3vw, 2.5rem) var(--sh-gutter); border-right: 1px solid var(--sh-line); font-family: var(--sh-display-font); font-size: clamp(1.1rem, 1.75vw, 1.7rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.02; }
.sh20-problem-strip p:last-child { border-right: 0; }
.sh20-bridge { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .8fr); gap: clamp(3rem, 9vw, 10rem); padding: clamp(5rem, 11vw, 9rem) 0; }
.sh20-bridge h2, .sh20-section-heading h2, .sh20-conversion h2, .sh20-membership h2, .sh20-faq h2, .sh20-contact h2, .sh20-newsletter h2 { margin: 0; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(2.75rem, 5.4vw, 6.4rem); font-weight: 800; letter-spacing: -.07em; line-height: .92; }
.sh20-bridge p:not(.eyebrow) { max-width: 34ch; margin: 0; color: rgba(248,247,242,.82); font-size: clamp(1.08rem, 1.5vw, 1.32rem); line-height: 1.45; }
.sh20-story { padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--sh-line); }
.sh20-section-heading { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .65fr); gap: 3rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.sh20-section-heading p:not(.eyebrow) { max-width: 30ch; margin: 0; color: var(--sh-muted); font-size: 1.05rem; line-height: 1.4; }
.sh20-story-list { display: grid; gap: 1px; overflow: hidden; border: 1px solid var(--sh-line); background: var(--sh-line); }
.sh20-story-card { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); background: var(--sh-ink); }
.sh20-story-card:nth-child(even) { grid-template-columns: minmax(360px, .92fr) minmax(0, 1.08fr); }
.sh20-story-card:nth-child(even) .sh20-story-card__media { order: 2; }
.sh20-story-card__media { position: relative; min-height: 430px; overflow: hidden; background: #101416; }
.sh20-story-card video { width: 100%; height: 100%; object-fit: cover; }
.sh20-video-toggle { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; padding: .55rem .7rem; border: 1px solid rgba(248,247,242,.75); background: rgba(7,9,10,.78); color: var(--sh-paper); font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.sh20-video-toggle:hover, .sh20-video-toggle:focus-visible { border-color: var(--sh-rose); background: var(--sh-rose); color: var(--sh-ink); }
.sh20-story-card__quote { display: flex; flex-direction: column; justify-content: space-between; min-height: 430px; padding: clamp(2rem, 4.2vw, 4.7rem); }
.sh20-story-card__number { color: var(--sh-blue); font-size: .78rem; font-weight: 800; letter-spacing: .09em; }
.sh20-story-card blockquote { max-width: 17.5ch; margin: auto 0; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(1.45rem, 2.8vw, 3.35rem); font-weight: 750; letter-spacing: -.055em; line-height: 1; }
.sh20-story-card blockquote::before, .sh20-story-card blockquote::after { color: var(--sh-rose); }
.sh20-story-card blockquote::before { content: '„'; }
.sh20-story-card blockquote::after { content: '“'; }
.sh20-story-card__label { margin: 0; color: var(--sh-muted); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh20-pathways { padding: clamp(5rem, 9vw, 8rem) 0; }
.sh20-pathways__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .6fr); align-items: end; gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--sh-line); }
.sh20-pathways__head h2 { max-width: 15ch; margin: 0; font-family: var(--sh-display-font); font-size: clamp(2.75rem, 5.4vw, 6.4rem); font-weight: 800; letter-spacing: -.07em; line-height: .92; }
.sh20-pathways__head p:not(.eyebrow) { max-width: 31ch; margin: 0; color: var(--sh-muted); font-size: 1.08rem; line-height: 1.4; }
.sh20-pathway { display: grid; grid-template-columns: 11rem minmax(260px, 1.25fr) minmax(210px, .75fr) auto; align-items: center; gap: 2rem; padding: 1.55rem 0; border-bottom: 1px solid var(--sh-line); text-decoration: none; transition: padding .16s ease, color .16s ease; }
.sh20-pathway:hover { padding-left: .55rem; color: var(--sh-blue); }
.sh20-pathway__code { color: var(--sh-blue); font-size: .95rem; font-weight: 800; letter-spacing: .06em; }
.sh20-pathway__title { font-family: var(--sh-display-font); font-size: clamp(1.3rem, 2.3vw, 2.45rem); font-weight: 750; letter-spacing: -.055em; line-height: 1; }
.sh20-pathway__description { color: var(--sh-muted); font-size: 1rem; line-height: 1.35; }
.sh20-pathway__arrow { color: var(--sh-rose); font-size: 1.8rem; font-weight: 500; }
.sh20-conversion { padding: clamp(4rem, 8vw, 7rem) var(--sh-gutter); border-top: 1px solid var(--sh-line); background: var(--sh-warm); color: var(--sh-ink); }
.sh20-conversion > * { width: min(100%, var(--sh-shell)); margin-inline: auto; }
.sh20-conversion h2 { color: var(--sh-ink); }
.sh20-conversion__grid { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid rgba(7,9,10,.48); border-left: 1px solid rgba(7,9,10,.48); }
.sh20-conversion__item { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; border-right: 1px solid rgba(7,9,10,.48); border-bottom: 1px solid rgba(7,9,10,.48); color: var(--sh-ink); text-decoration: none; transition: background .16s ease, color .16s ease; }
.sh20-conversion__item:hover { background: var(--sh-blue); color: var(--sh-ink); }
.sh20-conversion__item small { color: inherit; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
/* 1.9.39: "Unabhängigkeit sichern." (Kachel Mitgliedschaft) ist als einzelnes
Wort länger als 10ch und lief ohne Umbruch-Erlaubnis über den Kachelrand
hinaus. overflow-wrap lässt lange Wörter jetzt innerhalb der Kachel
umbrechen statt herauszulaufen. */
.sh20-conversion__item strong { max-width: 10ch; overflow-wrap: break-word; font-family: var(--sh-display-font); font-size: clamp(1.2rem, 2vw, 2.1rem); font-weight: 800; letter-spacing: -.055em; line-height: 1; }
.sh20-conversion__item span { color: var(--sh-blue); font-size: 1.55rem; font-weight: 500; }
.sh20-conversion__item:hover span { color: var(--sh-ink); }
.sh20-membership { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .63fr); gap: clamp(3rem, 9vw, 10rem); padding: clamp(5rem, 9vw, 8rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-membership h2 { max-width: 12ch; }
.sh20-membership__copy p:not(.eyebrow) { max-width: 43ch; margin: 1.8rem 0 2rem; color: rgba(248,247,242,.82); font-size: 1.12rem; line-height: 1.45; }
/* 1.9.37: Box rechts neu gestaltet — war eine flache graue Fläche, in der
der "Alle Vorteile ansehen"-Link optisch in der Liste unterging (gleiche
Textfarbe/-größe wie die Vorteile selbst). Jetzt: dezenter Verlauf statt
Volltonfläche, schmale Signalgrün-Kante oben als Wiedererkennung, hellere
Vorteile-Texte für bessere Lesbarkeit, und der Link am Ende ist über eine
Trennlinie klar von der Liste abgesetzt und bekommt wieder sein eigenes
Aussehen (Pfeil-Strich + große Buchstaben) statt der Fließtext-Optik. */
.sh20-membership__side { align-self: center; padding: clamp(1.75rem, 3.5vw, 2.75rem); border: 1px solid var(--sh-line); border-top: 3px solid var(--sh-signal); background: linear-gradient(165deg, #131a1d, #0b0e10); }
.sh20-membership__side p { margin: 0 0 1.7rem; color: var(--sh-muted); font-size: .95rem; font-weight: 600; line-height: 1.45; }
.sh20-membership__perks { margin: 0 0 1.9rem; padding: 0; list-style: none; display: grid; gap: 1.15rem; }
.sh20-membership__perks li { position: relative; padding-left: 1.5rem; color: rgba(248,247,242,.88); font-size: .97rem; font-weight: 600; line-height: 1.5; }
.sh20-membership__perks li::before { content: '→'; position: absolute; left: 0; color: var(--sh-signal); font-weight: 800; }
.sh20-membership__side p:last-child { margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--sh-line); }
.sh20-membership__side .sh20-scroll-cue { color: var(--sh-paper); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.sh20-newsletter { padding: clamp(5rem, 9vw, 8rem) var(--sh-gutter); border-bottom: 1px solid var(--sh-line); background: var(--sh-rose); color: var(--sh-ink); }
.sh20-newsletter > * { width: min(100%, var(--sh-shell)); margin-inline: auto; }
/* 1.9.39: FAQ zurück auf volle Seitenbreite (so wie gewünscht: "Seitenbreite
und das Plus rechts") — die schmalere 1.9.37-Fassung ist wieder raus.
Newsletter bleibt schmaler, bekommt aber margin-left:0 statt
margin-inline:auto, sonst zentriert sich die jetzt schmalere Box in der
breiteren Sektion und wirkt nicht mehr linksbündig. */
.homepage-content .sh20-newsletter > * { max-width: 980px !important; margin-left: 0 !important; }
.sh20-newsletter h2, .sh20-newsletter .eyebrow { color: var(--sh-ink); }
.sh20-newsletter__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .72fr); gap: clamp(3rem, 8vw, 8rem); }
.sh20-newsletter p { max-width: 37ch; margin: 1.5rem 0 0; font-size: 1.12rem; line-height: 1.42; }
/* 1.9.39: Formular hing über align-self:end unten in der Spalte und wirkte
dadurch "in der Mitte" hängend. Jetzt startet es oben auf Höhe des Texts,
und der Button steht groß, volle Breite, unter dem Eingabefeld statt
irgendwo mittig daneben. */
.sh20-newsletter__form { align-self: start; }
.sh20-newsletter .ff-el-form-control, .sh20-newsletter input[type="email"], .sh20-newsletter input[type="text"] { width: 100%; min-height: 3.25rem; padding: .8rem; border: 1px solid var(--sh-ink); border-radius: 0; background: transparent; color: var(--sh-ink); }
.sh20-newsletter .ff-btn-submit, .sh20-newsletter button[type="submit"] { width: 100%; min-height: 3.5rem; margin-top: .85rem; padding: .75rem 1rem; border: 1px solid var(--sh-ink); border-radius: 0; background: var(--sh-ink); color: var(--sh-paper); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sh20-contact { padding: clamp(5rem, 9vw, 8rem) 0; }
.sh20-contact__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr); gap: clamp(3rem, 8vw, 8rem); padding-bottom: 3rem; }
.sh20-contact__head h2 { max-width: 13ch; }
.sh20-contact__head p:not(.eyebrow) { max-width: 34ch; margin: 0; color: var(--sh-muted); font-size: 1.08rem; line-height: 1.45; }
.sh20-contact__form-shell { display: block; padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid var(--sh-line); background: #0d1011; }
.sh20-contact__form-shell p { max-width: 52ch; margin: 0; color: rgba(248,247,242,.83); font-size: 1.05rem; line-height: 1.45; }
.sh20-contact__form-shell .ff-el-form-control, .sh20-contact__form-shell input, .sh20-contact__form-shell textarea, .sh20-contact__form-shell select { border-radius: 0 !important; background: transparent !important; color: var(--sh-paper) !important; border-color: var(--sh-line) !important; }
.sh20-contact__form-shell .ff-btn-submit { border-radius: 0 !important; background: var(--sh-paper) !important; color: var(--sh-ink) !important; }
/* Dezentes Scroll-Reveal, gesetzt von assets/js/scroll-reveal.js. Ohne JS
oder bei reduzierter Bewegung bleibt der Inhalt normal sichtbar, weil die
Klasse dann nie gesetzt wird. */
.sh20-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.72,.26,1); }
.sh20-reveal--visible { opacity: 1; transform: translateY(0); }
.sh20-contact-form { display: grid; gap: 1.5rem; }
.sh20-contact-form__honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sh20-contact-form__field { display: grid; gap: .6rem; }
.sh20-contact-form__label { color: var(--sh-paper); font-size: .85rem; font-weight: 700; letter-spacing: .02em; }
.sh20-contact-form__input, .sh20-contact-form__textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--sh-line); border-radius: 0; background: transparent; color: var(--sh-paper); font-family: inherit; font-size: 1rem; }
.sh20-contact-form__input:focus, .sh20-contact-form__textarea:focus { outline: 2px solid var(--sh-signal); outline-offset: 2px; }
.sh20-contact-form__textarea { resize: vertical; }
.sh20-contact-form__checkboxes { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
.sh20-contact-form__checkbox-label { display: inline-flex; align-items: center; gap: .5rem; color: rgba(248,247,242,.85); font-size: .92rem; cursor: pointer; }
.sh20-contact-form__checkbox { width: 1.1rem; height: 1.1rem; accent-color: var(--sh-signal); }
.sh20-contact-form__submit { justify-self: start; min-height: 3.1rem; padding: .8rem 1.8rem; border: 1px solid var(--sh-paper); border-radius: 0; background: var(--sh-paper); color: var(--sh-ink); font-size: .85rem; font-weight: 800; letter-spacing: .04em; cursor: pointer; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.sh20-contact-form__submit:hover { background: var(--sh-signal); border-color: var(--sh-signal); color: var(--sh-ink); }
.sh20-contact-form__submit[disabled] { opacity: .6; cursor: wait; }
.sh20-contact-form__status { margin: 0; font-size: .92rem; font-weight: 600; }
.sh20-contact-form__status--success { color: var(--sh-signal); }
.sh20-contact-form__status--error { color: #ff6b6b; }
.sh20-faq { padding: clamp(4rem, 8vw, 7rem) var(--sh-gutter); border-top: 1px solid var(--sh-line); }
.sh20-faq > * { width: min(100%, var(--sh-shell)); margin-inline: auto; }
.sh20-faq h2 { max-width: 16ch; margin: 0 0 2.75rem; }
.sh20-faq details { border-top: 1px solid var(--sh-line); }
.sh20-faq details:last-child { border-bottom: 1px solid var(--sh-line); }
.sh20-faq summary { display: flex; justify-content: space-between; gap: 1.5rem; padding: 1.2rem 0; font-size: clamp(1rem, 1.65vw, 1.38rem); font-weight: 750; line-height: 1.2; cursor: pointer; list-style: none; }
.sh20-faq summary::after { flex: 0 0 auto; color: var(--sh-blue); content: '+'; font-size: 1.4em; line-height: .7; }
.sh20-faq details[open] summary::after { content: '–'; }
.sh20-faq details p { max-width: 65ch; margin: 0 0 1.5rem; color: rgba(248,247,242,.78); }
/* Pages, Academy, commerce and LMS */
.page-section { padding: clamp(4rem, 9vw, 8rem) 0; }
.entry-header, .post-header, .archive-heading { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto clamp(3rem, 6vw, 5rem); }
.entry-header h1, .post-header h1, .archive-heading h1, .academy-page-header h1, .course-landing-header h1, .dashboard-header h1, .workshop-header h1, .product-header h1, .calculator-header h1, .publication-header h1, .insights-header h1 { max-width: 13ch; margin: .2em 0 0; font-family: var(--sh-display-font); font-size: clamp(3rem, 7vw, 7.2rem); font-weight: 800; letter-spacing: -.075em; line-height: .9; }
.insights-tagline { max-width: 20ch; margin: .6rem 0 0; font-family: var(--sh-display-font); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -.02em; line-height: 1.1; }
.insights-lead { max-width: 48ch; margin: 2rem 0 0; color: rgba(248,247,242,.8); font-size: clamp(1.1rem, 2vw, 1.4rem); }
.insights-content { padding-top: clamp(3rem, 6vw, 5rem); }
.insights-content .sh20-analysis-feed { margin-top: 1rem; }
.prose { max-width: var(--sh-content-width); margin-inline: auto; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { margin-top: 3.5rem; font-family: var(--sh-display-font); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 800; letter-spacing: -.065em; line-height: .95; }
.prose h3 { margin-top: 2.5rem; font-family: var(--sh-display-font); font-size: 1.35rem; }
.prose figcaption, .post-meta { color: var(--sh-muted); font-size: .85rem; }
.prose li + li { margin-top: .45rem; }
.featured-figure { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto 3.5rem; }
.featured-figure img { width: 100%; }
.post-footer { max-width: var(--sh-content-width); margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--sh-line); }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--sh-line); background: var(--sh-line); }
.content-card { min-width: 0; background: var(--sh-ink); transition: background .16s ease; }
.content-card:hover { background: #12191b; }
.card-link { display: block; height: 100%; color: var(--sh-paper); text-decoration: none; }
.card-image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: saturate(.75); }
.card-body { padding: 1.35rem; }
.card-body h2 { margin: 0; font-family: var(--sh-display-font); font-size: 1.55rem; letter-spacing: -.055em; line-height: 1; }
.card-body p:not(.eyebrow) { margin: .85rem 0 1.2rem; color: var(--sh-muted); font-size: .94rem; line-height: 1.45; }
.arrow-link { color: var(--sh-blue); font-size: .8rem; font-weight: 800; }
.site-footer { border-top: 2px solid var(--sh-signal); background: var(--sh-ink); color: var(--sh-paper); padding: 0 0 1.3rem; }
.footer-cta { padding: clamp(3.5rem, 8vw, 6.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.footer-cta .eyebrow { margin: 0 0 1rem; color: var(--sh-signal); }
.footer-cta h2 { max-width: 18ch; margin: 0; font-family: var(--sh-display-font); font-size: clamp(2.4rem, 5.6vw, 5.4rem); font-weight: 800; letter-spacing: -.06em; line-height: .98; }
.footer-cta h2 .signal { color: var(--sh-signal); }
.footer-cta__lead { max-width: 56ch; margin: 1.25rem 0 0; color: rgba(248,247,242,.78); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.45; }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }
.footer-grid { padding-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(130px, .7fr) minmax(130px, .7fr) minmax(170px, .85fr); gap: clamp(1.5rem, 4vw, 4rem); }
.footer-mark { display: block; margin-bottom: 1rem; color: var(--sh-paper); font-size: 1.9rem; }
/* Footer nutzt jetzt dasselbe Logo wie der Header (statt der reinen Text-Wortmarke),
gleiche Freistellung fürs Schwarz wie im Header (grayscale + invert). */
.footer-mark .custom-logo-link { display: inline-block; line-height: 0; }
.footer-mark .custom-logo,
.footer-mark > img { display: block; width: auto; max-width: 160px; max-height: 40px; filter: grayscale(1) invert(1) !important; }
.footer-intro p { max-width: 33ch; color: var(--sh-muted); font-size: .95rem; line-height: 1.5; }
.footer-widget__title { margin: 0 0 1.1rem; color: var(--sh-blue); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.footer-column .menu > li > a { display: inline-block; font-size: 1.02rem; font-weight: 500; letter-spacing: normal; text-transform: none; transition: transform .14s ease, color .14s ease; }
.footer-column .menu > li > a:hover { transform: translateX(.3rem); }
.footer-column ul { display: grid; gap: .7rem; }
.site-footer a { color: var(--sh-paper); text-decoration: none; }
.site-footer a:hover { color: var(--sh-signal); }
.site-footer p { margin-top: 0; color: var(--sh-muted); }
.footer-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 4rem; padding-top: 1.2rem; border-top: 1px solid var(--sh-line); color: var(--sh-muted); font-size: .88rem; }
.footer-bottom .menu { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }
.footer-bottom__top { color: var(--sh-muted); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.footer-bottom__top:hover { color: var(--sh-signal); }
.academy-page-header, .course-landing-header, .dashboard-header, .workshop-header, .product-header, .calculator-header, .publication-header, .insights-header { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5rem); border-bottom: 1px solid var(--sh-line); background: var(--sh-ink); color: var(--sh-paper); }
.academy-page-header::after, .course-landing-header::after { position: absolute; right: 4vw; bottom: -5vw; width: min(18vw, 260px); aspect-ratio: 1; border: 1px solid var(--sh-blue); border-radius: 50%; content: ''; }
.academy-page-header .site-shell, .course-landing-header .site-shell, .dashboard-header .site-shell, .workshop-header .site-shell, .product-header .site-shell, .calculator-header .site-shell, .publication-header .site-shell { position: relative; z-index: 1; }
.academy-lead { max-width: 48ch; margin: 2rem 0 0; color: rgba(248,247,242,.8); font-size: clamp(1.1rem, 2vw, 1.4rem); }
.academy-overview > .entry-content, .academy-course-landing > .entry-content, .workshop-page > .entry-content, .product-landing > .entry-content {
padding: 0;
}
.academy-overview .wp-block-group.is-layout-constrained, .academy-course-landing .wp-block-group.is-layout-constrained, .workshop-page .wp-block-group.is-layout-constrained, .product-landing .wp-block-group.is-layout-constrained { padding-left: var(--sh-gutter); padding-right: var(--sh-gutter); }
.sh20-catalog-grid, .academy-overview .wp-block-query-loop { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin-inline: auto; }
.dashboard-header { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 2rem auto 0; border: 1px solid var(--sh-line); }
.dashboard-header h1 { font-size: clamp(2.6rem, 5vw, 5rem); }
.academy-dashboard-main { padding: 3rem 0 6rem; }
.woocommerce .woocommerce-breadcrumb, .woocommerce div.product, .learndash-wrapper { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin-left: auto; margin-right: auto; }
.woocommerce .products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin-inline: auto !important; overflow: hidden; border: 1px solid var(--sh-line); background: var(--sh-line); }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; padding: 1.15rem; background: var(--sh-ink); }
.woocommerce ul.products li.product img { filter: saturate(.7); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { padding: .8rem 0 0; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: 1.2rem; line-height: 1; }
.woocommerce ul.products li.product .price { color: var(--sh-blue) !important; font-weight: 800; }
.woocommerce div.product { margin-top: 4rem; margin-bottom: 4rem; }
.woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { border-top-color: var(--sh-blue); background: #111819; color: var(--sh-paper); }
.learndash-wrapper, .tutor-wrap, .llms-sd-section { --ld-primary: var(--sh-paper); --ld-secondary: var(--sh-blue); color: var(--sh-paper); }
.learndash-wrapper .ld-item-list .ld-item-list-item, .learndash-wrapper .ld-course-status, .learndash-wrapper .ld-table-list, .tutor-course-details-page, .llms-course-outline { border: 1px solid var(--sh-line); border-radius: 0; box-shadow: none; background: transparent; }
.learndash-wrapper .ld-progress .ld-progress-bar { background: rgba(255,255,255,.14); }
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage { background: var(--sh-blue); }
.learndash-wrapper .ld-status { border-radius: 0; background: var(--sh-blue); color: var(--sh-ink); }
.sh20-lms-catalog-intro { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 4rem auto 2rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid var(--sh-line); background: var(--sh-ink); color: var(--sh-paper); }
.sh20-lms-catalog-intro h1 { max-width: 13ch; margin: 0; font-family: var(--sh-display-font); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 800; line-height: .9; letter-spacing: -.075em; }
@media (max-width: 1320px) {
.header-inner { min-height: 70px; }
.menu-toggle { display: block; margin-left: auto; }
.header-cta { display: none; }
.primary-navigation { position: fixed; inset: 70px 0 0; display: none; margin: 0; padding: 1.25rem var(--sh-gutter) 4rem; background: var(--sh-ink); overflow-y: auto; }
body.admin-bar .primary-navigation { top: 102px; }
.primary-navigation.is-open { display: block; }
.primary-navigation .menu { display: grid; gap: 0; border-top: 1px solid var(--sh-line); }
.primary-navigation li { border-bottom: 1px solid var(--sh-line); }
.primary-navigation a { display: block; padding: 1rem 0; font-size: 1rem; }
.primary-navigation .sub-menu { position: static; display: none; width: auto; padding: 0 0 .5rem 1rem; border: 0; box-shadow: none; opacity: 1; pointer-events: auto; transform: none; }
.primary-navigation .submenu-open > .sub-menu { display: grid; }
}
@media (max-width: 900px) {
.site-shell, .sh20-bridge, .sh20-section-heading, .sh20-story-list, .sh20-pathways, .sh20-membership, .sh20-contact { width: min(calc(100% - 2rem), var(--sh-shell)); }
.sh20-manifesto { padding-inline: 1rem; }
.sh20-manifesto__bottom, .sh20-bridge, .sh20-section-heading, .sh20-membership, .sh20-newsletter__layout, .sh20-contact__head, .sh20-pathways__head { grid-template-columns: 1fr; }
.sh20-story-card, .sh20-story-card:nth-child(even) { grid-template-columns: 1fr; }
.sh20-story-card:nth-child(even) .sh20-story-card__media { order: 0; }
.sh20-story-card__media, .sh20-story-card__quote { min-height: unset; }
.sh20-story-card__media { aspect-ratio: 16 / 10; }
.sh20-story-card__quote { min-height: 320px; }
.sh20-pathways__head p { margin-top: 1.2rem; }
.sh20-pathway { grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; }
.sh20-pathway__description { display: none; }
.sh20-conversion__grid { grid-template-columns: repeat(2, 1fr); }
.post-grid, .woocommerce .products { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
.footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
body { font-size: max(18px, var(--sh-body-size)); }
body.admin-bar.has-sticky-header .site-header { top: 46px; }
.header-cta { display: none; }
body.admin-bar .primary-navigation { top: 116px; }
.sh20-manifesto h1 { font-size: clamp(3.3rem, 17.5vw, 5.7rem); line-height: .9; }
.sh20-problem-strip { grid-template-columns: 1fr; }
.sh20-problem-strip p { min-height: 0; padding: 1.1rem 1rem; border-right: 0; border-bottom: 1px solid var(--sh-line); font-size: 1.18rem; }
.sh20-problem-strip p:last-child { border-bottom: 0; }
.sh20-section-heading h2, .sh20-conversion h2, .sh20-membership h2, .sh20-faq h2, .sh20-contact h2, .sh20-newsletter h2 { font-size: clamp(2.6rem, 13vw, 4.3rem); }
.sh20-story-card blockquote { font-size: clamp(1.85rem, 9.4vw, 2.8rem); }
.sh20-conversion, .sh20-newsletter, .sh20-faq { padding-inline: 1rem; }
.sh20-conversion__grid { grid-template-columns: 1fr; }
.sh20-conversion__item { min-height: 145px; }
.sh20-pathway { grid-template-columns: 5.6rem 1fr auto; gap: .5rem; }
.sh20-pathway__title { font-size: 1.45rem; }
.entry-header, .post-header, .archive-heading, .featured-figure, .woocommerce .woocommerce-breadcrumb, .woocommerce div.product, .learndash-wrapper, .woocommerce .products { width: min(calc(100% - 2rem), var(--sh-shell)); }
.entry-header h1, .post-header h1, .archive-heading h1, .academy-page-header h1, .course-landing-header h1, .dashboard-header h1, .workshop-header h1, .product-header h1, .calculator-header h1, .publication-header h1, .insights-header h1 { font-size: clamp(3rem, 15vw, 5.3rem); }
.post-grid, .woocommerce .products { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.footer-bottom { flex-direction: column; margin-top: 2rem; }
.academy-overview .wp-block-group.is-layout-constrained, .academy-course-landing .wp-block-group.is-layout-constrained, .workshop-page .wp-block-group.is-layout-constrained, .product-landing .wp-block-group.is-layout-constrained { padding-left: 1rem; padding-right: 1rem; }
.sh20-contact__form-shell { display: grid; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
/* 1.3.1 — Vivid signal green; neutral white space for the complete origin story.
1.10.2: color hier war var(--sh-ink) — seit dem 1.10.0-Farbtausch ist das
Weiß, auf dem hier seit jeher fix weißen Hintergrund also unsichtbar.
Feste Dunkel-Konstante verwendet, damit dieser Abschnitt unabhängig vom
Farbschema immer lesbar bleibt. */
.sh20-story {
background: #ffffff;
color: var(--sh-dark);
border-top: 0;
}
.sh20-story .sh20-section-heading h2 { color: var(--sh-dark); }
.sh20-story .sh20-section-heading p:not(.eyebrow) { color: #5c5866; }
.sh20-story-list {
border-color: rgba(20,21,22,.24);
background: rgba(20,21,22,.24);
}
.sh20-story-card { background: #ffffff; }
.sh20-story-card__media { background: var(--sh-blue); }
.sh20-story-card__quote { background: #ffffff; }
.sh20-story-card__number { color: #657886; }
.sh20-story-card blockquote { color: var(--sh-dark); }
.sh20-story-card blockquote::before,
.sh20-story-card blockquote::after { color: #788898; }
.sh20-story-card__label { color: #59676e; }
.sh20-story .sh20-video-toggle {
border-color: rgba(255,255,255,.82);
background: rgba(20,21,22,.78);
color: #ffffff;
}
.sh20-story .sh20-video-toggle:hover,
.sh20-story .sh20-video-toggle:focus-visible {
border-color: #ffffff;
background: #788898;
color: #ffffff;
}
/* 1.4.0 — Space Grotesk and the requested SH 2.0 signal green. */
@font-face {
font-family: 'Space Grotesk';
src: url('../fonts/SpaceGrotesk-Variable.woff2') format('woff2');
font-style: normal;
font-weight: 300 700;
font-display: swap;
}
/* 1.10.2 — akademische Fließtext-Schrift. Space Grotesk sitzweit auch für
Fließtext zu verwenden, war für kurze Manifest-Sätze gedacht; auf den
neuen, textlastigen Institutsseiten (Forschung, Institut, Lehre …) wirkte
dieselbe kantige Display-Grotesk als Lesetext unpassend. Fraunces ist eine
eigenständige, keineswegs generische Serife mit "Soft"/"Wonk"-Charakter
(viel im modernen redaktionellen/akademischen Webdesign verwendet) — für
Fließtext, während Space Grotesk für Überschriften/Display bleibt. Self-
hosted wie Space Grotesk (Lizenz: assets/fonts/Fraunces-OFL.txt), damit
keine externe Anfrage an Google-Server nötig ist. */
@font-face {
font-family: 'Fraunces';
src: url('../fonts/Fraunces-Variable.woff2') format('woff2');
font-style: normal;
font-weight: 300 700;
font-display: swap;
}
:root {
--sh-signal: #ff3eb5 !important;
--sh-body-font: 'Fraunces', Georgia, 'Times New Roman', serif;
--sh-display-font: 'Space Grotesk', Arial, Helvetica, sans-serif;
}
a:hover { color: var(--sh-signal); }
.wordmark em, .footer-mark i { color: var(--sh-signal); }
.primary-navigation .menu-item-has-children > a::after { color: var(--sh-signal); }
.primary-navigation .sub-menu { box-shadow: .55rem .55rem 0 var(--sh-signal); }
.header-cta:hover, .wp-element-button:hover, .wp-block-button__link:hover, .button:hover, .woocommerce a.button:hover, .learndash-wrapper .ld-button:hover { border-color: var(--sh-signal); background: var(--sh-signal); }
.sh20-kicker, .eyebrow { color: var(--sh-signal); }
.sh20-manifesto h1 .signal { color: var(--sh-signal); }
.sh20-scroll-cue::before { background: var(--sh-signal); }
.sh20-pathway:hover { color: var(--sh-signal); }
.sh20-pathway__code { color: var(--sh-signal); }
.sh20-conversion__item:hover { background: var(--sh-signal); }
.sh20-conversion__item span { color: var(--sh-signal); }
.sh20-conversion__item:hover span { color: var(--sh-ink); }
.footer-widget__title, .footer-column .menu > li > a, .site-footer a:hover { color: var(--sh-signal); }
.sh20-faq summary::after { color: var(--sh-signal); }
.woocommerce ul.products li.product .price, .arrow-link { color: var(--sh-signal) !important; }
.learndash-wrapper, .tutor-wrap, .llms-sd-section { --ld-secondary: var(--sh-signal); }
.learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage, .learndash-wrapper .ld-status { background: var(--sh-signal); }
.sh20-story .sh20-scroll-cue::before { background: #788898; }
/* 1.5.0 — user-directed content and layout corrections. */
.site-header .custom-logo,
.site-header .sh20-default-logo img {
display: block;
width: auto;
max-width: 180px;
max-height: 48px;
filter: grayscale(1) invert(1) !important;
}
.site-header .custom-logo-link,
.site-header .sh20-default-logo { display: block; line-height: 0; }
.header-cta { border-color: var(--sh-signal); background: var(--sh-signal); color: var(--sh-ink) !important; }
.sh20-newsletter { background: var(--sh-signal) !important; }
.sh20-newsletter h2,
.sh20-newsletter .eyebrow,
.sh20-newsletter p { color: var(--sh-ink) !important; }
.sh20-newsletter .wp-element-button { border-color: var(--sh-ink); background: var(--sh-ink); color: var(--sh-paper) !important; }
.sh20-newsletter .wp-element-button:hover { border-color: var(--sh-paper); background: var(--sh-paper); color: var(--sh-ink) !important; }
.sh20-story-list { gap: 1px; }
.sh20-story-card,
.sh20-story-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: clamp(430px, 40vw, 560px); }
.sh20-story-card:nth-child(even) .sh20-story-card__media { order: 2; }
.sh20-story-card__media,
.sh20-story-card__quote { min-height: 0; height: 100%; }
.sh20-story-card__quote { padding: clamp(2rem, 4vw, 4.4rem); justify-content: center; background: #ffffff; }
.sh20-story-card blockquote { max-width: 21ch; color: #141516 !important; font-size: clamp(1.5rem, 2.55vw, 3.1rem); line-height: 1.05; }
.sh20-story-card:nth-child(2) blockquote { max-width: 27ch; font-size: clamp(1.25rem, 2vw, 2.35rem); line-height: 1.15; }
.sh20-story-card blockquote::before,
.sh20-story-card blockquote::after { color: #141516 !important; }
.sh20-pathways__head { display: block; }
.sh20-pathway { grid-template-columns: 4rem minmax(0, 1fr) auto; }
.sh20-pathway__description { display: none; }
.sh20-analyses { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(5rem, 9vw, 8rem) 0; }
.sh20-analyses__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.sh20-analyses__head h2 { margin: 0; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(2.75rem, 5.4vw, 6.4rem); font-weight: 800; letter-spacing: -.07em; line-height: .92; }
.sh20-analysis-query .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; border: 1px solid var(--sh-line); background: var(--sh-line); list-style: none; }
.sh20-analysis-card { height: 100%; padding: 1.3rem; background: var(--sh-ink); }
.sh20-analysis-card .wp-block-post-featured-image { margin: -1.3rem -1.3rem 1.35rem; }
.sh20-analysis-card .wp-block-post-featured-image img { width: 100%; object-fit: cover; }
.sh20-analysis-card .wp-block-post-terms { color: var(--sh-signal); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh20-analysis-card h3 { margin: .8rem 0; font-family: var(--sh-display-font); font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.05em; line-height: 1; }
.sh20-analysis-card h3 a { text-decoration: none; }
.sh20-analysis-card .wp-block-post-excerpt { color: var(--sh-muted); font-size: .95rem; }
.sh20-analysis-card .wp-block-post-excerpt__more-link { color: var(--sh-signal); font-weight: 700; text-decoration: none; }
.sh20-form-slot { width: 100%; }
.sh20-form-slot--empty { display: flex; align-items: center; min-height: 4rem; }
.sh20-contact .sh20-form-slot--empty { justify-content: flex-start; }
/* 1.9.39: "sh2.0" links, die beiden Navigationsspalten rechts zusammen,
statt mit viel Leerraum in der Mitte verstreut. Erste Spalte nimmt den
gesamten übrigen Platz (schiebt die beiden schmalen Spalten dadurch an
den rechten Rand), die Nav-Spalten selbst bleiben inhaltsbreit. */
.footer-grid--three { grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: clamp(3rem, 8vw, 7rem); }
@media (max-width: 900px) {
.sh20-story-card,
.sh20-story-card:nth-child(even) { grid-template-columns: 1fr; height: auto; }
.sh20-story-card:nth-child(even) .sh20-story-card__media { order: 0; }
.sh20-story-card__media { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
.sh20-story-card__quote { height: auto; min-height: 260px; }
.sh20-analysis-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.sh20-analysis-query .wp-block-post-template { grid-template-columns: 1fr; }
.sh20-analyses__head { align-items: flex-start; flex-direction: column; }
.footer-grid--three { grid-template-columns: 1fr; }
}
/* 1.6.0 — Insight, optional signal strip and mobile pathway correction. */
.sh20-pathways__head h2 { max-width: 15ch; }
.sh20-pathway { grid-template-columns: minmax(8.25rem, .52fr) minmax(0, 1fr) 2rem; gap: clamp(.75rem, 2vw, 2rem); }
.sh20-pathway__code { min-width: 0; overflow-wrap: anywhere; }
.sh20-pathway__title { min-width: 0; }
.sh20-pathway__arrow { justify-self: end; }
.sh20-signal-ticker { overflow: hidden; border-bottom: 1px solid var(--sh-ink); background: var(--sh-signal); color: var(--sh-ink); }
.sh20-signal-ticker__track { width: max-content; display: flex; align-items: center; gap: 1.2rem; padding: .88rem 0; font-family: var(--sh-display-font); font-size: clamp(.78rem, 1.25vw, 1rem); font-weight: 700; letter-spacing: .03em; line-height: 1; text-transform: uppercase; white-space: nowrap; animation: sh20-ticker 32s linear infinite; }
.sh20-signal-ticker__track span { display: inline-block; }
.sh20-signal-ticker__track b { font-size: 1em; font-weight: 700; }
@keyframes sh20-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
.sh20-pathways { padding: 4.5rem 0; }
.sh20-pathways__head { padding-bottom: 1.75rem; }
.sh20-pathway { grid-template-columns: minmax(6.75rem, .62fr) minmax(0, 1fr) 1.4rem; gap: .7rem; padding: 1.3rem 0; }
.sh20-pathway__code { align-self: start; padding-top: .18rem; font-size: .82rem; line-height: 1.35; }
.sh20-pathway__title { font-size: clamp(1.35rem, 6.7vw, 1.85rem); line-height: 1.02; }
.sh20-pathway__arrow { align-self: center; font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
.sh20-signal-ticker__track { animation: none; width: auto; flex-wrap: wrap; padding-inline: var(--sh-gutter); white-space: normal; }
}
/* 1.7.0 — fixed homepage hierarchy and legacy-content safety. */
.site-header { background: #07090a !important; backdrop-filter: none; }
.site-header .header-inner { position: relative; z-index: 1; }
/* Old first-generation blocks are hidden even before the controlled page-content refresh. */
/* The legacy lower-card declaration is removed without suppressing the five supplied quotations. */
.homepage-content .sh20-story-card__label { display: none !important; }
/* Preserve enough dark breathing room before white sections and prevent headline bleed beneath the opaque header. */
.sh20-manifesto { position: relative; z-index: 0; padding-bottom: clamp(4.75rem, 9vw, 8rem); }
.sh20-story { scroll-margin-top: 110px; }
/* The ticker is the sole visual transition below the Hero. */
.sh20-signal-ticker { position: relative; z-index: 2; min-height: 3rem; border-top: 1px solid var(--sh-ink); border-bottom: 1px solid var(--sh-ink); background: var(--sh-signal); color: var(--sh-ink); }
.sh20-signal-ticker__track { min-height: 3rem; align-content: center; }
/* v1.7.0 explicit Font-Sperre gegen alte Theme-Customizer-Werte, siehe unten
bei 1.9.13. 1.10.2: Fließtext bewusst auf Fraunces statt Space Grotesk
(siehe @font-face oben), Sperre bleibt bestehen, nur der Zielwert ändert
sich — weiterhin kann kein alter Customizer-Wert eine andere Schrift
zurückbringen. */
:root { --sh-body-font: 'Fraunces', Georgia, 'Times New Roman', serif !important; --sh-display-font: 'Space Grotesk', Arial, Helvetica, sans-serif !important; }
/* Prevent any old green hover/title state from sitting on a white neighbor. */
.sh20-conversion { position: relative; z-index: 1; }
.footer-grid--three { align-items: start; }
.footer-column .menu { gap: .65rem; }
.footer-column .menu > li > a { display: inline-block; margin-bottom: 0; }
@media (max-width: 700px) {
.sh20-signal-ticker__track { font-size: .72rem; }
.sh20-manifesto { padding-bottom: 4.5rem; }
}
/* 1.8.0 — Slow, readable signal ticker without decorative separators. */
.sh20-signal-ticker__track { animation-duration: 90s; }
@media (max-width: 700px) {
.sh20-signal-ticker__track { animation-duration: 105s; }
}
/* 1.9.13 — verbindliche Reparaturen: no 3D, no glass cards, no generic visual effects.
1.10.2: --sh-body-font auch hier von Space Grotesk auf Fraunces geändert
(siehe @font-face/Kommentar weiter oben). */
:root {
--sh-ink: #050505 !important;
--sh-paper: #ffffff !important;
--sh-signal: #ff3eb5 !important;
--sh-body-font: 'Fraunces', Georgia, 'Times New Roman', serif !important;
--sh-display-font: 'Space Grotesk', Arial, Helvetica, sans-serif !important;
}
html, body, .site-header, .site-footer { background: var(--sh-ink) !important; }
/* The structural section is visibly restored directly below the hero. */
.homepage-content .sh20-bridge.sh20-bridge--statement {
display: grid !important;
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(1.5rem, 4vw, 5rem);
row-gap: clamp(1.4rem, 3vw, 3rem);
align-items: start;
padding: clamp(5rem, 10vw, 8.5rem) 0;
border-bottom: 1px solid var(--sh-line);
}
/* 1.9.39: max-width:11ch war für ein einzelnes kurzes Wort gedacht, nicht für
den jetzigen ganzen Satz ("Unabhängigkeit ist kein Versprechen. Sie ist
eine Struktur.") — dadurch brach die Zeile alle paar Buchstaben um und sah
nicht mehr wie normaler linksbündiger Text aus. Entfernt, die Überschrift
nutzt jetzt einfach ihre volle Grid-Spalte (1–8 von 12). */
.sh20-bridge--statement > .eyebrow { grid-column: 1 / span 5; grid-row: 1; margin: 0; }
.sh20-bridge--statement > h2 { grid-column: 1 / span 8; grid-row: 2; }
.sh20-bridge--statement > .sh20-bridge__copy { grid-column: 8 / -1; grid-row: 3; padding-top: clamp(.75rem, 2vw, 2rem); }
.sh20-bridge--statement > .sh20-bridge__copy p { max-width: 32ch; }
/* Story headings belong in the text panels: never hide, absolutely position or remove them. */
.homepage-content .sh20-story-card__number {
position: static !important;
display: block !important;
order: 0;
margin: 0 0 clamp(2.5rem, 6vw, 6rem) !important;
color: #657886 !important;
font-family: var(--sh-body-font);
font-size: .74rem;
font-weight: 700;
letter-spacing: .09em;
line-height: 1.2;
text-transform: uppercase;
}
/* 1.9.39: auf Wunsch wieder vertikal mittig im Rahmen statt oben angeklebt. */
.homepage-content .sh20-story-card__quote { justify-content: center !important; }
.homepage-content .sh20-story-card blockquote { margin: 0 !important; }
/* Statement pairs replace the former ticker. The content is maintained in the Customizer. */
.sh20-statements {
position: relative;
overflow: hidden;
min-height: clamp(620px, 64vw, 880px);
display: grid;
grid-template-rows: auto 1fr;
row-gap: clamp(2.5rem, 6vw, 5rem);
padding: clamp(7rem, 14vw, 13rem) var(--sh-gutter);
border-top: 1px solid var(--sh-line);
border-bottom: 1px solid var(--sh-line);
background: var(--sh-ink);
color: var(--sh-paper);
}
.sh20-statements__head, .sh20-statements__stage { width: min(100%, var(--sh-shell)); margin-inline: auto; }
.sh20-statements__head h2 { max-width: 15ch; margin: 0; color: var(--sh-signal); font-family: var(--sh-display-font); font-size: clamp(2.25rem, 4.4vw, 5.1rem); font-weight: 700; letter-spacing: -.075em; line-height: .94; }
/* 1.9.39: Bühne war zentriert (place-items:center + text-align:center) —
sollte wie der Rest der Seite linksbündig sein. */
.sh20-statements__stage { position: relative; min-height: clamp(300px, 34vw, 460px); display: grid; place-items: center start; }
/* 1.9.38/1.9.39: beide Wörter stehen übereinander, jedes Wort seine eigene
Zeile, jetzt linksbündig zueinander statt zentriert. Das erste Wort steht
sofort fix da (keine eigene Animation mehr), nur "≠ …" wird noch getippt. */
.sh20-statements__pair { position: absolute; width: min(100%, 28ch); margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .1em; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(2.2rem, 5.8vw, 7.25rem); font-weight: 600; letter-spacing: -.085em; line-height: .9; opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .75s cubic-bezier(.2,.72,.26,1); }
.sh20-statements__pair.is-active { opacity: 1; transform: translateY(0); }
.sh20-statements__word1 { color: var(--sh-paper); transition: opacity .32s ease; }
/* 1.10.1: mehr "Raum" zwischen den Wortpaaren — kurzes Ausblenden statt
hartem Textwechsel, siehe navigation.js (nextPair). */
.sh20-statements__word1.is-swapping { opacity: 0; }
/* Four exactly equal entry cards. Strong black arrows remain visible on white. */
.sh20-conversion { background: #ffffff !important; color: var(--sh-ink); }
.sh20-conversion h2 { color: var(--sh-ink) !important; }
.sh20-conversion__grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.sh20-conversion__item { min-width: 0; min-height: 238px; padding: clamp(1.35rem, 2vw, 1.8rem); }
.sh20-conversion__item strong { max-width: 100% !important; overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: wrap; font-size: clamp(1.2rem, 2vw, 2.1rem); }
.sh20-conversion__item span { color: var(--sh-ink) !important; font-size: 2.15rem; font-weight: 700; line-height: 1; }
@media (min-width: 901px) { .sh20-conversion h2 { max-width: none; white-space: nowrap; } }
@media (max-width: 900px) {
.homepage-content .sh20-bridge.sh20-bridge--statement { grid-template-columns: 1fr; }
.sh20-bridge--statement > .eyebrow, .sh20-bridge--statement > h2, .sh20-bridge--statement > .sh20-bridge__copy { grid-column: 1; grid-row: auto; }
.sh20-bridge--statement > .sh20-bridge__copy { padding-top: 0; }
.sh20-conversion__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
.sh20-statements { min-height: 460px; padding-inline: 1rem; }
.sh20-statements__pair { width: 100%; font-size: clamp(2rem, 12vw, 4.1rem); }
.sh20-conversion__grid { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
.sh20-statements__pair { transition: none; }
.sh20-statements__pair:not(.is-active) { display: none; }
}
/* 1.9.16 — aus style.css gerettet: stand dort nie im Browser zur Verfügung,
weil style.css nie eingebunden wird. .sh20-certification und
.sh20-analysis-feed waren dadurch auf der Live-Seite unformatiert. */
.sh20-story-card__quote { position: relative; justify-content: center; }
.sh20-story-card__number { position: absolute; top: clamp(1.4rem, 3vw, 2.4rem); left: clamp(1.4rem, 3vw, 2.4rem); color: #657886; }
.sh20-analysis-feed { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--sh-line); background: var(--sh-line); }
.sh20-analysis-feed .sh20-analysis-card { min-width: 0; padding: 1.35rem; background: var(--sh-ink); }
.sh20-analysis-feed .sh20-analysis-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: -1.35rem -1.35rem 1.25rem; width: calc(100% + 2.7rem); }
.sh20-analysis-feed .sh20-analysis-card h3 { margin: .55rem 0 .8rem; font-family: var(--sh-display-font); font-size: clamp(1.4rem, 2vw, 2rem); letter-spacing: -.055em; line-height: 1; }
.sh20-analysis-feed .sh20-analysis-card p:not(.eyebrow) { color: var(--sh-muted); font-size: .96rem; line-height: 1.45; }
.sh20-content-feed-empty { margin: 0; padding: 1.5rem 0; color: var(--sh-muted); border-top: 1px solid var(--sh-line); border-bottom: 1px solid var(--sh-line); }
/* 1.9.39: Zertifizierung noch einmal überarbeitet. Die gestapelte 1.9.38-
Version hatte einen echten Bug (align-items:center zentrierte den ganzen
Abschnitt statt ihn linksbündig zu lassen) und traf nicht, was gewünscht
war: das Siegel soll neben dem Fließtext stehen, nicht neben der
Überschrift, und ruhig wirken. Jetzt wieder zweispaltig, aber das Siegel
rückt per margin-top erst auf Höhe des Lead-Absatzes ab, nicht auf Höhe
der riesigen Überschrift, und der ganze Abschnitt bleibt linksbündig. */
.sh20-certification { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(5.5rem, 12vw, 10rem) 0; border-top: 1px solid var(--sh-line); border-bottom: 1px solid var(--sh-line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 280px); column-gap: clamp(3rem, 7vw, 5.5rem); align-items: start; }
.sh20-certification__copy { max-width: min(100%, 760px); }
.sh20-certification__copy h2 { margin: 0; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(2.75rem, 5.4vw, 6.4rem); font-weight: 800; letter-spacing: -.07em; line-height: .92; }
.sh20-certification__lead { max-width: 36ch; margin: 2rem 0 0; color: var(--sh-paper); font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.5; }
.sh20-certification__copy > p:not(.eyebrow):not(.sh20-certification__lead) { max-width: 58ch; margin: 1.75rem 0 0; color: var(--sh-muted); line-height: 1.6; }
.sh20-certification__copy .wp-block-buttons { margin-top: 2.5rem; }
.sh20-certification__seal { justify-self: start; margin-top: clamp(6rem, 13vw, 9.5rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--sh-line); background: linear-gradient(165deg, rgba(120,170,186,.1), rgba(120,170,186,0) 65%); }
.sh20-certification__seal svg, .sh20-certification__seal img { width: auto; height: auto; max-width: 220px; display: block; }
@media (max-width: 900px) {
.sh20-analysis-feed { grid-template-columns: 1fr; }
.sh20-certification { width: min(calc(100% - 2rem), var(--sh-shell)); grid-template-columns: 1fr; }
.sh20-certification__seal { justify-self: start; margin-top: 2.5rem; padding: clamp(1.5rem, 5vw, 2rem); }
.sh20-certification__seal svg, .sh20-certification__seal img { max-width: 170px; }
}
/* 1.9.17 — "Wer bist du?"-Weiche */
.sh20-audience { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0; }
.sh20-audience__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sh20-audience__head h2 { margin: .4rem 0 0; font-family: var(--sh-display-font); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.sh20-audience__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--sh-line); background: var(--sh-line); }
.sh20-audience__card { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--sh-ink); color: var(--sh-paper); text-decoration: none; transition: background-color .15s ease; }
.sh20-audience__card:hover { background: #14161a; }
.sh20-audience__kicker { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-signal); }
.sh20-audience__title { font-family: var(--sh-display-font); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.sh20-audience__card p { margin: 0; max-width: 46ch; color: var(--sh-muted); font-size: .98rem; line-height: 1.5; }
.sh20-audience__cta { margin-top: auto; padding-top: .6rem; font-weight: 700; }
@media (max-width: 700px) {
.sh20-audience__grid { grid-template-columns: 1fr; }
}
/* 1.9.17 — Unabhängigkeits-Check */
.sh20-check { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--sh-line); }
.sh20-check__intro { max-width: 62ch; margin-bottom: 2rem; }
.sh20-check__intro h2 { margin: .4rem 0 .8rem; font-family: var(--sh-display-font); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; }
.sh20-check__intro p:not(.eyebrow) { color: var(--sh-muted); }
.sh20-check__shell { border: 1px solid var(--sh-line); background: #0d0f11; padding: clamp(1.5rem, 3vw, 2.5rem); }
.sh20-check__progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); }
.sh20-check__progress-bar { position: relative; flex: 1; height: 3px; background: var(--sh-line); }
.sh20-check__progress-bar span { position: absolute; inset: 0; width: 0%; background: var(--sh-signal); transition: width .25s ease; }
.sh20-check__question { display: none; }
.sh20-check__question.is-active { display: block; }
.sh20-check__question h3 { margin: 0 0 1.2rem; font-family: var(--sh-display-font); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; line-height: 1.15; }
.sh20-check__options { display: grid; gap: .7rem; }
.sh20-check__option { display: block; width: 100%; padding: 1rem 1.2rem; border: 1px solid var(--sh-line); background: transparent; color: var(--sh-paper); text-align: left; font-family: var(--sh-body-font); font-size: 1rem; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.sh20-check__option:hover, .sh20-check__option:focus-visible { border-color: var(--sh-signal); background: rgba(217,255,63,.08); outline: none; }
.sh20-check__result { display: none; text-align: center; }
.sh20-check__result.is-active { display: block; }
.sh20-check__gauge { position: relative; width: min(100%, 320px); margin: 0 auto 1.5rem; aspect-ratio: 2 / 1; overflow: hidden; }
.sh20-check__gauge svg { display: block; width: 100%; height: auto; }
.sh20-check__gauge-value { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-family: var(--sh-display-font); font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--sh-signal); }
.sh20-check__result-label { margin: 0 0 .6rem; font-family: var(--sh-display-font); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; }
.sh20-check__result-text { max-width: 56ch; margin: 0 auto 1.6rem; color: var(--sh-muted); }
.sh20-check__restart { background: none; border: none; color: var(--sh-muted); text-decoration: underline; cursor: pointer; font-size: .88rem; margin-top: 1rem; }
.sh20-check noscript { display: block; color: var(--sh-muted); }
/* Ehrenamtsrechner (1.9.25). Markengerecht in Dunkel/Signalgrün statt Rosa,
passend zum bereits bestehenden Werkzeug-Look des Unabhängigkeits-Checks. */
.sh20-ehrenamtsrechner { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.sh20-ehrenamtsrechner__intro { max-width: 68ch; margin-bottom: 2.5rem; }
.sh20-ehrenamtsrechner__intro p { margin: 0 0 1rem; color: rgba(248,247,242,.82); font-size: 1.08rem; line-height: 1.5; }
.sh20-ehrenamtsrechner__intro p:last-child { margin-bottom: 0; }
.sh20-ehrenamtsrechner__shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); border: 1px solid var(--sh-line); background: #0d0f11; }
.sh20-ehrenamtsrechner__form { padding: clamp(1.75rem, 3vw, 3rem); border-right: 1px solid var(--sh-line); }
.sh20-ehrenamtsrechner__form h2 { margin: 0 0 1.5rem; font-family: var(--sh-display-font); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.04em; }
.sh20-ehrenamtsrechner__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sh20-ehrenamtsrechner__field { display: grid; gap: .45rem; }
.sh20-ehrenamtsrechner__field--wide { grid-column: 1 / -1; }
.sh20-ehrenamtsrechner__field label { font-size: .85rem; font-weight: 700; }
.sh20-ehrenamtsrechner__hint { margin: 0; color: var(--sh-muted); font-size: .82rem; line-height: 1.4; }
.sh20-ehrenamtsrechner__field input { width: 100%; min-height: 3.1rem; padding: .6rem .8rem; border: 1px solid var(--sh-line); border-radius: 0; background: transparent; color: var(--sh-paper); font: inherit; font-size: 1.05rem; }
.sh20-ehrenamtsrechner__field input:focus { outline: 2px solid var(--sh-signal); outline-offset: 2px; }
.sh20-ehrenamtsrechner__field input[readonly] { background: rgba(248,247,242,.04); cursor: default; }
.sh20-ehrenamtsrechner__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }
.sh20-ehrenamtsrechner__button { min-height: 2.8rem; padding: .7rem 1.1rem; border: 1px solid var(--sh-signal); border-radius: 0; background: var(--sh-signal); color: var(--sh-ink); font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background .15s ease, color .15s ease; }
.sh20-ehrenamtsrechner__button:hover { background: transparent; color: var(--sh-paper); }
.sh20-ehrenamtsrechner__button--secondary { background: transparent; border-color: var(--sh-line); color: var(--sh-paper); }
.sh20-ehrenamtsrechner__button--secondary:hover { border-color: var(--sh-signal); color: var(--sh-signal); }
.sh20-ehrenamtsrechner__result { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.75rem, 3vw, 3rem); background: rgba(61,90,254,.08); }
.sh20-ehrenamtsrechner__result-label { margin: 0 0 .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.sh20-ehrenamtsrechner__result-value { margin: 0 0 .4rem; font-family: var(--sh-display-font); font-size: clamp(2.6rem, 5vw, 4.3rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; color: var(--sh-signal); }
.sh20-ehrenamtsrechner__result-desc { margin: 0 0 2rem; max-width: 32ch; color: var(--sh-muted); font-size: .95rem; line-height: 1.4; }
.sh20-ehrenamtsrechner__result-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sh-line); }
.sh20-ehrenamtsrechner__result-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--sh-line); font-size: .9rem; color: var(--sh-paper); }
.sh20-ehrenamtsrechner__result-list strong { text-align: right; color: var(--sh-paper); }
.sh20-ehrenamtsrechner__formula { margin: 2rem 0 0; padding: 1.1rem 1.3rem; border-left: 2px solid var(--sh-signal); background: rgba(248,247,242,.03); color: var(--sh-muted); font-size: .92rem; line-height: 1.5; }
.sh20-ehrenamtsrechner__sections { display: grid; gap: 2.5rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--sh-line); }
.sh20-ehrenamtsrechner__block h3 { margin: 0 0 .7rem; font-family: var(--sh-display-font); font-size: 1.25rem; font-weight: 800; }
.sh20-ehrenamtsrechner__block p { margin: 0 0 .9rem; max-width: 70ch; color: rgba(248,247,242,.8); line-height: 1.5; }
.sh20-ehrenamtsrechner__block p:last-child { margin-bottom: 0; }
.sh20-ehrenamtsrechner__table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.sh20-ehrenamtsrechner__table th, .sh20-ehrenamtsrechner__table td { padding: .75rem 1rem .75rem 0; border-bottom: 1px solid var(--sh-line); text-align: left; vertical-align: top; font-size: .92rem; }
.sh20-ehrenamtsrechner__table th { color: var(--sh-muted); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: .72rem; }
.sh20-ehrenamtsrechner__table td:first-child { color: var(--sh-paper); font-weight: 700; white-space: nowrap; }
.sh20-ehrenamtsrechner__table td:last-child { color: rgba(248,247,242,.8); }
.sh20-ehrenamtsrechner__note { margin-top: 1.5rem; padding: 1.1rem 1.3rem; border-left: 2px solid var(--sh-line); background: rgba(248,247,242,.03); }
.sh20-ehrenamtsrechner__note p { margin: 0; color: var(--sh-muted); font-size: .88rem; line-height: 1.45; }
.sh20-ehrenamtsrechner__sources { margin-top: 3rem; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--sh-line); background: #0d0f11; }
.sh20-ehrenamtsrechner__sources h2 { margin: .4rem 0 0; font-family: var(--sh-display-font); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.sh20-ehrenamtsrechner__sources ol { margin: 1.25rem 0 0; padding-left: 1.3rem; }
.sh20-ehrenamtsrechner__sources li { margin: .9rem 0; color: rgba(248,247,242,.82); font-size: .92rem; line-height: 1.5; }
.sh20-ehrenamtsrechner__sources a { color: var(--sh-signal); }
@media (max-width: 760px) {
.sh20-ehrenamtsrechner__shell { grid-template-columns: 1fr; }
.sh20-ehrenamtsrechner__form { border-right: 0; border-bottom: 1px solid var(--sh-line); }
.sh20-ehrenamtsrechner__grid { grid-template-columns: 1fr; }
.sh20-ehrenamtsrechner__field--wide { grid-column: auto; }
.sh20-ehrenamtsrechner__result-value { font-size: 2.6rem; }
}
@media print {
.sh20-ehrenamtsrechner__actions { display: none; }
}
/* Ehrenamtsrechner: Positions-Statement (1.9.26), bewusst hervorgehoben. */
.sh20-ehrenamtsrechner__position { margin-top: 4rem; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--sh-line); border-left: 4px solid var(--sh-signal); background: #0d0f11; }
.sh20-ehrenamtsrechner__position .eyebrow { margin-bottom: .75rem; }
.sh20-ehrenamtsrechner__position h2 { margin: 0 0 1.25rem; max-width: 22ch; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.sh20-ehrenamtsrechner__position p:not(.eyebrow) { max-width: 72ch; margin: 0 0 1.1rem; color: rgba(248,247,242,.85); font-size: 1.02rem; line-height: 1.55; }
.sh20-ehrenamtsrechner__position p:last-child { margin-bottom: 0; }
.sh20-ehrenamtsrechner__position strong { color: var(--sh-paper); }
/* Ehrenamtsrechner-Teaser auf der Startseite (1.9.26). Gleiches Muster wie
.sh20-newsletter (voller Farbband, dunkler Text), nur in Signalgrün statt
Rosa: hier gilt dieselbe Ausnahme wie beim Newsletter, der Hintergrund
selbst ist Signalgrün, deshalb bleibt Text hier bewusst dunkel. */
.sh20-ehr-teaser { padding: clamp(5rem, 9vw, 8rem) var(--sh-gutter); border-bottom: 1px solid var(--sh-line); background: var(--sh-signal); color: var(--sh-ink); }
.sh20-ehr-teaser > * { width: min(100%, var(--sh-shell)); margin-inline: auto; }
.sh20-ehr-teaser .eyebrow { color: var(--sh-ink); }
.sh20-ehr-teaser h2 { max-width: 18ch; margin: 0 0 1.5rem; color: var(--sh-ink); font-family: var(--sh-display-font); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .95; }
.sh20-ehr-teaser p:not(.eyebrow) { max-width: 60ch; margin: 0 0 2rem; color: var(--sh-ink); font-size: 1.15rem; line-height: 1.45; }
.sh20-ehr-teaser .wp-element-button { border-color: var(--sh-ink); background: var(--sh-ink); color: var(--sh-paper) !important; }
.sh20-ehr-teaser .wp-element-button:hover { border-color: var(--sh-paper); background: var(--sh-paper); color: var(--sh-ink) !important; }
/* Shop-Teaser auf der Startseite (1.9.27). Zeigt echte WooCommerce-Produkte
über [products], hier nur an das dunkle SH-2.0-Raster angepasst. */
.sh20-shop-teaser { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) 0; border-top: 1px solid var(--sh-line); }
.sh20-shop-teaser__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sh20-shop-teaser__head h2 { margin: .4rem 0 1rem; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: clamp(2.2rem, 4.4vw, 4rem); font-weight: 800; letter-spacing: -.06em; line-height: .95; }
.sh20-shop-teaser__head p:not(.eyebrow) { margin: 0 0 1.5rem; color: var(--sh-muted); font-size: 1.05rem; }
.sh20-shop-teaser__products ul.products { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--sh-line); background: var(--sh-line); }
.sh20-shop-teaser__products ul.products li.product { margin: 0 !important; padding: 1.25rem; background: var(--sh-ink); text-align: left; }
.sh20-shop-teaser__products ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 1rem !important; border-radius: 0 !important; }
.sh20-shop-teaser__products ul.products li.product .woocommerce-loop-product__title { margin: 0 0 .4rem; color: var(--sh-paper); font-family: var(--sh-display-font); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.sh20-shop-teaser__products ul.products li.product .price { color: var(--sh-signal) !important; font-size: 1rem; font-weight: 700; }
.sh20-shop-teaser__products ul.products li.product a.button { margin-top: 1rem !important; }
@media (max-width: 900px) {
.sh20-shop-teaser__products ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1.10.0 — Akademischer Relaunch: weißer Hintergrund statt Schwarz.
Bewusste Entscheidung: --sh-ink und --sh-paper werden nicht umbenannt,
sondern ihre Werte vertauscht. Praktisch jede bisherige Regel im Theme
folgt dem Muster "background: var(--sh-ink); color: var(--sh-paper)"
(dunkler Hintergrund, heller Text) — durch das Vertauschen wird daraus
automatisch "heller Hintergrund, dunkler Text", ohne jede einzelne der
rund 150 Stellen im File einzeln anfassen zu müssen. Header und Footer
bleiben bewusst dunkel (siehe Pins weiter unten) als optischer Rahmen um
die jetzt weißen Inhaltsseiten, wie zwei schwarze Buchdeckel. */
:root {
--sh-ink: #ffffff !important;
--sh-paper: #07090a !important;
/* --sh-line und --sh-muted sind eigene Konstanten, keine Ableitung von
ink/paper, darum hier separat auf "dunkel auf hell" gedreht. #5c5866 ist
dieselbe gedeckte Grauton-Farbe, die 1.3.1 schon für Fließtext auf Weiß
verwendet hat (.sh20-story), hier site-weit für Muted-Text übernommen. */
--sh-line: rgba(5,5,5,.13);
--sh-muted: #5c5866;
/* 1.10.1 — Fest verdrahtete Konstanten, NIE vertauscht und NIE innerhalb
von Header/Footer neu gesetzt. Für Stellen, die unabhängig davon, ob sie
gerade auf der hellen Seite oder im dunklen Header/Footer sitzen, immer
dieselbe feste Farbe brauchen (z. B. dunkler Text auf dem Signalgrün-
Textmarker). --sh-ink/--sh-paper sind dafür ungeeignet, weil ihr Wert je
nach Bereich unten bewusst unterschiedlich ist. */
--sh-dark: #07090a;
--sh-light: #ffffff;
}
/* Innerhalb von Header, Footer und Topbar bleiben diese drei Flächen
dauerhaft dunkel — darum hier ALLE vier Variablen (nicht nur Linie/Muted)
wieder auf ihre ursprünglichen, vor dem Farbtausch gültigen Werte gesetzt.
CSS-Variablen vererben sich an Kind-Elemente, ein erneutes Setzen hier
reicht für den ganzen Header-/Footer-Innenraum, inklusive mobilem
Menü-Overlay, Untermenüs, Footer-Navigation und Footer-CTA-Buttons.
1.10.1: --sh-ink/--sh-paper fehlten hier ursprünglich — dadurch waren nach
dem Farbtausch Navigation, Footer-Links und der CTA-Button im Header
unsichtbar bzw. falsch eingefärbt (dunkler Text auf dunklem Grund). */
.site-header, .site-footer, .topbar {
--sh-ink: #07090a;
--sh-paper: #ffffff;
--sh-line: rgba(248,247,242,.22);
--sh-muted: #acb8bb;
}
/* Zeile 546 (1.9.13) setzt html/body/.site-header/.site-footer pauschal auf
var(--sh-ink) !important – nach dem Farbtausch oben wäre das Weiß. Header
und Footer werden hier bewusst wieder fix dunkel gepinnt, weiter unten in
der Datei gewinnt das bei gleicher Spezifität. */
.site-header, .site-footer { background: #07090a !important; }
/* Akademisches Layout: Eyebrow/Kicker-Label und kleine Wortmarken-Akzente
funktionieren als Neongrün-Text nur auf dunklem Grund (siehe 1.9.40-Chat:
#ff3eb5 auf Weiß hat ein Kontrastverhältnis von rund 1,15:1, praktisch
unlesbar). .site-main umschließt in header.php/front-page.php/page.php/
allen Templates ausschließlich die jetzt weißen Inhaltsflächen, nie
Header oder Footer — darum reicht diese eine Scope-Klasse, um sämtliche
betroffenen Stellen sitesweit auf dunkles Ink umzustellen, ohne Header
und Footer (dort bleibt Neongrün auf Dunkel wie gehabt) zu berühren. */
/* 1.10.1: hier stand fälschlich var(--sh-ink) — nach dem Farbtausch ist das
die HELLE Farbe (Weiß), nicht die dunkle. Ergebnis: Eyebrow/Kicker-Labels,
Link-Hover, Pathway-Code und Post-Terms waren auf den neuen weißen Seiten
weiß auf weiß, also unsichtbar. Auf die feste Dunkel-Konstante umgestellt. */
.site-main .eyebrow, .site-main .sh20-kicker { color: var(--sh-dark); }
.site-main a:hover { color: var(--sh-dark); }
.site-main .sh20-pathway:hover, .site-main .sh20-pathway__code { color: var(--sh-dark); }
.site-main .wp-block-post-terms,
.site-main .wp-block-post-excerpt__more-link,
.site-main .arrow-link { color: var(--sh-dark) !important; }
/* Hover-Zustand aller Buttons auf den weißen Seiten: die Basisregel weiter
oben im File färbt den Text beim Hover auf var(--sh-ink) (nach dem
Farbtausch Weiß) ein, während der Hover-Hintergrund Signalgrün wird —
zusammen weißer Text auf Neongrün, kaum lesbar. Hier für .site-main auf
die feste Dunkel-Konstante korrigiert (Header/Footer sind davon nicht
betroffen, dort ist --sh-ink oben bereits wieder auf Dunkel zurückgesetzt). */
.site-main .wp-element-button:hover,
.site-main .wp-block-button__link:hover,
.site-main .button:hover { color: var(--sh-dark) !important; }
/* 1.10.3: zweite, bisher übersehene Instanz derselben Farbtausch-Bugklasse.
--sh-muted (#acb8bb, helles Blaugrau) und --sh-line (rgba(248,247,242,.22))
waren für dunklen Hintergrund gedacht (z. B. Trennlinien unter den vier
Arbeitsbereichen, Post-Exzerpt-Text). Auf den jetzt weißen Institutsseiten
wäre beides praktisch unsichtbar. Header/Footer/Topbar setzen ihre eigenen
Werte bereits weiter oben zurück und sind von dieser Regel nicht betroffen. */
.site-main {
--sh-muted: #5c5866;
--sh-line: rgba(7,9,10,.14);
}
/* 1.10.3: dieselbe Bugklasse auch bei fest codierten Fließtext-Farben
(rgba(248,247,242, …) statt einer Variable) — betrifft u. a. sämtliche
Intro-Absätze auf Institut/Forschung/Lehre/Zertifizierung/Kontakt/Profil
(.sh20-bridge p), die Insights- und Akademie-Lead-Absätze, den neuen
Hero-Subtext auf der Startseite sowie das Kontaktformular. Waren fast
unsichtbares helles Grau auf jetzt weißem Grund. */
.site-main .sh20-bridge p:not(.eyebrow),
.site-main .sh20-manifesto__bottom p,
.site-main .insights-lead,
.site-main .academy-lead,
.site-main .sh20-contact__form-shell p { color: rgba(7,9,10,.78); }
.site-main .sh20-contact-form__checkbox-label { color: rgba(7,9,10,.82); }
/* 1.10.3: der Pause/Play-Button auf den Ursprungsgeschichte-Videos hat einen
fix dunklen eigenen Chip-Hintergrund (unabhängig vom Seiten-Farbtausch) —
sein Text nutzte aber var(--sh-paper), die nach dem Tausch dunkel ist:
dunkler Text auf dunklem Chip, unsichtbar. Fest auf hell gesetzt. */
.site-main .sh20-video-toggle { color: var(--sh-light); }
/* "Textmarker"-Effekt für das Schlüsselwort in
Überschriften (genau das im Chat besprochene Konzept: Kernaussagen wie mit
einem Leuchtstift hervorgehoben statt als reiner grüner Text, der auf
Weiß nicht lesbar wäre). Funktioniert unverändert auch im dunklen Footer —
1.10.1: nutzt jetzt die feste Dunkel-Konstante statt --sh-paper, weil
--sh-paper innerhalb von Header/Footer bewusst wieder hell ist (siehe
oben) und der Textmarker aber IMMER dunklen Text braucht, unabhängig vom
Bereich (sonst: heller Text auf Neongrün im Footer-CTA, kaum lesbar). */
.signal {
background: var(--sh-signal);
color: var(--sh-dark) !important;
padding: .02em .16em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* Kontaktformular-Fläche: war eine dunkle Karte (#0d1011), jetzt eine
dezente helle Karte mit dunklem Rand statt der alten hellen Linie, die auf
Weiß unsichtbar gewesen wäre. */
.sh20-contact__form-shell { background: #f4f4f1; border-color: rgba(5,5,5,.12); }
.sh20-bridge p:not(.eyebrow),
.insights-lead,
.academy-lead,
.sh20-contact__form-shell p,
.sh20-contact-form__checkbox-label { color: var(--sh-muted); }
/* Card-Hover in den Insight-/Aktuell-Karten: war ein dunkler Hover-Ton für
eine ursprünglich dunkle Karte, auf der jetzt weißen Karte dezentes Grau
statt Fast-Schwarz. */
.content-card:hover { background: #f2f2ef; }
/* Footer: vierte Spalte "Projekte & Plattformen" (NOA, Incendi) ergänzt. */
.footer-grid--four { grid-template-columns: minmax(0, 1fr) max-content max-content max-content; column-gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) {
.footer-grid--four { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 4vw, 4rem); }
.footer-grid--four .footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.footer-grid--four { grid-template-columns: 1fr; }
}
/* Begriffspaare-Überschrift ("Strukturelle Fragen.") war fest auf
Signalgrün gesetzt, nicht über .eyebrow — auf dem jetzt weißen
.sh20-statements-Hintergrund extra abgefangen. */
.site-main .sh20-statements__head h2 { color: var(--sh-dark); }
/* Weitere Signalgrün-auf-jetzt-Weiß-Stellen, beim Durchgehen des ganzen
Files gefunden: Kachel-Kicker in der "Was wir tun"-Vierergrid
(.sh20-audience__kicker, z. B. Institut- und Akademie-Seite), dunkler
Kachel-Hover, und Formular-Erfolgsmeldung/Button-Hover im
Kontaktformular (Text wäre nach dem Farbtausch weiß auf Grün statt
dunkel auf Grün gewesen). */
.site-main .sh20-audience__kicker { color: var(--sh-dark); }
.site-main .sh20-audience__card:hover { background: #f2f2ef; }
.site-main .sh20-contact-form__submit:hover { color: var(--sh-dark) !important; }
.site-main .sh20-contact-form__status--success { color: var(--sh-dark); font-weight: 700; }
/* .sh20-bridge ohne den --statement-Modifier (Einordnung-Muster, bisher nur
auf der Startseite mit eigenem 12-Spalten-Override benutzt) hatte ohne
diesen Override nie eigene grid-column-Regeln für Eyebrow/Überschrift/
Absatz — bei den neuen Kapitel-Einstiegen auf Institut, Forschung, Lehre,
Akademie und der Kooperation-Sektion (alle nutzen die einfache
.sh20-bridge-Klasse für Eyebrow+Überschrift+Absatz) wäre das eine kaputte
2-Spalten-Grid-Automatik gewesen. Hier stattdessen ganz bewusst einspaltig
gestapelt, wie ein Kapitelanfang. */
.sh20-bridge:not(.sh20-bridge--statement) { grid-template-columns: 1fr; gap: clamp(1.1rem, 2.4vw, 1.6rem); }
.sh20-bridge:not(.sh20-bridge--statement) h2 { max-width: 26ch; }
.sh20-bridge:not(.sh20-bridge--statement) p:not(.eyebrow) { max-width: 70ch; }
/* 1.10.1: Buttons unter einem Absatz in .sh20-bridge__copy (Kooperation-
Teaser auf der Startseite, Institut-Gründerin/Kooperationen, Lehre-
Formate, Profil-Buchbar-für) hatten keinen eigenen Abstand nach oben und
klebten dadurch direkt am Fließtext. */
.sh20-bridge__copy .wp-block-buttons { margin-top: 2rem; }
/* 1.10.3: Zwischenüberschrift "Mögliche Formen" vor der Kooperationsformen-
Liste auf der Institutsseite (fehlte bisher komplett, stand aber so im
Vorgaben-Dokument). Dezentes Label statt großer H2, damit es nicht mit
der Abschnittsüberschrift "Kooperationen." konkurriert. */
.sh20-bridge__subhead { margin: 2rem 0 1rem; font-family: var(--sh-display-font); font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
/* 1.10.1: "Alle Insights" stand als winziger Outline-Button unten rechts
neben einer bis zu 6,4rem großen Überschrift — wirkte verloren und viel zu
klein. Größer, eigenständiger, auf halber Höhe der Überschrift statt an
deren Grundlinie. */
.sh20-analyses__head { align-items: center; }
.sh20-analyses__head .wp-block-button__link { padding: 1rem 1.75rem; font-size: .8rem; }
/* 1.10.1: Im schwarzen Footer-CTA-Block stand die Überschrift ("Bereit für
eine Kooperation?") mit line-height .98 sehr eng auf dem folgenden
Fließtext auf — dazu etwas mehr Luft, wie beim Rest des Footers. */
.footer-cta h2 { line-height: 1.08; }
.footer-cta__lead { margin-top: 1.75rem; }
/* =========================================================================
1.11.0 — Editorielles Redesign (Fraunces/Inter, durchgehend heller Look)
=========================================================================
Auf ausdrücklichen Wunsch: die Entwürfe (Lehre, Trägernetzwerk, Forschung-
Umbau usw.) als vollständiges, installierbares Theme umsetzen, inklusive
ihres visuellen Looks — nicht nur der Inhalte. Zwei Änderungen am
bisherigen 1.10.x-System ("weißer Inhalt, zwei schwarze Buchdeckel
Header/Footer"):
1) Rollentausch der beiden Schriftvariablen: bisher --sh-body-font =
Fraunces (Fließtext) und --sh-display-font = Space Grotesk
(Überschriften). Die Entwürfe machen es umgekehrt: Inter als ruhige
Lese-/UI-Schrift, Fraunces als Überschriften-/Display-Schrift. Beide
vorherigen !important-Sperren (Zeile ~550, ~580) setzten das Paar
jeweils gemeinsam — hier als letzter, später stehender !important-Block
überschrieben, Inter dafür neu selbst gehostet (assets/fonts/
Inter-Variable.woff2, SIL Open Font License, Lizenztext siehe
Inter-OFL.txt) statt auf eine evtl. lokal installierte Systemschrift zu
setzen.
2) Header, Footer und Topbar waren seit 1.10.0 absichtlich dunkel belassen
("wie zwei schwarze Buchdeckel") — werden hier auf denselben hellen
Look wie der Inhalt umgestellt. Dafür reicht es, die lokale
Variablen-Rücksetzung von 1.10.1 (Zeile ~873) und die beiden
hartkodierten dunklen Hintergrund-Pins (Zeile ~533, ~883) am Dateiende
zu überschreiben — der Rest (Buttons, Eyebrow-Farbe, Signalgrün-
Kontrastkorrekturen) fällt automatisch mit, weil Header/Footer dann
genau dieselben globalen --sh-ink/--sh-paper-Werte erben wie der
ohnehin schon auf Hell umgestellte Inhalt. Nur die wenigen Stellen, die
zuvor FEST auf "dunkler Rahmen" ausgelegt waren (Signalgrün-Text statt
-Fläche, invertiertes Footer-Logo), werden unten einzeln korrigiert.
*/
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-Variable.woff2') format('woff2');
font-style: normal;
font-weight: 300 800;
font-display: swap;
}
/* Fraunces-Kursive nutzt dieselbe Variable-Datei wie die aufrechte Schnitt
(1.10.2) — Fraunces ist als "ital"-Achse angelegt, Browser lösen die
passende Achsenposition selbst auf, sobald font-style:italic verlangt
wird. Bisher fehlte diese zweite @font-face-Deklaration, Kursivtext fiel
auf eine unecht geneigte (synthetische) Version zurück. */
@font-face {
font-family: 'Fraunces';
src: url('../fonts/Fraunces-Variable.woff2') format('woff2');
font-style: italic;
font-weight: 300 700;
font-display: swap;
}
:root {
--sh-body-font: 'Inter', Arial, Helvetica, sans-serif !important;
--sh-display-font: 'Fraunces', Georgia, 'Times New Roman', serif !important;
}
/* Ruhigere, editorielle Typoskala für die Display-Schrift: die bisherigen
Werte (sehr große Größen, stark negativer Letter-Spacing bis -.075em)
waren auf die geometrische Grotesk Space Grotesk zugeschnitten. Auf
Fraunces wirkt dieselbe enge Laufweite bei dieser Größe gequetscht/kaputt
— hier für alle wichtigen Überschriften-Selektoren auf ein für eine
Serife passendes Maß zurückgenommen (kleinere Spannweite, nahezu
Normal-Laufweite, moderateres Gewicht statt 800). */
.sh20-manifesto h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.04; }
.sh20-bridge h2, .sh20-section-heading h2, .sh20-conversion h2, .sh20-membership h2, .sh20-faq h2, .sh20-contact h2, .sh20-newsletter h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.08; }
.sh20-problem-strip p { font-size: clamp(1.05rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -.005em; line-height: 1.25; }
.footer-cta h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 460; letter-spacing: -.01em; }
.sh20-pathways__head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 460; letter-spacing: -.01em; }
.sh20-pathway__title { font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 500; letter-spacing: -.005em; }
.sh20-conversion__item strong { font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-weight: 500; letter-spacing: -.005em; }
.entry-header h1, .post-header h1, .archive-heading h1, .academy-page-header h1, .course-landing-header h1, .dashboard-header h1, .workshop-header h1, .product-header h1, .calculator-header h1, .publication-header h1, .insights-header h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.06; }
.insights-tagline { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 500; letter-spacing: -.005em; }
.prose h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 460; letter-spacing: -.01em; }
.prose h3 { font-size: 1.3rem; font-weight: 500; }
.card-body h2 { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; }
.sh20-statements__head h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 460; letter-spacing: -.01em; }
.sh20-lms-catalog-intro h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 460; letter-spacing: -.01em; }
.wordmark, .footer-mark { font-weight: 700; letter-spacing: -.01em; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 500; letter-spacing: -.005em; }
/* Header/Footer/Topbar: heller Look statt der beiden "schwarzen Buchdeckel".
--sh-light/--sh-dark sind die festen, nie vertauschten Konstanten aus
1.10.1 — exakt dafür gedacht, unabhängig vom umgebenden Bereich eine
verlässliche helle bzw. dunkle Fläche/Textfarbe zu bekommen. */
.site-header, .site-footer, .topbar {
--sh-ink: var(--sh-light);
--sh-paper: var(--sh-dark);
--sh-line: rgba(7,9,10,.14);
--sh-muted: #5c5866;
background: var(--sh-light) !important;
color: var(--sh-dark) !important;
backdrop-filter: none;
}
html, body, .site-header, .site-footer { background: var(--sh-light) !important; }
.site-header { border-bottom: 1px solid var(--sh-line); }
.site-footer { border-top: 2px solid var(--sh-signal); }
/* Mobiles aufklappbares Menü erbt jetzt automatisch Hell/Dunkel von oben,
hier nur zur Klarheit explizit gepinnt. */
@media (max-width: 900px) {
.primary-navigation { background: var(--sh-light); }
}
/* Signalgrün als FLÄCHE bleibt überall unverändert gut lesbar (Button,
Ticker, Textmarker). Signalgrün als TEXT auf jetzt hellem Header/Footer
wäre dagegen praktisch unlesbar (~1.15:1 Kontrast, siehe 1.9.40-Notiz) —
dieselbe Korrektur, die .site-main für Eyebrow/Kicker/Pathway-Code schon
bekommen hat, hier für die bisher dunkel angenommenen Header-/Footer-
Stellen nachgezogen. */
.site-header .eyebrow, .site-header .sh20-kicker,
.footer-cta .eyebrow,
.site-footer a:hover,
.footer-bottom__top:hover,
.footer-widget__title, .footer-column .menu > li > a,
.wordmark em, .footer-mark i,
.primary-navigation .menu-item-has-children > a::after { color: var(--sh-dark) !important; }
.footer-cta h2 .signal { color: var(--sh-dark) !important; background: var(--sh-signal); padding: .02em .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.header-cta, .site-header .wp-block-button__link { color: var(--sh-dark) !important; }
/* Footer-Wortmarke/-Logo: der bisherige invert(1)-Filter war dafür gedacht,
ein dunkles Logo auf dunklem Footer hell erscheinen zu lassen — auf dem
jetzt hellen Footer würde das Logo dadurch unsichtbar (helles Logo auf
hellem Grund). Filter entfernt, Logo bleibt in Originalfarbe wie im
Header. */
.footer-mark .custom-logo, .footer-mark > img { filter: grayscale(1) contrast(3) !important; }
/* Sub-Menü-Schatten nutzte eine für dunklen Grund gedachte Akzentfarbe als
Schattenfarbe (--sh-blue) — bleibt gültig, da --sh-blue selbst nicht
Teil des Hell/Dunkel-Tauschs ist, hier nur zur Kontrolle unverändert
gelassen. Sub-Menü-Hintergrund folgt automatisch --sh-ink (jetzt hell). */
/* 1.11.0: neuer Lead-Absatz unter "Was wir tun." (vormals "Vier
Arbeitsbereiche.", jetzt drei), analog zum Lead-Absatz in .page-head. */
.sh20-pathways__lead { max-width: 56ch; margin: 1rem 0 0; color: var(--sh-muted); font-family: var(--sh-body-font); font-size: 1.02rem; line-height: 1.6; }
/* 1.11.0: "Wie wir forschen." (3er-Grid, gleiche Audience-Card-Optik wie
die Forschungsfelder) und "Forschungsprogramme & Projekte." (einzelne
Projekt-Karte, erweiterbar — siehe Kommentar im Pattern). */
.sh20-audience__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
.sh20-audience__grid--3 { grid-template-columns: 1fr; }
}
.sh20-research-programs .sh20-project-card { max-width: 62ch; margin-top: 1.5rem; padding: clamp(1.75rem, 3.5vw, 2.5rem); border: 1px solid var(--sh-line); display: flex; flex-direction: column; gap: .7rem; }
.sh20-project-card__status { margin: 0; color: var(--sh-dark); font-family: var(--sh-body-font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sh20-project-card__title { margin: 0; font-family: var(--sh-display-font); font-size: 1.4rem; font-weight: 500; letter-spacing: -.01em; }
.sh20-project-card__subtitle { margin: 0; font-family: var(--sh-display-font); font-style: italic; font-size: 1.05rem; color: var(--sh-muted); }
.sh20-project-card__intro { margin: 0; color: var(--sh-muted); font-size: .95rem; line-height: 1.55; }
/* 1.11.0: Nummerierte Fragenliste (Forschungsprojekt-Unterseiten) und das
"Weitere Abschnitte"-Platzhalterraster (In-Vorbereitung-Karten). */
.sh20-q-list { display: flex; flex-direction: column; margin-top: 1.5rem; max-width: 72ch; }
.sh20-q-row { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--sh-line); }
.sh20-q-row:first-child { border-top: 1px solid var(--sh-line); }
.sh20-q-num { font-family: var(--sh-body-font); font-size: .78rem; color: var(--sh-dark); font-weight: 700; }
.sh20-q-text { font-family: var(--sh-display-font); font-size: 1.05rem; line-height: 1.5; margin: 0; }
.sh20-coming-note { max-width: 60ch; margin: .6rem 0 0; color: var(--sh-muted); font-size: .92rem; line-height: 1.5; }
.sh20-coming-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 2rem; background: var(--sh-line); border: 1px solid var(--sh-line); }
.sh20-coming-card { background: var(--sh-ink); padding: clamp(1.4rem, 3vw, 1.9rem); min-height: 7.5rem; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.sh20-coming-card h3 { margin: 0; font-family: var(--sh-body-font); font-size: .95rem; font-weight: 700; letter-spacing: .01em; }
.sh20-coming-state { font-family: var(--sh-body-font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.sh20-coming-card--linked .sh20-coming-state { color: var(--sh-dark); }
.sh20-coming-link { font-family: var(--sh-body-font); font-size: .78rem; font-weight: 700; color: var(--sh-dark); text-decoration: none; border-bottom: 1px solid var(--sh-dark); align-self: flex-start; }
.sh20-coming-link:hover { color: var(--sh-signal); border-color: var(--sh-signal); }
@media (max-width: 900px) {
.sh20-coming-grid { grid-template-columns: 1fr; }
.sh20-q-row { grid-template-columns: 2.2rem 1fr; }
}
/* 1.11.0: leichte Flächen-Variante für .sh20-bridge (abwechselnder
Hintergrund wie in den Entwürfen) und eine kursive Hervorhebungszeile
für Kapitel-Schlusssätze. */
.sh20-bridge--alt { background: var(--sh-warm); }
/* 1.11.0-Korrektur: ursprünglich kursives Fraunces (wie in den ersten
Entwürfen) — von der Nutzerin ausdrücklich abgelehnt ("wieder diese
scheiß schrift"), in den Mockups bereits auf nicht-kursives Inter
Semibold umgestellt. Hier für das echte Theme nachgezogen, da diese
Korrektur zuvor nur in den HTML-Entwürfen, nicht in site.css gelandet
war. */
.sh20-emphasis { font-family: var(--sh-body-font) !important; font-style: normal !important; font-weight: 600; font-size: clamp(1.05rem, 1.8vw, 1.2rem) !important; color: var(--sh-dark); max-width: 48ch; }
/* 1.11.0: Akademie "Bereiche" — Statuskarte "Strukturelle Autonomie"
(in Entwicklung) hebt sich per Signalfarben-Akzent von den übrigen
Karten ab, inkl. eigenem Status-Label; "Standards & Zertifizierung"
bleibt als kursiv markierter Platzhalter ("Text folgt.") erkennbar. */
.sh20-audience__card--highlight { box-shadow: inset 4px 0 0 var(--sh-signal); }
.sh20-audience__state { margin-top: .2rem; font-family: var(--sh-body-font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-signal); }
.site-main .sh20-audience__card--highlight { box-shadow: inset 4px 0 0 var(--sh-dark); }
.site-main .sh20-audience__state { color: var(--sh-dark); }
.sh20-audience__card--placeholder p { font-style: italic; color: var(--sh-muted); }
/* 1.11.0: Trägernetzwerk (vormals Mitgliedschaft) — fortlaufende
Textabschnitte (.sh20-narrative, analog .sh20-bridge, aber einspaltig
und ohne feste Headline-Breite) plus abwechselnde Flächenfarbe, und zwei
Beitrittskarten für Einzelpersonen/Gruppen bzw. Unternehmen. Die
"Was Sie mit Ihrem Beitrag aufbauen"-Fünferkarten nutzen bewusst das
bestehende .sh20-audience__grid--3, keine neue Grid-Komponente nötig. */
.sh20-narrative { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-narrative--alt { background: var(--sh-warm); }
.sh20-narrative h2 { font-family: var(--sh-display-font); font-weight: 460; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1.6rem; letter-spacing: -.01em; color: var(--sh-dark); }
.sh20-narrative p:not(.eyebrow) { font-family: var(--sh-body-font); font-size: 1.02rem; line-height: 1.65; max-width: 64ch; margin: 0 0 1.2rem; color: var(--sh-muted); }
.sh20-narrative p:last-child { margin-bottom: 0; }
.sh20-join { width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell)); margin: 0 auto; padding: clamp(4rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--sh-line); }
.sh20-join-head { margin-bottom: 2.4rem; max-width: 62ch; }
.sh20-join-head h2 { font-family: var(--sh-display-font); font-weight: 460; font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 .8rem; color: var(--sh-dark); }
.sh20-join-head p { font-family: var(--sh-body-font); font-size: .96rem; color: var(--sh-muted); margin: 0; line-height: 1.55; }
.sh20-join-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--sh-line); border: 1px solid var(--sh-line); }
.sh20-join-card { background: var(--sh-ink); padding: clamp(2rem, 4vw, 2.8rem); display: flex; flex-direction: column; gap: 1rem; }
.sh20-join-card__kicker { font-family: var(--sh-body-font); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-dark); }
.sh20-join-card h3 { font-family: var(--sh-display-font); font-size: 1.5rem; font-weight: 500; margin: 0; letter-spacing: -.01em; color: var(--sh-dark); }
.sh20-join-card p { font-family: var(--sh-body-font); font-size: .92rem; color: var(--sh-muted); line-height: 1.55; margin: 0; }
.sh20-join-card .wp-block-buttons { margin-top: .2rem; }
.sh20-join-card__note { font-family: var(--sh-body-font); font-size: .76rem; color: var(--sh-muted); font-style: italic; }
@media (max-width: 900px) {
.sh20-join-grid { grid-template-columns: 1fr; }
}
/* =========================================================================
1.12.0 — Entwurfsangleichung: Komponenten aus den neuen Entwürfen
=========================================================================
Der Ordner "SH20-Entwurf-gesamt" enthält die überarbeiteten Seitenentwürfe
(Fassungen vom 1.10.2026, 21:4x). Struktur, Reihenfolge, Kartenraster und
Texte der Patterns folgen jetzt genau diesen Entwürfen. Für die Bausteine,
die es im Theme noch nicht gab, kommt hier eine eigene Komponentenschicht
dazu — bewusst in derselben Formensprache wie .sh20-audience/.sh20-bridge
(1px-Rasterlinien, laufende Nummern, ruhige Serifen-Überschriften):
.sh20-audience__num laufende Nummer in den Kartenrastern (01–08)
.sh20-status-block Abschnitt "Status" (Forschungsprogramm, Trägernetz)
.sh20-formats "Lehrformate"-Aufzählung
.sh20-cta-block eigener Abschluss-CTA mit Frage + Button
.sh20-filters Filterleiste der Publikationsformen
.sh20-pubs/.sh20-pub-card Publikationskarten
.sh20-cases/.sh20-case-card Case-Studies-Karten
.sh20-questions/.sh20-subjects Fragenliste, Untersuchungsgegenstände
.sh20-cases-teaser Case-Studies-Teaser auf der Projektseite
.sh20-credibility Zitatabschnitt der Gründerin (Startseite)
.sh20-serves "Das Trägernetz dient:"
FARBENTSCHEIDUNG: Die Entwürfe nutzen für laufende Nummern, Eyebrow-Linie
und Zitatkante ein dunkleres Pink (--signal-deep #f500a8), weil das
kräftige Signalgrün #ff3eb5 auf hellem Grund praktisch unlesbar ist
(Kontrast ~1.15:1, siehe Notiz bei .site-main weiter oben). Dieses dunkle
Grün wird hier als EINZIGE neue Variable --sh-signal-deep eingeführt und
nur für die Nummern der Kartenraster verwendet. Soll die Farbe später
geändert werden, reicht diese eine Zeile.
========================================================================= */
:root {
--sh-signal-deep: #f500a8;
}
/* Gemeinsame Breitenführung der neuen Abschnitte (identisch zu .sh20-bridge) */
.sh20-credibility,
.sh20-status-block,
.sh20-serves,
.sh20-questions,
.sh20-subjects,
.sh20-cases-teaser,
.sh20-filters,
.sh20-pubs,
.sh20-pubs-feed,
.sh20-cases,
.sh20-formats,
.sh20-cta-block {
width: min(calc(100% - 2 * var(--sh-gutter)), var(--sh-shell));
margin: 0 auto;
}
/* Laufende Nummer in den Kartenrastern (Forschungsfelder, Lehre-Themen) */
.sh20-audience__num {
font-family: var(--sh-body-font);
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
color: var(--sh-signal-deep);
}
/* Projekt-Untertitel (Projektseite, Trägernetz): kursiver Zwischentitel unter
dem Seitentitel. !important nötig, weil die Fließtextregel von
.site-main .sh20-bridge p:not(.eyebrow) sonst gewinnt. */
.sh20-project-subtitle {
font-family: var(--sh-display-font) !important;
font-style: italic;
font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important;
line-height: 1.35 !important;
max-width: 56ch !important;
color: var(--sh-muted) !important;
}
/* Abschnitt "Status" — Forschungsprogramm 2026/27, Trägernetz-Ausgestaltung */
.sh20-status-block { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-status-block--compact { border-bottom: 0; padding-bottom: clamp(2rem, 4vw, 3rem); }
.sh20-status-block h2 { margin: 0 0 1rem; font-family: var(--sh-display-font); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 460; letter-spacing: -.01em; color: var(--sh-paper); }
.sh20-status-block__state { margin: 0 0 .7rem; font-family: var(--sh-body-font); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-dark); }
.sh20-status-block__note { margin: 0; max-width: 62ch; font-family: var(--sh-body-font); font-size: 1rem; line-height: 1.6; color: var(--sh-muted); }
/* "Lehrformate" — reine Aufzählung ohne eigenen Button (Button im CTA) */
.sh20-formats { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-formats__label { margin: 0 0 1rem; font-family: var(--sh-body-font); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.sh20-formats__list { margin: 0; max-width: 78ch; font-family: var(--sh-body-font); font-size: 1rem; line-height: 1.7; color: var(--sh-paper); }
/* Abschluss-CTA mit Frage und Button */
.sh20-cta-block { padding: clamp(3.5rem, 7vw, 5rem) 0; }
.sh20-cta-block__question { margin: 0 0 1.6rem; max-width: 52ch; font-family: var(--sh-body-font); font-size: 1.05rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; color: var(--sh-paper); }
.sh20-button-solid,
.sh20-button-outline { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.8rem; padding: .75rem 1.4rem; border: 1px solid var(--sh-dark); font-family: var(--sh-body-font); font-size: .74rem; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; text-decoration: none; }
.sh20-button-solid { background: var(--sh-dark); color: var(--sh-light); }
.sh20-button-solid:hover { background: var(--sh-signal); border-color: var(--sh-signal); color: var(--sh-dark); }
.sh20-button-outline { background: transparent; color: var(--sh-dark); }
.sh20-button-outline:hover { background: var(--sh-dark); border-color: var(--sh-dark); color: var(--sh-light); }
/* Publikationen: Filterleiste der vier Formen (im Entwurf reine Beschriftung) */
.sh20-filters { padding: 1.6rem 0; border-bottom: 1px solid var(--sh-line); }
.sh20-filter-pills { display: flex; flex-wrap: wrap; gap: .7rem; }
.sh20-filter-pill { padding: .55rem 1.1rem; border: 1px solid var(--sh-line); border-radius: 999px; background: transparent; font-family: var(--sh-body-font); font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sh-muted); cursor: default; }
.sh20-filter-pill.is-active { background: var(--sh-dark); border-color: var(--sh-dark); color: var(--sh-light); }
/* Publikationskarten */
.sh20-pubs { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-pubs__grid,
.sh20-cases__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--sh-line); background: var(--sh-line); }
.sh20-pub-card { display: flex; flex-direction: column; gap: .7rem; padding: clamp(1.6rem, 3vw, 2.2rem); background: var(--sh-ink); color: var(--sh-paper); text-decoration: none; transition: background-color .15s ease; }
.sh20-pub-card--linked:hover { background: var(--sh-warm); }
.sh20-pub-card__tag { font-family: var(--sh-body-font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.sh20-pub-card__title { margin: 0; font-family: var(--sh-display-font); font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; }
.sh20-pub-card__intro { margin: 0; max-width: 46ch; font-family: var(--sh-body-font); font-size: .9rem; line-height: 1.5; color: var(--sh-muted); }
.sh20-pub-card__meta { margin-top: auto; padding-top: .7rem; font-family: var(--sh-body-font); font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--sh-muted); }
.sh20-pubs-feed { padding: clamp(3rem, 6vw, 4.5rem) 0; }
/* Case-Studies-Karten (eigene Unterseite) */
.sh20-cases { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-case-card { display: flex; flex-direction: column; justify-content: center; gap: .8rem; min-height: 8.5rem; padding: clamp(1.6rem, 3vw, 2rem); background: var(--sh-ink); }
.sh20-case-card h3 { margin: 0; font-family: var(--sh-display-font); font-size: 1.4rem; font-weight: 500; letter-spacing: -.01em; color: var(--sh-paper); }
.sh20-case-card__tag { font-family: var(--sh-body-font); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sh-muted); }
.sh20-case-card--more span { font-family: var(--sh-body-font); font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sh-muted); }
/* Fragenliste und Untersuchungsgegenstände (Projektseite) */
.sh20-questions,
.sh20-subjects { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-questions h2,
.sh20-subjects h2 { margin: 0 0 1.6rem; font-family: var(--sh-display-font); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 460; letter-spacing: -.01em; color: var(--sh-paper); }
.sh20-subjects p { margin: 0; max-width: 70ch; font-family: var(--sh-body-font); font-size: 1.02rem; line-height: 1.65; color: var(--sh-muted); }
/* Case-Studies-Teaser auf der Projektseite */
.sh20-cases-teaser { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--sh-warm); border-bottom: 1px solid var(--sh-line); }
.sh20-cases-teaser h2 { margin: 0 0 1.6rem; font-family: var(--sh-display-font); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 460; letter-spacing: -.01em; color: var(--sh-paper); }
.sh20-cases-teaser__card { display: flex; flex-direction: column; gap: 1.4rem; max-width: 70ch; padding: clamp(1.6rem, 3vw, 2.2rem); border: 1px solid var(--sh-line); border-left: 4px solid var(--sh-signal-deep); background: var(--sh-ink); }
.sh20-cases-teaser__note { margin: 0; font-family: var(--sh-body-font); font-size: .95rem; line-height: 1.6; color: var(--sh-muted); }
/* Zitatabschnitt der Gründerin (Startseite) */
.sh20-credibility { padding: clamp(3.5rem, 7vw, 5.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-credibility__quote { max-width: 46ch; margin: 0 0 1.4rem; padding-left: 1.25rem; border-left: 3px solid var(--sh-signal-deep); }
.sh20-credibility__quote p { margin: 0 0 1rem; font-family: var(--sh-display-font); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 460; line-height: 1.15; letter-spacing: -.01em; color: var(--sh-paper); }
.sh20-credibility__quote cite { font-family: var(--sh-body-font); font-size: .78rem; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted); }
/* "Das Trägernetz dient:" */
.sh20-serves { padding: clamp(3rem, 6vw, 4.5rem) 0; border-bottom: 1px solid var(--sh-line); }
.sh20-serves h2 { margin: 0 0 1.6rem; font-family: var(--sh-display-font); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 460; letter-spacing: -.01em; color: var(--sh-paper); }
.sh20-serves__list { list-style: none; margin: 0; padding: 0; max-width: 76ch; }
.sh20-serves__list li { position: relative; padding: 1rem 0 1rem 2.2rem; border-bottom: 1px solid var(--sh-line); font-family: var(--sh-body-font); font-size: 1.02rem; color: var(--sh-paper); }
.sh20-serves__list li:first-child { border-top: 1px solid var(--sh-line); }
.sh20-serves__list li::before { content: '→'; position: absolute; left: 0; color: var(--sh-signal-deep); }
@media (max-width: 900px) {
.sh20-pubs__grid,
.sh20-cases__grid { grid-template-columns: 1fr; }
}
/* Auf Seiten, deren Template den Inhalt bereits in .site-shell zentriert
(page-publikationen.php, page-insights.php, page-calculator.php), darf die
Breitenregel von oben nicht ein zweites Mal greifen — sonst würde der
Inhalt um zwei Seitenränder schmaler und sichtbar eingerückt. In diesem
Fall füllen die Abschnitte einfach die vorhandene Shell aus. */
.site-shell .sh20-filters,
.site-shell .sh20-pubs,
.site-shell .sh20-pubs-feed,
.site-shell .sh20-cases,
.site-shell .sh20-questions,
.site-shell .sh20-subjects,
.site-shell .sh20-cases-teaser,
.site-shell .sh20-credibility,
.site-shell .sh20-status-block,
.site-shell .sh20-serves,
.site-shell .sh20-formats,
.site-shell .sh20-cta-block { width: 100%; margin-inline: 0; }
/* =========================================================================
1.13.0 — Startseite: 1:1-Umsetzung des Entwurfs
=========================================================================
Quelle: ~/Downloads/SH20-Entwurf-gesamt/SH20-Entwurf-professionelle-Richtung_3.html
Die Abschnitte Hero, Spannungsfelder, Ausgangslage, Was wir tun, Gründerin,
Publikationen und Trägernetz übernehmen die Werte des Entwurfs unverändert:
dieselben Abstände, Raster, Schriftgrößen, Hintergründe und Hover-Effekte.
Alle eigenen Klassen tragen das Präfix hp-, damit die bestehenden
Theme-Regeln (sh20-manifesto, sh20-story, sh20-pathway, sh20-analyses …)
nicht dazwischenfunken. Schriften bleiben die des Themes (Fraunces/Inter),
der Entwurf nutzt dort Space Grotesk — die Umstellung der Sans-Schrift ist
eine eigene Entscheidung und hier bewusst nicht vorweggenommen.
Farben des Entwurfs, hier als eigene Variablen nur für die Startseite:
Ink #0d0f0e · Papier #ffffff · Papier-2 #F8F6F9 · Signal #ff3eb5
Signal-dunkel #f500a8 · Muted #5c5866
========================================================================= */
.homepage-content {
--hp-ink: #0d0f0e;
--hp-paper: #ffffff;
--hp-paper-2: #F8F6F9;
--hp-line: rgba(13, 15, 14, .14);
--hp-line-strong: rgba(13, 15, 14, .3);
--hp-muted: #5c5866;
--hp-signal: #ff3eb5;
--hp-signal-deep: #f500a8;
--hp-shell: 1280px;
--hp-gutter: clamp(1.5rem, 5vw, 5rem);
background: var(--hp-paper);
color: var(--hp-ink);
}
/* Die Startseite regelt ihre Breiten selbst über --hp-shell/--hp-gutter.
Die Gutenberg-Breitenbegrenzung aus theme.json wird dafür neutralisiert. */
.homepage-content > .entry-content {
padding: 0 !important; max-width: none !important;
}
.homepage-content .hp-shell {
box-sizing: border-box;
width: min(100% - 2 * var(--hp-gutter), var(--hp-shell));
max-width: var(--hp-shell);
margin-inline: auto;
padding-inline: var(--hp-gutter);
}
/* ---------- Gemeinsame Bausteine ---------- */
.homepage-content .hp-eyebrow {
display: flex;
align-items: center;
gap: .6rem;
margin: 0 0 1.6rem;
color: var(--hp-muted);
font-family: var(--sh-body-font);
font-size: .74rem;
font-weight: 700;
letter-spacing: .14em;
line-height: 1.4;
text-transform: uppercase;
}
.homepage-content .hp-eyebrow::before { flex: none; width: 1.6rem; height: 1px; background: var(--hp-signal-deep); content: ''; }
.homepage-content .hp-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.homepage-content .hp-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .95rem 1.5rem;
border: 1px solid var(--hp-ink);
color: var(--hp-ink);
font-family: var(--sh-body-font);
font-size: .74rem;
font-weight: 700;
letter-spacing: .05em;
line-height: 1.2;
text-decoration: none;
text-transform: uppercase;
}
.homepage-content .hp-btn--solid { background: var(--hp-ink); color: var(--hp-paper); }
.homepage-content .hp-btn--solid:hover,
.homepage-content .hp-btn--solid:focus-visible { background: var(--hp-signal-deep); border-color: var(--hp-signal-deep); color: var(--hp-ink); }
.homepage-content .hp-btn--ghost { background: transparent; color: var(--hp-ink); }
.homepage-content .hp-btn--ghost:hover,
.homepage-content .hp-btn--ghost:focus-visible { background: var(--hp-ink); color: var(--hp-paper); }
/* ---------- Hero ---------- */
.homepage-content .hp-hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--hp-line); }
.homepage-content .hp-hero-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.3rem, 2.4vw, 1.9rem); align-items: start; }
.homepage-content .hp-manifesto {
margin: 0;
color: var(--hp-ink);
font-family: var(--sh-display-font);
font-optical-sizing: auto;
font-size: clamp(2.6rem, 5.3vw, 4.6rem);
font-style: italic;
font-weight: 420;
letter-spacing: -.01em;
line-height: 1.03;
}
.homepage-content .hp-manifesto em { padding-bottom: .03em; border-bottom: 3px solid var(--hp-signal); font-style: normal; font-weight: 460; }
.homepage-content .hp-hero-lead { max-width: 62ch; margin: 0; color: var(--hp-ink); font-family: var(--sh-body-font); font-size: .98rem; line-height: 1.6; }
.homepage-content .hp-hero .hp-actions { margin-top: .5rem; }
/* ---------- Spannungsfelder (Shortcode sh20_statement_pairs) ---------- */
.homepage-content .sh20-statements { padding: clamp(5rem, 10vw, 8rem) 0; overflow: hidden; border-bottom: 1px solid var(--hp-line); background: var(--hp-ink); color: var(--hp-paper); }
.homepage-content .sh20-statements__head,
.homepage-content .sh20-statements__stage,
.homepage-content .sh20-statements__foot {
box-sizing: border-box;
width: min(100% - 2 * var(--hp-gutter), var(--hp-shell));
max-width: var(--hp-shell);
margin-inline: auto;
padding-inline: var(--hp-gutter);
}
.homepage-content .sh20-statements .eyebrow { margin: 0 0 1.6rem; color: rgba(247, 245, 239, .55); font-family: var(--sh-body-font); font-size: .74rem; font-weight: 700; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; }
.homepage-content .sh20-statements .eyebrow::before { background: var(--hp-signal); }
.homepage-content .sh20-statements__head h2 { max-width: none; margin: 0 0 3rem; color: var(--hp-paper); font-family: var(--sh-display-font); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.1; }
.homepage-content .sh20-statements__stage { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: clamp(7rem, 16vw, 11rem); }
.homepage-content .sh20-statements__pair {
position: absolute;
width: 100%;
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .2em;
color: var(--hp-paper);
font-family: var(--sh-display-font);
font-size: clamp(2.6rem, 7vw, 6.2rem);
font-style: italic;
font-weight: 460;
letter-spacing: -.01em;
line-height: .98;
opacity: 0;
transform: translateY(14px);
transition: opacity .6s ease, transform .75s cubic-bezier(.2, .72, .26, 1);
}
.homepage-content .sh20-statements__pair.is-active { opacity: 1; transform: translateY(0); }
.homepage-content .sh20-statements__word1 { color: var(--hp-paper); font-style: italic; transition: opacity .32s ease; }
.homepage-content .sh20-statements__word1.is-swapping { opacity: 0; }
.homepage-content .sh20-statements__word2 { color: var(--hp-signal); font-style: normal; font-weight: 500; }
.homepage-content .sh20-statements__foot { margin-top: 2.5rem; color: rgba(247, 245, 239, .5); font-family: var(--sh-body-font); font-size: .76rem; line-height: 1.5; }
/* ---------- Ausgangslage ---------- */
.homepage-content .hp-story { padding: clamp(4rem, 8vw, 6rem) 0; border-bottom: 1px solid var(--hp-line); background: var(--hp-paper-2); }
.homepage-content .hp-story-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.homepage-content .hp-story-head h2 { margin: 0; color: var(--hp-ink); font-family: var(--sh-display-font); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.1; }
.homepage-content .hp-story-list { display: flex; flex-direction: column; gap: 1px; margin-top: 2.6rem; border: 1px solid var(--hp-line-strong); background: var(--hp-line-strong); }
.homepage-content .hp-story-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; background: var(--hp-paper); }
.homepage-content .hp-story-row:nth-child(even) .hp-story-media { order: 2; }
.homepage-content .hp-story-media { position: relative; overflow: hidden; min-height: 260px; background: var(--hp-ink); }
.homepage-content .hp-story-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.homepage-content .hp-story-text { display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 4vw, 3.5rem); }
.homepage-content .hp-story-num { margin-bottom: 1.1rem; color: var(--hp-signal-deep); font-family: var(--sh-body-font); font-size: .72rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.homepage-content .hp-story-text blockquote { max-width: 28ch; margin: 0; color: var(--hp-ink); font-family: var(--sh-display-font); font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-style: italic; font-weight: 420; letter-spacing: -.005em; line-height: 1.32; }
/* ---------- Was wir tun ---------- */
.homepage-content .hp-index { padding: clamp(4rem, 8vw, 6rem) 0; border-bottom: 1px solid var(--hp-line); }
.homepage-content .hp-index-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 2.6rem; flex-wrap: wrap; }
.homepage-content .hp-index-head h2 { max-width: 22ch; margin: 0; color: var(--hp-ink); font-family: var(--sh-display-font); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.1; }
.homepage-content .hp-index-head p { max-width: 42ch; margin: 0; color: var(--hp-muted); font-family: var(--sh-body-font); font-size: .85rem; line-height: 1.5; }
.homepage-content .hp-index-list { border-top: 1px solid var(--hp-line-strong); }
.homepage-content .hp-index-row { display: grid; grid-template-columns: 4.5rem 1.4fr 1.8fr auto; align-items: center; gap: 2rem; padding: 1.7rem 0; border-bottom: 1px solid var(--hp-line); color: var(--hp-ink); text-decoration: none; transition: background .18s ease, padding .18s ease; }
.homepage-content .hp-index-row:hover,
.homepage-content .hp-index-row:focus-visible { background: var(--hp-paper-2); padding-inline: 1rem; margin-inline: -1rem; color: var(--hp-ink); }
.homepage-content .hp-index-num { color: var(--hp-signal-deep); font-family: var(--sh-body-font); font-size: .8rem; font-weight: 700; }
.homepage-content .hp-index-title { font-family: var(--sh-display-font); font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 500; letter-spacing: -.01em; }
.homepage-content .hp-index-desc { color: var(--hp-muted); font-family: var(--sh-body-font); font-size: .86rem; line-height: 1.45; }
.homepage-content .hp-index-arrow { justify-self: end; font-size: 1.3rem; transition: transform .18s ease; }
.homepage-content .hp-index-row:hover .hp-index-arrow,
.homepage-content .hp-index-row:focus-visible .hp-index-arrow { transform: translateX(4px); }
/* ---------- Gründerin und Leitung ---------- */
.homepage-content .hp-credibility { padding: clamp(4.5rem, 9vw, 7rem) 0; border-bottom: 1px solid var(--hp-line); background: var(--hp-ink); color: var(--hp-paper); }
/* Der Entwurf begrenzt diesen Block ausdrücklich auf 62ch (.credibility-single). */
.homepage-content .hp-credibility-single { max-width: 62ch; }
.homepage-content .hp-credibility .hp-eyebrow { color: rgba(247, 245, 239, .6); }
.homepage-content .hp-credibility .hp-eyebrow::before { background: var(--hp-signal); }
.homepage-content .hp-credibility blockquote { margin: 0; color: var(--hp-paper); font-family: var(--sh-display-font); font-size: clamp(1.6rem, 3vw, 2.4rem); font-style: italic; font-weight: 400; letter-spacing: -.005em; line-height: 1.32; }
.homepage-content .hp-credibility blockquote cite { display: block; margin-top: 1.6rem; color: rgba(247, 245, 239, .65); font-family: var(--sh-body-font); font-size: .76rem; font-style: normal; letter-spacing: .04em; }
.homepage-content .hp-credibility-link { display: inline-block; margin-top: 2rem; padding-bottom: .2rem; border-bottom: 1px solid rgba(247, 245, 239, .4); color: var(--hp-paper); font-family: var(--sh-body-font); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.homepage-content .hp-credibility-link:hover,
.homepage-content .hp-credibility-link:focus-visible { color: var(--hp-signal); border-color: var(--hp-signal); }
/* ---------- Publikationen ---------- */
.homepage-content .hp-pubs { padding: clamp(4rem, 8vw, 6rem) 0; border-bottom: 1px solid var(--hp-line); }
.homepage-content .hp-pubs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.homepage-content .hp-pubs-head h2 { margin: 0; color: var(--hp-ink); font-family: var(--sh-display-font); font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.1; }
.homepage-content .hp-pubs-link { padding-bottom: .15rem; border-bottom: 1px solid var(--hp-ink); color: var(--hp-ink); font-family: var(--sh-body-font); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.homepage-content .hp-pubs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--hp-line-strong); background: var(--hp-line-strong); }
.homepage-content .hp-pub-card { display: flex; flex-direction: column; gap: .9rem; min-height: 220px; padding: 1.9rem; background: var(--hp-paper); }
.homepage-content .hp-pub-tag { color: var(--hp-signal-deep); font-family: var(--sh-body-font); font-size: .66rem; font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.homepage-content .hp-pub-card h3 { margin: 0; font-family: var(--sh-display-font); font-size: 1.25rem; font-weight: 500; line-height: 1.25; }
.homepage-content .hp-pub-card h3 a { color: var(--hp-ink); text-decoration: none; }
.homepage-content .hp-pub-card h3 a:hover { color: var(--hp-signal-deep); }
.homepage-content .hp-pub-card p { flex-grow: 1; margin: 0; color: var(--hp-muted); font-family: var(--sh-body-font); font-size: .82rem; line-height: 1.5; }
.homepage-content .hp-pub-meta { padding-top: .8rem; border-top: 1px solid var(--hp-line); color: var(--hp-muted); font-family: var(--sh-body-font); font-size: .7rem; letter-spacing: .03em; }
/* ---------- Trägernetz ---------- */
.homepage-content .hp-traeger { padding: clamp(4.5rem, 9vw, 7rem) 0; border-bottom: 1px solid var(--hp-line); background: var(--hp-paper-2); }
.homepage-content .hp-traeger-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.homepage-content .hp-traeger h2 { max-width: 14ch; margin: 0 0 1rem; color: var(--hp-ink); font-family: var(--sh-display-font); font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 460; letter-spacing: -.01em; line-height: 1.08; }
.homepage-content .hp-traeger-sub { max-width: 24ch; margin: 0; color: var(--hp-ink); font-family: var(--sh-display-font); font-size: clamp(1.15rem, 2vw, 1.4rem); font-style: italic; font-weight: 420; line-height: 1.3; }
.homepage-content .hp-traeger-side { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid var(--hp-line-strong); }
.homepage-content .hp-traeger-side p { margin: 0 0 1.8rem; color: var(--hp-ink); font-family: var(--sh-body-font); font-size: .96rem; line-height: 1.65; }
@media (max-width: 900px) {
.homepage-content .hp-index-row { grid-template-columns: 2.5rem 1fr auto; }
.homepage-content .hp-index-desc { display: none; }
.homepage-content .hp-story-row { grid-template-columns: 1fr; }
.homepage-content .hp-story-row:nth-child(even) .hp-story-media { order: 0; }
.homepage-content .hp-story-media { min-height: 0; aspect-ratio: 16 / 10; }
.homepage-content .hp-pubs-grid { grid-template-columns: 1fr; }
.homepage-content .hp-traeger-grid { grid-template-columns: 1fr; }
.homepage-content .hp-traeger-side { padding-top: 1.5rem; padding-left: 0; border-top: 1px solid var(--hp-line-strong); border-left: 0; }
}
/* =========================================================================
1.15.0 — Startseite: Feinschliff nach der Durchsicht
=========================================================================
Sieben Punkte aus der Rückmeldung, jeder mit einem Kommentar an der Stelle,
an der er wirkt. Alles hier steht am Ende der Datei und überschreibt damit
die Regeln aus dem 1.13.0-Abschnitt weiter oben.
========================================================================= */
/* 1) Hero: Die Überschrift enthält wieder , damit
header-typewriter.js die Wortfolge eintippen kann. Der grüne Textmarker
wird dafür abgeschaltet — der Signalstrich unter dem Wort bleibt, genau
wie im Entwurf. */
.homepage-content .hp-manifesto .signal {
padding: 0;
background: none;
color: inherit;
}
/* 2) "Was wir tun.": Die Einleitung steht jetzt unter der Überschrift statt
rechts daneben. */
.homepage-content .hp-index-head { display: block; margin-bottom: 2.6rem; }
.homepage-content .hp-index-head h2 { max-width: 26ch; }
.homepage-content .hp-index-head p { max-width: 62ch; margin-top: 1.2rem; font-size: .92rem; line-height: 1.6; }
/* 3) Spannungsfelder: Die Zeile "Begriffe, die im Alltag oft synonym verwendet
werden …" war eine nackte Kleintextzeile. Sie ist jetzt als eigene Aussage
gesetzt: Signalgrüner Strich links, kursive Serifenschrift in Lesegröße,
begrenzte Zeilenlänge — ruhig, aber sichtbar. */
.homepage-content .sh20-statements__foot {
max-width: 54ch;
margin-top: 3rem;
padding-left: 1.4rem;
border-left: 2px solid var(--hp-signal);
color: rgba(247, 245, 239, .78);
font-family: var(--sh-display-font);
font-size: clamp(1rem, 1.6vw, 1.2rem);
font-style: italic;
font-weight: 420;
line-height: 1.5;
}
/* 4) Trägernetz: eine Spalte statt zwei, alles untereinander — Überschrift,
kursiver Zusatz, Text, Button. Die Überschrift ist deutlich größer und
„Träger:in." bekommt denselben Signalstrich wie das Hero-Wort. */
.homepage-content .hp-traeger-grid { display: block; }
.homepage-content .hp-traeger h2 { max-width: none; margin-bottom: 1.2rem; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.04; }
.homepage-content .hp-traeger h2 em { padding-bottom: .03em; border-bottom: 3px solid var(--hp-signal); font-style: normal; font-weight: 460; }
.homepage-content .hp-traeger-sub { max-width: 34ch; margin-bottom: 2.2rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.homepage-content .hp-traeger-side { max-width: 70ch; padding-left: 0; border-left: 0; }
.homepage-content .hp-traeger-side p { max-width: 70ch; margin-bottom: 2rem; font-size: 1rem; line-height: 1.65; }
/* 5) Footer: Der Kooperations-Satz stand auf 56ch begrenzt und wirkte dadurch
wie ein abgehakter Block. Er läuft jetzt über die volle Seitenbreite. */
.site-footer .footer-cta__lead { max-width: none; }
/* 6) Footer: Die Wortmarke ist eine JPEG-Datei mit weißem Hintergrund. Auf dem
hellen Footer war dieser Kasten als weißes Rechteck zu sehen. multiply
rechnet den weißen Grund weg, das Logo steht wie im Header auf der Fläche. */
.footer-mark .custom-logo,
.footer-mark > img,
.site-footer .sh20-default-logo img {
filter: grayscale(1) contrast(1.6) !important;
mix-blend-mode: multiply;
}
/* 7) Nutzerinnen-Wunsch "eine Farbe": Falls irgendwo noch ein Element aus der
alten Blau-/Rosé-Welt übrig ist, greift hier das Signalgrün. */
.homepage-content .sh20-video-toggle:hover,
.homepage-content .sh20-video-toggle:focus-visible {
border-color: var(--hp-signal);
background: var(--hp-signal);
color: var(--hp-ink);
}
.homepage-content a:hover { color: var(--hp-signal-deep); }
/* 8) Footer: Der Einleitungstext stand in --sh-muted (#acb8bb) — ein helles
Blaugrau, das auf dem hellen Footer kaum zu lesen war. Jetzt ein ruhiges,
warmes Grau mit ausreichendem Kontrast. */
.site-footer .footer-intro p,
.site-footer .footer-column .menu > li > a,
.site-footer .footer-bottom { color: #6b7068; }
/* =========================================================================
1.17.0 — Spannungsfelder: Erklärsatz unter der Überschrift
=========================================================================
Der Satz stand am Fuß des Abschnitts unter den Begriffspaaren. Jetzt sitzt
er direkt unter "Strukturelle Fragen." und gehört damit zur Überschrift.
Die Gestaltung von 1.15.0 bleibt (Signalstrich links, kursive Serifenschrift),
nur die Abstände passen zur neuen Position.
========================================================================= */
.homepage-content .sh20-statements__foot {
max-width: 56ch;
margin: 1.5rem 0 0;
padding-left: 1.4rem;
border-left: 2px solid var(--hp-signal);
color: rgba(247, 245, 239, .78);
font-family: var(--sh-display-font);
font-size: clamp(1rem, 1.5vw, 1.15rem);
font-style: italic;
font-weight: 420;
line-height: 1.5;
}
/* 9) Wortmarke. Die Datei war ein JPEG — schwarze Wortmarke auf weißem Grund.
Im Header machte invert(1) daraus einen schwarzen Kasten mit weißer Schrift,
im Footer blieb der weiße Kasten auf dem hellen Papier als Rechteck sichtbar.
Jetzt liegt die Wortmarke als PNG mit transparentem Hintergrund im Theme
(assets/images/sh20-wordmark.png), Header und Footer zeigen darauf. Filter
und Mischmodus sind damit überflüssig und werden abgeschaltet — die
Wortmarke steht in beiden Bereichen einfach schwarz auf der Fläche. */
.site-header .custom-logo,
.site-header .sh20-default-logo img,
.footer-mark .custom-logo,
.footer-mark > img,
.site-footer .sh20-default-logo img {
filter: none !important;
mix-blend-mode: normal;
}
/* =========================================================================
1.18.0 — Grundfläche reines Weiß
=========================================================================
Auf Wunsch liegt die Seite jetzt auf #ffffff statt auf dem warmen Off-White
(#f7f5ef im Customizer, #f8f7f2 als Theme-Konstante). Die Abschnittsbänder
waren warmes Beige (#efece2 / #f1ede3) — auf Weiß wirkt so ein Ton gelblich,
sie sind jetzt ein neutrales Hellgrau (#F8F6F9), damit die Gliederung
sichtbar bleibt. Nebeneffekt: der Kasten um die Wortmarke ist endgültig weg,
das Logo steht schwarz auf Weiß.
========================================================================= */
/* Der Kooperationssatz im Footer stand in --sh-muted (#acb8bb, helles
Blaugrau) und war auf hellem Grund kaum zu lesen. Jetzt dasselbe ruhige,
dunkle Grau wie der übrige Footer-Text. */
.site-footer .footer-cta__lead {
max-width: none;
color: #443f4a;
}
/* =========================================================================
1.19.0 — Palette: Neonpink als Signal, Flieder als Träger
=========================================================================
Signalgrün ist raus. Die Rollen:
Signal (Marker, Striche, "≠", Buttons, Laufband) #ff3eb5
Signal kräftig (Hover, aktive Zustände) #f500a8
Akzentfläche / Band #ff4fc3
Signal kräftig (Hover, Linien, Schatten, Text) #f500a8
Flieder hell (Karten, ruhige Bänder) #F8F6F9
Alles hängt an den Variablen --sh-* und --hp-*, die Umstellung ist damit
eine reine Variablensache und in Minuten wieder zu drehen.
Kontrast auf Weiß: #ff3eb5 3,2:1 (trägt die großen Wörter), #f500a8 3,9:1,
#ff4fc3 2,9:1 (Fläche, nicht Text), #f500a8 6,3:1 (Text). Auf der dunklen
Fläche: #ff3eb5 6,0:1, #f500a8 5,0:1, #ff4fc3 6,6:1.
========================================================================= */
:root { --sh-signal-strong: #f500a8; }
.homepage-content { --hp-signal-strong: #f500a8; }
/* Text auf pinken Flächen: fast schwarz. Weiß käme auf #ff3eb5 nur auf 3,5:1,
fast schwarz auf 6,1:1 — und das ist das klassische Neonpaar. */
.header-cta,
.sh20-signal-ticker,
.sh20-newsletter,
.sh20-ehr-teaser,
.sh20-ehrenamtsrechner__button,
.sh20-contact-form__submit:hover,
.footer-cta h2 .signal {
color: #0d0f0e !important;
}
/* Hover auf den Pinkflächen: der kräftigere Ton. */
.header-cta:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.button:hover,
.sh20-ehrenamtsrechner__button:hover,
.sh20-contact-form__submit:hover,
.sh20-conversion__item:hover {
border-color: var(--sh-signal-strong) !important;
background: var(--sh-signal-strong) !important;
color: #0d0f0e !important;
}
/* Das "≠" im Begriffspaar-Abschnitt auf der dunklen Fläche: der kräftige Ton
liest sich dort mit 5,0:1 gut und ist präsenter als das helle Signalpink. */
.homepage-content .sh20-statements__word2 { color: var(--hp-signal-strong); }
/* =========================================================================
1.20.0 — Stringent pink, Kacheln mit Fläche, Textmarker zurück
========================================================================= */
/* 1) Kein Dunkellila mehr. Die Akzente bleiben in der Pinkfamilie:
Signal (Flächen, Marker, Buttons) #ff3eb5
Signal kräftig (Hover, aktiv) #f500a8 → jetzt auch für Hover,
Linien und Schatten
Signal hell (auf dunklem Grund) #ff4fc3 → glüht dort erst richtig
Flieder hell (Karten, ruhige Bänder) #F8F6F9
--sh-blue war der letzte Lila-Rest an Hover-Zuständen, Linien und Schatten
im ganzen Theme — er zeigt jetzt auf das kräftige Pink. */
:root { --sh-blue: #f500a8; }
.homepage-content {
--hp-signal-deep: #f500a8;
/* Das "≠" und die Akzentwörter im dunklen Abschnitt: der helle Pinkton
leuchtet auf fast schwarzem Grund (6,6:1), das kräftige Pink wirkt dort
stumpfer (5,0:1). */
--hp-signal-strong: #ff4fc3;
}
/* 2) Hero: Der eingetippte Begriff ist wieder mit dem Textmarker hinterlegt
statt unterstrichen — so wie vorher. */
.homepage-content .hp-manifesto .signal,
.homepage-content .hp-manifesto .signal em {
border-bottom: 0;
}
.homepage-content .hp-manifesto .signal {
padding: .02em .16em;
background: var(--hp-signal);
color: #0d0f0e;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* 3) Kacheln. Sie waren weiß und blieben beim Überfahren weiß. Jetzt liegen
sie auf dem hellen Fliedergrund und füllen sich beim Überfahren mit Pink —
Text darin wird fast schwarz, damit er lesbar bleibt. */
.homepage-content .hp-pub-card { background: var(--hp-paper-2); }
.homepage-content .hp-pub-card:hover,
.homepage-content .hp-pub-card:focus-within,
.homepage-content .hp-index-row:hover,
.homepage-content .hp-index-row:focus-visible,
.site-main .sh20-pub-card--linked:hover {
background: #ff4fc3;
color: #0d0f0e;
}
.homepage-content .hp-pub-card:hover .hp-pub-tag,
.homepage-content .hp-pub-card:hover p,
.homepage-content .hp-pub-card:hover .hp-pub-meta,
.homepage-content .hp-pub-card:hover h3,
.homepage-content .hp-pub-card:hover h3 a,
.homepage-content .hp-index-row:hover .hp-index-num,
.homepage-content .hp-index-row:hover .hp-index-title,
.homepage-content .hp-index-row:hover .hp-index-desc {
color: #0d0f0e;
}
.homepage-content .hp-pub-card:hover .hp-pub-meta { border-top-color: rgba(13, 15, 14, .25); }
/* =========================================================================
1.23.0 — Textmarker ohne Unterstrich, leerer Marker, zweiter Button
========================================================================= */
/* 1) Der eingetippte Begriff steht als ….
Die Unterstreichung saß am em, also am Elternelement — deshalb war sie
zusätzlich zum Marker zu sehen. Jetzt trägt nur noch der Marker die
Betonung. */
.homepage-content .hp-manifesto em { border-bottom: 0; }
/* 2) Während die Schreibmaschine löscht, ist der Marker kurz leer und stand
als pinker Kasten ohne Inhalt da. Leer zeigt er keine Fläche. */
.homepage-content .hp-manifesto .signal:empty {
padding: 0;
background: none;
}
/* 3) Zweiter Button im Hero. Er war weiß mit Rahmen und füllte sich beim
Überfahren schwarz — das war die alte Logik des Themes. Jetzt füllt er sich
mit dem Signalton, wie die Kacheln es auch tun. */
.homepage-content .hp-btn--ghost:hover,
.homepage-content .hp-btn--ghost:focus-visible {
background: var(--hp-signal);
border-color: var(--hp-signal);
color: var(--hp-ink);
}
/* =========================================================================
1.24.0 — Begriffspaare bündig, „Träger:in." markiert
========================================================================= */
/* 1) Die Begriffspaare hingen eine Randspalte zu weit links.
Ursache: .sh20-statements__pair ist absolut positioniert, und für absolut
positionierte Elemente ist der Bezugsrahmen die Padding-Box der Bühne. Der
Ruheplatz links liegt damit am äußeren Rand der Bühne — also links neben der
Randspalte, die die Überschrift und alle anderen Abschnitte einhalten.
Mit ausdrücklichen Abständen sitzen die Wörter auf derselben Fluchtlinie. */
.homepage-content .sh20-statements__pair {
left: var(--hp-gutter);
right: var(--hp-gutter);
width: auto;
}
/* 2) „Träger:in." im Trägernetz war unterstrichen, die Betonung im Hero ist
ein Textmarker. Jetzt ist es dieselbe Sprache: markiert statt unterstrichen. */
.homepage-content .hp-traeger h2 em {
padding: .02em .16em;
border-bottom: 0;
background: var(--hp-signal);
color: var(--hp-ink);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* =========================================================================
1.25.0 — Fließtext unter Abschnittsüberschriften auf Seitenbreite
========================================================================= */
/* Der Text unter einer Überschrift war auf Lesebreite begrenzt (42/62/70ch)
und endete deshalb lange vor dem rechten Rand. Er läuft jetzt über die
volle Breite der Seite. Betrifft die Einleitung unter „Was wir tun.", den
Absatz unter „Keine Zielgruppe. Träger:in." und den Kooperationssatz im
Footer. Bewusst begrenzt bleiben die Zitate und der Erklärsatz unter
„Strukturelle Fragen." — dort trägt die kürzere Zeile die Aussage. */
.homepage-content .hp-index-head p,
.homepage-content .hp-traeger-side p,
.footer-cta__lead {
max-width: none;
}
/* =========================================================================
1.26.0 — Abstand über dem Textmarker, damit keine Unterlänge hineinschneidet
========================================================================= */
/* In „Keine Zielgruppe. Träger:in." traf die Unterlänge des g aus der ersten
Zeile in das pinke Feld der zweiten Zeile: Die Zeilenhöhe war mit 1,04 enger
als die Schrift selbst hoch ist, dadurch überlappen sich die Schreibflächen
zweier Zeilen. Mit mehr Zeilenhöhe liegt die Unterlänge wieder über dem
Marker. */
.homepage-content .hp-traeger h2 { line-height: 1.22; }
/* =========================================================================
1.27.0 — Palette festgeschrieben, Footer in Pink
========================================================================= */
/* 1) Die Palette gilt ab jetzt fest. Grund: Die Farben werden zusätzlich als
Inline-CSS im Kopf der Seite ausgegeben. Dort stand auf der Live-Seite noch
ein Wert aus einer früheren Fassung, und weil dieses Inline-CSS später im
Dokument steht als dieses Stylesheet, hatte es Vorrang: Header-Button und
Linien erschienen violettblau, obwohl die Palette hier Pink vorgibt.
Mit !important gewinnt die Palette des Themes in jedem Fall. */
:root {
--sh-signal: #ff3eb5 !important;
--sh-blue: #f500a8 !important;
--sh-rose: #ff4fc3 !important;
--sh-ink: #ffffff !important;
--sh-paper: #0d0f0e !important;
}
/* 2) Der Footer steht in Pink. Text und Wortmarke sind fast schwarz, damit
alles klar lesbar bleibt (6,1:1 auf dem Signalton). */
.site-footer,
.site-footer .footer-cta {
background: var(--sh-signal);
color: #0d0f0e;
}
.site-footer .footer-cta h2,
.site-footer .footer-cta__lead,
.site-footer .footer-intro p,
.site-footer .footer-widget__title,
.site-footer .footer-column .menu > li > a,
.site-footer .footer-bottom,
.site-footer .footer-bottom .menu a,
.site-footer p,
.site-footer a {
color: #0d0f0e;
}
.site-footer .footer-cta .eyebrow { color: rgba(13, 15, 14, .78); }
.site-footer .footer-cta .eyebrow::before { background: #0d0f0e; }
/* Der Marker hinter „Kooperation." war pink auf pink — jetzt umgekehrt:
schwarze Fläche, pinke Schrift. */
.site-footer .footer-cta h2 .signal {
background: #0d0f0e;
color: var(--sh-signal);
}
.site-footer .footer-bottom,
.site-footer .footer-bottom__top { border-top-color: rgba(13, 15, 14, .25); }
.site-footer a:hover { color: #0d0f0e; text-decoration: underline; }
/* 3) Sicherheitsnetz für die beiden Stellen, die auf der Live-Seite violettblau
waren. Falls im Customizer unter „Zusätzliches CSS" noch etwas steht, das
diese Elemente färbt, gewinnt hier die Palette: eigener Selektor, !important
und späteste Stelle im Stylesheet. */
.site-header .header-cta {
border-color: var(--sh-signal) !important;
background: var(--sh-signal) !important;
}
.site-header .header-cta:hover,
.site-header .header-cta:focus-visible {
border-color: var(--sh-blue) !important;
background: var(--sh-blue) !important;
}
.site-footer .footer-cta .eyebrow::before,
.eyebrow::before { background: var(--sh-signal) !important; }
.site-footer .footer-cta .eyebrow::before { background: #0d0f0e !important; }
/* =========================================================================
1.28.0 — Unterseiten: Text unter der Überschrift, Kacheln in Pink,
Kreis entfernt, Menü und Filter in Pink
========================================================================= */
/* 1) Kopfbereich der Unterseiten: Überschrift und Einleitung standen in zwei
Spalten nebeneinander. Wie auf der Startseite steht die Einleitung jetzt
unter der Überschrift und läuft über die Seitenbreite. */
.sh20-bridge { display: block; }
.sh20-bridge p:not(.eyebrow) { max-width: none; margin-top: 1.4rem; }
.sh20-bridge h2 + p:not(.eyebrow) { margin-top: 1.4rem; }
/* 2) Der dekorative Kreis rechts im Kopfbereich der Akademie und der
Kursseiten ist entfernt. */
.academy-page-header::after,
.course-landing-header::after { content: none; }
/* 3) Alle Kacheln füllen sich beim Überfahren mit Pink — Text darin fast
schwarz, damit er lesbar bleibt. Gilt für die Publikationsformen, die
Personen- und Themenkacheln, Projektkarten, Statusblöcke, die Filterleiste
und die Handlungsblöcke. */
.sh20-audience__card:hover,
.sh20-audience__card:focus-within,
.sh20-project-card:hover,
.sh20-project-card:focus-within,
.sh20-formats__list li:hover,
.sh20-status-block:hover,
.sh20-cta-block:hover,
.sh20-filter-pill:hover,
.sh20-filter-pill:focus-visible,
.sh20-filters a:hover {
background: #ff4fc3;
color: #0d0f0e;
}
.sh20-audience__card:hover .sh20-audience__state,
.sh20-audience__card:hover .sh20-audience__num,
.sh20-audience__card:hover .sh20-audience__title,
.sh20-audience__card:hover p,
.sh20-project-card:hover h3,
.sh20-project-card:hover p,
.sh20-cta-block:hover h2,
.sh20-cta-block:hover p {
color: #0d0f0e;
}
.sh20-filter-pill:hover,
.sh20-filter-pill:focus-visible {
border-color: var(--sh-signal);
color: #0d0f0e;
}
/* 4) Menü oben: Der Hover war violett (aus dem eigenen CSS im Customizer).
Hier gilt die Palette. */
.primary-navigation a:hover,
.primary-navigation a:focus-visible,
.primary-navigation .current-menu-item > a,
.primary-navigation .current-menu-ancestor > a {
color: var(--sh-signal) !important;
}
/* 5) Insights: „Analysen, Einordnungen, Perspektiven." stand auf 20 Zeichen
begrenzt und brach dadurch in drei Zeilen. Auf dem Rechner läuft die Zeile
in einer Zeile über die Seitenbreite, auf dem Handy darf sie umbrechen. */
.insights-tagline { max-width: none; }
@media (max-width: 700px) {
.insights-tagline { font-size: clamp(1.15rem, 5.4vw, 1.5rem); line-height: 1.25; }
}
/* 6) Kontaktformular: Es saß auf einer schmaleren Breite als der übrige
Seiteninhalt. Jetzt bündig mit der Seite. */
.sh20-contact__form-shell,
.sh20-contact form { max-width: none; }
/* =========================================================================
1.29.0 — Aus dem Customizer ins Theme geholt, Lehrformate als Kacheln
========================================================================= */
/* 1) Die Auszeichnungsschrift bleibt Inter — so wie die Seite jetzt aussieht.
Damit ist die Entscheidung aus dem eigenen CSS im Theme hinterlegt und im
Customizer weiterhin umstellbar. */
:root { --sh-display-font: Inter, Arial, Helvetica, sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--sh-display-font); }
/* 2) WordPress zentriert Kinder von „is-layout-constrained"-Blöcken über
automatische Außenabstände. Für die Startseite war das schon geregelt, für
die Unterseiten nicht — dort stand die Korrektur bisher im eigenen CSS. */
.site-main .is-layout-constrained > * {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
/* 3) Lehrformate: aus der Aufzählungszeile werden sieben Kacheln mit Nummer.
Beim Überfahren füllen sie sich pink, wie alle anderen Kacheln. */
.sh20-formats__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1px;
background: var(--sh-line);
border: 1px solid var(--sh-line);
}
.sh20-formats__tile {
padding: 1.4rem 1.2rem 1.7rem;
background: #f8f6f9;
transition: background .16s ease;
}
.sh20-formats__tile:hover { background: #ff4fc3; }
.sh20-formats__num {
display: block;
font-size: .68rem;
font-weight: 800;
letter-spacing: .1em;
color: var(--sh-signal);
}
.sh20-formats__tile:hover .sh20-formats__num { color: #0d0f0e; }
.sh20-formats__name {
display: block;
margin-top: .55rem;
font-family: var(--sh-display-font);
font-size: clamp(1.02rem, 1.5vw, 1.3rem);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.15;
color: var(--sh-paper);
}
.sh20-formats__tile:hover .sh20-formats__name { color: #0d0f0e; }
/* =========================================================================
1.30.0 — Footer: Pink beginnt an der Wortmarke
========================================================================= */
/* Vorher lag das Pink auf dem Kooperationsblock. Der sitzt aber im zentrierten
Seitenraster (.site-shell), also füllte die Farbe nur diesen inneren Kasten —
es sah aus wie ein aufgeklebtes Feld, mit Weiß ringsum.
Jetzt liegt das Pink auf dem Footer selbst, also über die volle Breite, und
der Kooperationsblock bleibt weiß. Damit beginnt der pinke Abschnitt genau
an der Wortmarke „sh2.0" und geht bis zur Unterkante. */
.site-footer {
background: var(--sh-signal);
overflow-x: clip;
}
.site-footer .footer-cta {
background: #ffffff;
max-width: none;
margin-inline: calc(50% - 50vw);
padding-inline: calc(50vw - 50% + var(--sh-gutter));
}
/* Marker und Linie im Kooperationsblock stehen wieder auf Weiß, dort gilt der
Signalton wie überall. */
.site-footer .footer-cta h2 .signal {
background: var(--sh-signal);
color: #0d0f0e;
}
.site-footer .footer-cta .eyebrow::before { background: var(--sh-signal) !important; }
.site-footer .footer-cta .eyebrow { color: rgba(13, 15, 14, .78); }
/* =========================================================================
1.31.0 — Hero: mehr Luft zwischen „Selbsthilfe braucht" und dem Wort darunter
========================================================================= */
/* Die Zeilenhöhe der Hero-Überschrift war 1,04 — die zweite Zeile mit dem
eingetippten Wort klebte dadurch an der ersten. Ein leicht größerer Abstand
gibt der Zeile ihren eigenen Raum, ohne die Kürze der Komposition zu
verlieren. */
.sh20-manifesto h1 { line-height: 1.14; }
@media (max-width: 900px) {
.sh20-manifesto h1 { line-height: 1.12; }
}
/* =========================================================================
1.32.0 — Footer: Pink ab der Wortmarke, ohne die Flucht zu verschieben;
Hero etwas höher
========================================================================= */
/* 1) Der Kooperationsblock sitzt wieder in seinem normalen Rahmen. Der
Full-Bleed-Trick aus 1.30.0 hatte ihn breiter als die übrigen Abschnitte
gemacht — deshalb wirkte er nach rechts verschoben. */
.site-footer .footer-cta {
background: transparent;
max-width: none;
margin-inline: auto;
padding-inline: 0;
}
/* 2) Das Pink liegt auf der Wortmarken-Zeile und der Rechtszeile und wird über
eine Schattenfläche nach außen gezogen (clip-path begrenzt sie auf die Höhe
dieser Zeilen). So läuft die Farbe über die volle Breite, ohne Rahmen,
Breiten oder Innenabstände zu verändern — der Inhalt bleibt bündig. */
.site-footer { background: #ffffff; padding-bottom: 0; }
.site-footer .footer-grid,
.site-footer .footer-bottom {
background: var(--sh-signal);
box-shadow: 0 0 0 100vmax var(--sh-signal);
clip-path: inset(0 -100vmax);
}
.site-footer .footer-bottom { padding-bottom: 1.3rem; }
/* 3) Hero der Startseite: etwas mehr Höhe, damit der Kopfbereich nicht
gedrungen wirkt. Der Inhalt sitzt unten, die zusätzliche Höhe liegt oben. */
.sh20-manifesto {
min-height: min(880px, calc(100vh - 78px));
padding-top: clamp(6rem, 12vw, 11rem);
}
/* =========================================================================
1.33.0 — Footer: Pink bis zur Unterkante
========================================================================= */
/* Der pinke Abschnitt endete bisher oberhalb der Rechtszeile: Die Rechtszeile
saß auf Weiß, darunter lag noch ein weißer Rest. Jetzt liegt das Pink auf der
ganzen Footer-Fläche und reicht bis zur letzten Kante.
Der Kooperationsblock oben bleibt weiß — und zwar über die ganze Breite:
Er bekommt Weiß als Fläche plus Weiß als nach außen gezogene Schattenfläche,
die per clip-path auf seine Höhe begrenzt ist. So entstehen keine weißen
Streifen neben dem Block und keine Verschiebung der Flucht. */
.site-footer {
background: var(--sh-signal) !important;
padding-bottom: 1.3rem;
overflow-x: visible;
}
.site-footer .footer-cta {
background: #ffffff !important;
box-shadow: 0 0 0 100vmax #ffffff;
clip-path: inset(0 -100vmax);
}
.site-footer .footer-grid,
.site-footer .footer-bottom {
background: transparent !important;
box-shadow: none;
clip-path: none;
}
/* Rechtszeile: Text fast schwarz auf dem Pink statt des alten Grautons. */
.site-footer .footer-bottom,
.site-footer .footer-bottom__top,
.site-footer .footer-bottom .menu a { color: #0d0f0e; }
.site-footer .footer-bottom { border-top-color: rgba(13, 15, 14, .25); }
.site-footer .footer-bottom__top:hover { color: #0d0f0e; text-decoration: underline; }
/* =========================================================================
1.34.0 — Ausgangslage ohne Kursiv, Gründerin linksbündig,
Kooperationsblock in zartem Pink
========================================================================= */
/* 1) Ausgangslage: Die fünf Aussagen standen kursiv und in Lese-Größe. Kursiv
ist raus, die Schrift eine Stufe kleiner — ruhiger, weniger dominant. */
.homepage-content .hp-story-text blockquote {
font-style: normal;
font-weight: 450;
font-size: clamp(1.12rem, 1.65vw, 1.42rem);
line-height: 1.4;
}
/* 2) Gründerin-Abschnitt: Der Textblock saß als 62-Zeichen-Kasten mittig auf
der Seite — dadurch wirkte der Abschnitt wie ein loses Feld in der Mitte.
Der Kasten läuft jetzt wieder in der normalen Seitenbreite, begrenzt ist nur
noch die Zeilenlänge des Textes; damit steht alles linksbündig. */
.homepage-content .hp-credibility-single { max-width: none; }
.homepage-content .hp-credibility-single > * { max-width: 62ch; }
/* 3) Footer: Die dicke pinke Linie über dem Kooperationsblock ist weg.
Stattdessen liegt unter dem Block ein zartes Pink (~10 % des Signaltons),
das sich über die ganze Breite zieht — der Übergang zum kräftigen Pink des
Footers entsteht dadurch aus der Fläche statt aus einer Linie. */
.site-footer { border-top: 0 !important; }
.site-footer .footer-cta {
background: #ffe6f6 !important;
box-shadow: 0 0 0 100vmax #ffe6f6;
}
/* =========================================================================
1.35.0 — Footer durchgehend im Signalton
========================================================================= */
/* Die zarte Fläche im Kooperationsblock las sich als weiße Lücke und ist
entfernt. Damit liegt der Footer durchgehend im Signalton: Kooperationsband,
Wortmarken-Zeile und Rechtszeile als eine Fläche, ohne helle Zwischenzone und
ohne Linie. Der Übergang von den weißen Inhaltsabschnitten zum Footer ist die
klare Kante, die der Abschnitt ohnehin braucht. */
.site-footer { background: var(--sh-signal) !important; }
.site-footer .footer-cta {
background: transparent !important;
box-shadow: none !important;
clip-path: none !important;
}
.site-footer .footer-cta h2,
.site-footer .footer-cta__lead { color: #0d0f0e; }
/* Auf dem Signalton ist der Marker umgekehrt: schwarze Fläche, pinke Schrift.
Die kleine Linie neben „Kooperation." steht in Schwarz. */
.site-footer .footer-cta h2 .signal {
background: #0d0f0e;
color: var(--sh-signal);
}
.site-footer .footer-cta .eyebrow,
.site-footer .footer-cta .eyebrow::before { color: rgba(13, 15, 14, .8); }
.site-footer .footer-cta .eyebrow::before { background: #0d0f0e !important; }
/* =========================================================================
1.35.1 — Logo ohne weißen Kasten, auch auf Pink
========================================================================= */
/* Das im WordPress-Customizer hinterlegte Logo ist ein Bild mit weißem
Hintergrund. Im Header (weiße Fläche) fiel das nie auf, im pinken Footer
erschien es als heller Kasten hinter der Wortmarke.
`mix-blend-mode: multiply` verrechnet das Bild mit der Fläche darunter:
Weiß verschwindet, Schwarz bleibt. Die Wortmarke steht damit auf jeder
Hintergrundfarbe sauber — ohne dass ein freigestelltes Bild nötig wäre. */
.site-header .custom-logo,
.site-header .custom-logo-link img,
.site-header .sh20-default-logo img,
.site-footer .custom-logo,
.site-footer .custom-logo-link img,
.site-footer .footer-mark img,
.sh20-default-logo img {
mix-blend-mode: multiply;
}
/* Fallback ohne Aufweichung: Die im Theme liegende, freigestellte Wortmarke
bleibt unverändert deckend. */
.site-footer .footer-mark img[src*="sh20-wordmark"] { mix-blend-mode: normal; }
/* =========================================================================
1.36.0 — Logo im Header vollständig sichtbar
========================================================================= */
/* Die Wortmarke ist breiter als das bisherige Logo (900 x 289). Damit sie
nirgends beschnitten wird: Höhe frei skalieren, Breite automatisch,
Seitenverhältnis erhalten, und kein Container darf überlaufen. */
.custom-logo,
.site-header .custom-logo,
.site-header .custom-logo-link img {
max-height: 44px;
height: auto;
width: auto;
max-width: min(320px, 60vw);
object-fit: contain;
}
.site-branding,
.custom-logo-link { overflow: visible; }
/* =========================================================================
1.37.0 — Hero: keine Kursivstellung, beide Zeilen gleich gewichtet
========================================================================= */
/* Ursache: Die Überschrift war als Ganzes kursiv gesetzt (font-style: italic),
nur das eingetippte Wort stand aufrecht, weil das es auf normal
zurückdreht. Dadurch las sich „Selbsthilfe braucht" leichter und wirkte
kleiner als die markierte Zeile darunter.
Jetzt: beide Zeilen aufrecht und mit gleichem Schnitt (460). */
.homepage-content .hp-manifesto {
font-style: normal;
font-weight: 460;
line-height: 1.14;
}
.homepage-content .hp-manifesto em {
font-style: normal;
font-weight: 460;
border-bottom: 0;
}
@media (max-width: 900px) {
.homepage-content .hp-manifesto { line-height: 1.12; }
}
/* Das eingetippte Wort bleibt markiert (Signalfläche, Text dunkel) — gleiche
Anlage wie bisher, nur mit klarer Zuordnung zur aktuellen Hero-Klasse. */
.homepage-content .hp-manifesto .signal {
background: var(--sh-signal);
color: var(--sh-ink, #0d0f0e);
padding: .02em .1em;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* =========================================================================
1.38.0 — Kooperationsblock in zartem Rosa, Intro-Texte über die Seitenbreite
========================================================================= */
/* Der Kooperationsblock lag zuletzt im vollen Signalton — das war zu viel und
ist zurückgenommen. Er bekommt jetzt ein zartes, aber deutlich sichtbares
Rosa (#ffd0ea). Volle Breite über die Schattenfläche, per clip-path auf die
Höhe des Blocks begrenzt — der Inhalt bleibt also auf der Seitenflucht. */
.site-footer .footer-cta {
background: #ffd0ea !important;
box-shadow: 0 0 0 100vmax #ffd0ea;
clip-path: inset(0 -100vmax);
}
/* Auf diesem hellen Rosa gilt wieder der Signalton für Marker und Linie. */
.site-footer .footer-cta h2 .signal {
background: var(--sh-signal);
color: #0d0f0e;
}
.site-footer .footer-cta .eyebrow::before { background: var(--sh-signal) !important; }
.site-footer .footer-cta .eyebrow { color: rgba(13, 15, 14, .8); }
/* Intro-Texte unter Abschnittsüberschriften liefen weiterhin auf Lesebreite
(30 bis 48 Zeichen) — deshalb erreichte der Text im Trägernetz-Abschnitt
nicht die Seitenbreite. Gilt jetzt für alle Abschnitts-Einleitungen
site-weit; Lesetext in FAQ-Antworten und die großen Überschriften bleiben
wie sie sind. */
.site-main .sh20-bridge p:not(.eyebrow),
.site-main .sh20-bridge__copy p:not(.eyebrow),
.site-main .sh20-section-heading p:not(.eyebrow),
.site-main .sh20-pathways__head p:not(.eyebrow),
.site-main .sh20-contact__head p:not(.eyebrow),
.site-main .sh20-membership__copy p:not(.eyebrow),
.site-main .insights-lead,
.site-main .sh20-audience__head p:not(.eyebrow),
.site-main .sh20-analyses__head p:not(.eyebrow),
.site-main .sh20-ehr-teaser p:not(.eyebrow),
.site-main .sh20-shop-teaser__head p:not(.eyebrow),
.site-main .sh20-certification__copy p:not(.eyebrow) {
max-width: none !important;
}
/* =========================================================================
1.39.0 — Abschnittsblöcke laufen über die volle Seitenbreite
========================================================================= */
/* Der Text im Trägernetz-Abschnitt endete weiterhin vorzeitig. Neben den
Absätzen trugen auch die Unterzeile (.sh20-project-subtitle) und die
Textgruppe selbst noch Breitenbegrenzungen aus früheren Fassungen. Statt sie
einzeln zu suchen, wird hier für den gesamten Abschnittsblock die
Zeilenbreite freigegeben. Betrifft alle Seiten mit .sh20-bridge: Trägernetz,
Institut, Forschung, Lehre, Akademie und Kontakt. */
.site-main .sh20-bridge,
.site-main .sh20-bridge > *,
.site-main .sh20-bridge__copy,
.site-main .sh20-bridge__copy > *,
.site-main .sh20-bridge p,
.site-main .sh20-bridge h2,
.site-main .sh20-bridge h3,
.site-main .sh20-bridge .sh20-project-subtitle,
.site-main .sh20-bridge__subhead {
max-width: none !important;
}
.site-main .sh20-bridge .sh20-bridge__copy { width: 100%; }
/* =========================================================================
1.40.0 — Wissenschaftlicher Beirat
========================================================================= */
/* Kacheln des Beirats. Solange kein Foto hinterlegt ist, steht in der
Bildfläche ein Platzhalter mit den Initialen — in der Kartenfarbe der Seite,
damit keine Lücke und kein Austauschbild nötig ist. */
.sh20-beirat__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
gap: 1px;
margin-top: 2.6rem;
border: 1px solid var(--sh-line);
background: var(--sh-line);
}
.sh20-beirat__card {
padding: 1.4rem 1.2rem 1.6rem;
background: #f8f6f9;
transition: background .16s ease;
}
.sh20-beirat__card:hover { background: #ff4fc3; }
.sh20-beirat__media {
width: 100%;
aspect-ratio: 1 / 1;
margin-bottom: 1.1rem;
overflow: hidden;
background: #ffffff;
}
.sh20-beirat__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh20-beirat__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #ffe6f6;
color: #0d0f0e;
font-family: var(--sh-display-font);
font-size: 2rem;
font-weight: 500;
letter-spacing: .02em;
}
.sh20-beirat__card:hover .sh20-beirat__placeholder { background: #ffffff; }
.sh20-beirat__name {
margin: 0;
color: var(--sh-paper);
font-family: var(--sh-display-font);
font-size: 1.12rem;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.25;
}
.sh20-beirat__text {
margin-top: .6rem;
color: var(--sh-muted);
font-family: var(--sh-body-font);
font-size: .92rem;
line-height: 1.5;
}
.sh20-beirat__text p { margin: 0 0 .5rem; }
.sh20-beirat__card:hover .sh20-beirat__name,
.sh20-beirat__card:hover .sh20-beirat__text { color: #0d0f0e; }
.sh20-beirat__empty {
margin: 2.6rem 0 0;
padding: 1.6rem 1.4rem;
border: 1px solid var(--sh-line);
background: #f8f6f9;
color: var(--sh-muted);
font-family: var(--sh-body-font);
font-size: 1rem;
line-height: 1.5;
}
/* =========================================================================
1.41.0 — Beirat: Expertise-Zeile und Governance-Block
========================================================================= */
/* Kleine Zeile über dem Namen: die Expertise des Mitglieds. Sie kommt aus dem
Feld „Auszug" im Dashboard und ist frei formulierbar ("Ethik",
"Erfahrungsexpertise", "Organisationsentwicklung" …). */
.sh20-beirat__tag {
display: block;
margin: 0 0 .4rem;
color: var(--sh-signal);
font-family: var(--sh-body-font);
font-size: .7rem;
font-weight: 700;
letter-spacing: .1em;
line-height: 1.3;
text-transform: uppercase;
}
.sh20-beirat__card:hover .sh20-beirat__tag { color: #0d0f0e; }
/* Governance des Beirats: eine ruhige Liste aus Stichwort und Erklärung.
Bewusst ohne Kästen — die Transparenz kommt aus der Klarheit, nicht aus
Rahmen. */
.sh20-beirat__rules {
margin: 1.8rem 0 0;
border-top: 1px solid var(--sh-line);
}
.sh20-beirat__rules dt {
margin: 0;
padding: 1.2rem 0 .35rem;
color: var(--sh-paper);
font-family: var(--sh-display-font);
font-size: 1.04rem;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.3;
}
.sh20-beirat__rules dd {
margin: 0;
padding: 0 0 1.2rem;
border-bottom: 1px solid var(--sh-line);
color: var(--sh-muted);
font-family: var(--sh-body-font);
font-size: .95rem;
line-height: 1.55;
}
/* =========================================================================
1.42.0 — Rosa Band im Footer repariert, Textbreiten auf den letzten Seiten
========================================================================= */
/* 1) Das rosa Band im Kooperationsblock wurde nicht gezeichnet.
Ursache: In 1.35.0 standen dort noch `box-shadow: none !important` und
`clip-path: none !important`, um die damals durchgehend pinke Fläche zu
erzwingen. Diese !important-Werte haben die späteren Regeln aus 1.38.0
ausgehebelt — das Rosa lag deshalb nur im inneren Kasten des Blocks und
nicht als Band über die Seitenbreite.
Jetzt dieselbe Technik wie beim weißen Band in 1.33.0, aber mit Vorrang:
Fläche plus nach außen gezogene Schattenfläche, per clip-path auf die Höhe
des Blocks begrenzt. Nur so bleibt die Seitenflucht erhalten. */
.site-footer .footer-cta {
background: #ffd0ea !important;
box-shadow: 0 0 0 100vmax #ffd0ea !important;
clip-path: inset(0 -100vmax) !important;
-webkit-clip-path: inset(0 -100vmax) !important;
}
/* 2) Textbreiten: Die früheren Regeln griffen nur für .sh20-bridge. Zwei
Abschnitte standen weiterhin auf Lesebreite — der Trägernetz-Teaser der
Startseite (Unterzeile auf 24 Zeichen) und die Seite Trägernetzwerk
(Überschrift auf 12, Text auf 43 Zeichen). Beide sind hier freigegeben. */
.homepage-content [class*="hp-traeger"],
.homepage-content [class*="hp-traeger"] p,
.homepage-content [class*="hp-traeger"] > * {
max-width: none !important;
}
.site-main .sh20-membership,
.site-main .sh20-membership > *,
.site-main .sh20-membership h2,
.site-main .sh20-membership p,
.site-main .sh20-membership__copy,
.site-main .sh20-membership__copy > *,
.site-main .sh20-membership__copy p {
max-width: none !important;
}
/* =========================================================================
1.45.0 — Mehr Luft in den Abschnitten
========================================================================= */
/* Der schwarze Abschnitt mit dem rotierenden Spruch („Spannungsfelder") bekam
oben und unten zu wenig Raum. Die Innenabstände werden deshalb deutlich
erhöht: vorher 5 bis 8 rem, jetzt 7,5 bis 12 rem. */
.homepage-content .sh20-statements {
padding-top: clamp(7.5rem, 15vw, 12rem) !important;
padding-bottom: clamp(7.5rem, 15vw, 12rem) !important;
}
/* 1.46.0 — Korrektur: Nicht „Was wir tun" und der Analysen-Abschnitt der
Forschungsseite waren gemeint, sondern der Publikations-Abschnitt und der
Abschnitt zur Gründerin auf der Startseite. Die beiden zuvor versehentlich
vergrößerten Abschnitte stehen deshalb wieder auf ihrem ursprünglichen Maß:
sie haben oben keine gesonderte Regel mehr, es gilt wieder der Wert des
Abschnitts selbst. */
/* Publikationen auf der Startseite: mehr Höhe, damit die Kartenreihe atmet. */
.homepage-content .hp-pubs {
padding-top: clamp(6.5rem, 13vw, 10.5rem) !important;
padding-bottom: clamp(6.5rem, 13vw, 10.5rem) !important;
}
/* Gründerin und Leitung auf der Startseite: ebenfalls mehr Raum nach oben und
unten. */
.homepage-content .hp-credibility {
padding-top: clamp(6.5rem, 13vw, 10.5rem) !important;
padding-bottom: clamp(6.5rem, 13vw, 10.5rem) !important;
}
/* =========================================================================
1.47.0 — Governance des Beirats zum Aufklappen
========================================================================= */
/* Die Governance-Liste stand sperrig unter den Personen. Sie liegt jetzt in
einem aufklappbaren Bereich: eine ruhige Zeile, die sich öffnet, wenn man
sie braucht. Kein JavaScript, nur — funktioniert auch ohne
Skripte und lässt sich am Telefon genauso bedienen. */
.sh20-beirat__governance {
margin-top: 2.6rem;
border-top: 1px solid var(--sh-line);
border-bottom: 1px solid var(--sh-line);
}
.sh20-beirat__governance summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0;
padding: 1.25rem 0;
color: var(--sh-paper);
font-family: var(--sh-display-font);
font-size: 1.16rem;
font-weight: 500;
letter-spacing: -.01em;
line-height: 1.3;
cursor: pointer;
list-style: none;
}
.sh20-beirat__governance summary::-webkit-details-marker { display: none; }
.sh20-beirat__governance summary::marker { content: ""; }
.sh20-beirat__governance summary::after {
content: "+";
flex: 0 0 auto;
color: var(--sh-signal);
font-family: var(--sh-body-font);
font-size: 1.4rem;
font-weight: 700;
line-height: 1;
}
.sh20-beirat__governance[open] summary::after { content: "–"; }
.sh20-beirat__governance summary:hover { color: var(--sh-signal); }
.sh20-beirat__governance .sh20-beirat__rules { margin-top: 0; border-top: 0; }
.sh20-beirat__governance .sh20-beirat__rules dt { padding-top: 1rem; }
/* Der frühere Leerzustand-Hinweis ist entfallen (1.47.0). */
.sh20-beirat__empty { display: none; }
/* =========================================================================
1.48.0 — Unterseitenköpfe, Kachel-Hover, Button-Einheit
========================================================================= */
/* 1) Abstände im Unterseitenkopf.
Vorher: zwischen Menüleiste und Seitentitel zu wenig, zwischen Titel und
erster Überschrift zu viel. Genau umgekehrt eingestellt:
- Der Kopf bekommt deutlich mehr Raum nach oben.
- Die erste Sektion darunter startet knapp unter dem Titel, ohne eigenen
großen Innenabstand. */
.site-main .entry-header {
padding-top: clamp(3.75rem, 8vw, 6.5rem) !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
.site-main .entry-header h1 { margin-bottom: 0 !important; }
.site-main .entry-content > :first-child {
padding-top: 1.75rem !important;
margin-top: 0 !important;
}
@media (max-width: 900px) {
.site-main .entry-header { padding-top: 2.75rem !important; }
.site-main .entry-content > :first-child {
padding-top: 1.25rem !important;
}
}
/* 2) Kacheln: bei Mauszeiger Signalton, nicht grau.
Gilt für alle Karten- und Kachelklassen des Themes (__card, __tile, card) —
auf den Unterseiten wie auf der Startseite. Der Text wechselt dabei auf
Tiefschwarz, damit er auf dem Pink lesbar bleibt, und die Rahmenlinien
verschwinden. */
.site-main [class*="__card"]:hover,
.site-main [class*="__tile"]:hover,
.site-main [class*="card"]:hover,
.homepage-content [class*="__card"]:hover,
.homepage-content [class*="card"]:hover {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
}
.site-main [class*="__card"]:hover *,
.site-main [class*="__tile"]:hover *,
.site-main [class*="card"]:hover *,
.homepage-content [class*="__card"]:hover *,
.homepage-content [class*="card"]:hover * {
color: #0d0f0e !important;
}
.site-main [class*="__card"]:hover img,
.site-main [class*="__tile"]:hover img { mix-blend-mode: multiply; }
/* 3) Button-Einheitlichkeit.
Der Button im Abschnitt „Gründerin und Leitung" war weiß mit weißer Schrift
und pinkem Hover. Alle anderen Buttons im Theme sind schwarz mit weißer
Schrift und werden bei Hover pink mit schwarzer Schrift. Der Ausreißer wird
angeglichen. */
.homepage-content .hp-credibility-link {
background: #0d0f0e !important;
border-color: #0d0f0e !important;
color: #ffffff !important;
}
.homepage-content .hp-credibility-link:hover,
.homepage-content .hp-credibility-link:focus-visible {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* =========================================================================
1.49.0 — Alle Buttons einheitlich
========================================================================= */
/* Ursache des letzten weißen Buttons: Im Abschnitt „Silvie Gross" auf der
Institut-Seite steht ein Button in der Outline-Variante (is-style-outline).
Diese Variante war im Theme weiß mit weißer Schrift definiert und wurde beim
Hover pink — sie folgte damit nicht der Regel der übrigen Buttons.
Jetzt gilt für jede Buttonart dieselbe Sprache:
Ruhezustand: schwarze Fläche, weiße Schrift
Hover: Signalton, schwarze Schrift
Erfasst werden die Outline-Variante, der Ghost-Button des Heros und der
vollflächige Standardbutton, dazu alle Element-Buttons in Beiträgen. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link,
.homepage-content .hp-btn--ghost,
.site-main .wp-element-button,
.site-main .wp-block-button__link {
background: #0d0f0e !important;
border: 1px solid #0d0f0e !important;
color: #ffffff !important;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.homepage-content .hp-btn--ghost:hover,
.homepage-content .hp-btn--ghost:focus-visible,
.site-main .wp-element-button:hover,
.site-main .wp-element-button:focus-visible,
.site-main .wp-block-button__link:hover,
.site-main .wp-block-button__link:focus-visible {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* Auf dunklen Flächen bleibt der Ruhezustand lesbar: Der Text steht dort auf
Weiß, weil die Fläche selbst schwarz ist. */
.site-footer .wp-block-button__link,
.site-footer .wp-element-button {
background: #0d0f0e !important;
color: #ffffff !important;
}
/* =========================================================================
1.50.0 — Button-Abstand, kein doppelter Kooperationsblock
========================================================================= */
/* 1) Die beiden Buttons klebten aneinander. WordPress setzt die Knöpfe in
einer Reihe ohne Zwischenraum; hier bekommen sie Abstand und brechen am
Telefon sauber um. */
.sh20-bridge__copy .wp-block-buttons,
.sh20-bridge .wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.sh20-bridge__copy .wp-block-buttons .wp-block-button,
.sh20-bridge .wp-block-buttons .wp-block-button { margin: 0; }
@media (max-width: 600px) {
.sh20-bridge__copy .wp-block-buttons,
.sh20-bridge .wp-block-buttons { gap: .75rem; }
}
/* 2) Der rosa Kooperationsblock sitzt im Footer und erscheint damit auf jeder
Seite — auch auf der Kooperationsseite selbst. Dort doppelt er den Inhalt.
Deshalb wird er genau auf dieser Seite ausgeblendet; überall sonst bleibt er
als Einstieg erhalten. */
body.page-kooperation .footer-cta { display: none !important; }
/* =========================================================================
1.51.0 — Forschung: kein abgeschnittener Titel, Programme in Zeilen
========================================================================= */
/* 1) „Forschungskooperationen" wurde im Abschnitt „Wie wir forschen" am
Kartenrand abgeschnitten.
Ursache: Rasterelemente dürfen nicht unter die Mindestbreite ihres Inhalts
schrumpfen. Ein langes Wort ohne Trennstelle sprengt deshalb die Spalte und
wird vom Rand abgeschnitten. Behoben durch min-width: 0 auf den Rastern
(damit die Spalten wirklich gleich bleiben) und Umbruch innerhalb langer
Wörter. Zusätzlich bricht in dreispaltigen Rastern die Überschrift etwas
kleiner, damit sie bequem passt. */
.site-main .sh20-audience__grid,
.site-main .sh20-audience__grid > *,
.site-main .sh20-audience__card,
.site-main .sh20-formats__grid > * { min-width: 0; }
.site-main .sh20-audience__title,
.site-main .sh20-audience__card p {
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
@media (min-width: 700px) {
.site-main .sh20-audience__grid--3 .sh20-audience__title {
font-size: clamp(.98rem, 1.5vw, 1.22rem);
}
}
/* 2) Forschungsprogramm am Seitenende.
Kacheln in einem dichten Raster passten nicht zur Seite und ließen beim
Hover rechts und links Weißraum stehen. Jetzt: eine ruhige Liste über die
volle Seitenbreite — Name links, Erläuterung rechts, Haarlinie dazwischen.
Beim Überfahren legt sich der Signalton als durchgehendes Band über die
ganze Zeile bis zum Fensterrand, der Text wechselt auf Tiefschwarz. */
.page-forschung .sh20-formats__grid {
display: block;
gap: 0;
border-top: 1px solid var(--sh-line);
background: transparent;
}
.page-forschung .sh20-formats__tile {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: baseline;
column-gap: clamp(1.5rem, 4vw, 3rem);
padding: 1.4rem var(--hp-gutter, 1rem);
background: transparent;
border-bottom: 1px solid var(--sh-line);
}
.page-forschung .sh20-formats__tile:hover,
.page-forschung .sh20-formats__tile:focus-within {
background: var(--sh-signal);
box-shadow: 0 0 0 100vmax var(--sh-signal);
clip-path: inset(0 -100vmax);
-webkit-clip-path: inset(0 -100vmax);
}
.page-forschung .sh20-formats__tile:hover *,
.page-forschung .sh20-formats__tile:focus-within * { color: #0d0f0e !important; }
@media (max-width: 700px) {
.page-forschung .sh20-formats__tile {
grid-template-columns: 1fr;
row-gap: .4rem;
}
}
/* =========================================================================
1.52.0 — Forschung: Titelumbruch und die Abschnitte am Seitenende
========================================================================= */
/* 1) „Forschungskooperationen" in „Wie wir forschen".
Der Abschnitt nutzt .sh20-audience--kinds mit dem dreispaltigen Raster
.sh20-audience__grid--3. Ein 22 Zeichen langes Wort ohne Trennstelle passt
bei der Auszeichnungsgröße nicht in eine Spalte und läuft über den
Rasterrahmen hinaus. Abhilfe in drei Schritten: die Titelzeile darf umbrechen
(auch mitten im Wort), die Rasterkinder dürfen schrumpfen, und in
dreispaltigen Rastern fällt die Auszeichnungsgröße eine Stufe kleiner. */
.sh20-audience--kinds .sh20-audience__grid,
.sh20-audience--kinds .sh20-audience__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh20-audience__grid > *,
.sh20-audience__card { min-width: 0; }
.sh20-audience__title,
.sh20-audience--kinds .sh20-audience__title {
display: block;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
-webkit-hyphens: auto;
}
@media (min-width: 901px) {
.sh20-audience--kinds .sh20-audience__title { font-size: clamp(1.05rem, 1.55vw, 1.45rem); }
}
@media (max-width: 900px) {
.sh20-audience--kinds .sh20-audience__grid,
.sh20-audience--kinds .sh20-audience__grid--3 { grid-template-columns: 1fr; }
}
/* 2) Forschungsprogramme & Projekte.
Die Projektkarte war auf Lesebreite begrenzt (62 ch). Dadurch blieb links
und rechts Weißraum stehen, und beim Überfahren füllte sich nur die schmale
Karte pink. Die Karte läuft jetzt über die Seitenbreite, der Signalton legt
sich als durchgehendes Band über die ganze Zeile. */
.sh20-research-programs .sh20-project-card {
max-width: none;
width: 100%;
margin-top: 2rem;
padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
border: 1px solid var(--sh-line);
background: transparent;
transition: background-color .18s ease, border-color .18s ease;
}
.sh20-research-programs .sh20-project-card:hover,
.sh20-research-programs .sh20-project-card:focus-within {
background: var(--sh-signal);
border-color: var(--sh-signal);
box-shadow: 0 0 0 100vmax var(--sh-signal);
clip-path: inset(0 -100vmax);
-webkit-clip-path: inset(0 -100vmax);
}
.sh20-research-programs .sh20-project-card:hover *,
.sh20-research-programs .sh20-project-card:focus-within * { color: #0d0f0e !important; }
.sh20-research-programs .sh20-project-card:hover .arrow-link { border-color: #0d0f0e !important; }
/* 3) Status „Forschungsprogramm 2026/27" am Seitenende.
Gleiche Sprache wie die übrigen Abschnitte: über die Seitenbreite, Haarlinie
oben, ruhige Abstände, kein schmaler Kasten mit Weißraum an den Seiten. */
.sh20-status-block {
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px));
margin: 0 auto;
padding: clamp(3rem, 6vw, 5rem) 0;
border-top: 1px solid var(--sh-line);
}
.sh20-status-block h2,
.sh20-status-block .sh20-status-block__state,
.sh20-status-block .sh20-status-block__note { max-width: none; }
.sh20-status-block .sh20-status-block__state { margin-top: 1.2rem; }
/* =========================================================================
1.53.0 — Statusblock „Forschungsprogramm 2026/27" neu gestaltet
========================================================================= */
/* Warum es vorher nicht saß: Der Abschnitt lag in der zentrierten Breite
(min(100% - Rand, maximale Seitenbreite)). Beim Überfahren färbte sich nur
dieser innere Bereich — links und rechts blieb Weiß stehen. Außerdem war die
Erläuterung auf Lesebreite begrenzt, der Abschnitt wirkte schmal und
zusammengeschoben.
Jetzt ist er ein durchgehendes Band über die volle Fensterbreite mit einer
leichten Fläche, der Inhalt bleibt auf der Seitenachse. Beim Überfahren legt
sich der Signalton über das ganze Band — ohne Weißraum an den Seiten — und
der Text wechselt auf Tiefschwarz. */
.sh20-status-block {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: clamp(3.5rem, 7vw, 6rem) var(--sh-gutter, 1.25rem) !important;
border-top: 1px solid var(--sh-line) !important;
border-bottom: 0 !important;
background: #f8f6f9;
transition: background-color .18s ease;
}
.sh20-status-block > * {
width: min(100%, var(--sh-shell, 1220px));
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.sh20-status-block h2 {
margin: 0 0 1.2rem !important;
font-size: clamp(2rem, 4.6vw, 3.8rem) !important;
font-weight: 700 !important;
letter-spacing: -.045em !important;
line-height: .98 !important;
color: var(--sh-paper) !important;
}
/* Der Stand bekommt Gewicht: er ist die eigentliche Aussage des Abschnitts. */
.sh20-status-block .sh20-status-block__state {
margin: 0 0 1rem !important;
color: var(--sh-signal) !important;
font-size: .74rem !important;
}
.sh20-status-block .sh20-status-block__note {
max-width: 100% !important;
color: var(--sh-dark) !important;
}
/* Überfahren: Signalton über die volle Breite. */
.sh20-status-block:hover,
.sh20-status-block:focus-within { background: var(--sh-signal) !important; }
.sh20-status-block:hover h2,
.sh20-status-block:hover p,
.sh20-status-block:hover .eyebrow,
.sh20-status-block:hover .sh20-status-block__state,
.sh20-status-block:hover .sh20-status-block__note { color: #0d0f0e !important; }
/* =========================================================================
1.54.0 — Unterseiten: einheitliche Köpfe, Lehre neu geordnet
========================================================================= */
/* 1) Kopfbereiche der Unterseiten: linksbündig, ohne Einrückung, ohne
Breitenbegrenzung. Der Seitentitel steht einmal, die Erklärzeilen
beginnen an derselben Kante wie der übrige Text. */
.site-main .entry-header,
.site-main .insights-header,
.site-main .workshop-header,
.site-main .product-header,
.site-main .publication-header,
.site-main .course-landing-header,
.site-main .calculator-header,
.site-main .dashboard-header {
text-align: left !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
.site-main .insights-header > *,
.site-main .workshop-header > *,
.site-main .product-header > *,
.site-main .publication-header > *,
.site-main .course-landing-header > *,
.site-main .calculator-header > *,
.site-main .dashboard-header > *,
.site-main .insights-header .insights-lead,
.site-main .insights-header .insights-tagline,
.site-main .publikationen-header .insights-lead,
.site-main .publikationen-header .insights-tagline {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
text-align: left !important;
}
.site-main .insights-header .insights-tagline,
.site-main .publikationen-header .insights-tagline { margin-top: .75rem !important; }
/* 2) Fließtext auf den Unterseiten läuft an der linken Kante, ohne Einrückung
und ohne schmale Lesebreite. */
.site-main .sh20-bridge__copy,
.site-main .sh20-bridge__copy p,
.site-main .sh20-narrative,
.site-main .sh20-narrative p,
.site-main .sh20-status-block__note,
.site-main .sh20-emphasis,
.site-main .sh20-pubs,
.site-main .sh20-filters {
max-width: 100% !important;
}
/* 3) „Lehre als Denkraum" lag auf grauer Fläche (--sh-warm). Gewünscht ist
ein zartes Rosa. */
.site-main .sh20-bridge--alt { background: #fdf0f8 !important; }
/* 4) Lehrformate neu geordnet.
Vorher: Kacheln in einem Raster mit 1 px Fugen auf linienfarbenem Grund.
Dadurch standen sechs Kacheln in einer Reihe, die siebte allein in der
nächsten — und die leeren Zellen zeigten den grauen Rastergrund.
Jetzt: vier Kacheln je Reihe auf dem Rechner (drei/ zwei/ eine auf
kleineren Geräten), jede Kachel mit eigener Fläche und eigenem Rahmen,
normale Zwischenräume, keine leeren grauen Zellen. Titel und Beschriftung
dürfen umbrechen, damit nichts abgeschnitten wird. */
.sh20-formats__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.1rem;
background: transparent !important;
border: 0 !important;
}
.sh20-formats__tile {
display: flex;
flex-direction: column;
gap: .5rem;
min-width: 0;
padding: 1.35rem 1.25rem 1.5rem;
background: #f8f6f9;
border: 1px solid var(--sh-line);
transition: background-color .16s ease, border-color .16s ease;
}
.sh20-formats__tile:hover {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
}
.sh20-formats__tile:hover .sh20-formats__num,
.sh20-formats__tile:hover .sh20-formats__name { color: #0d0f0e !important; }
.sh20-formats__name,
.sh20-formats__num { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 1040px) { .sh20-formats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sh20-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .sh20-formats__grid { grid-template-columns: 1fr; } }
/* 5) Abschlussabschnitt „Interesse an einer Lehrveranstaltung …".
Er saß in der zentrierten Breite — daher der Weißraum links und rechts
beim Überfahren — und klebte am Footer. Jetzt ein durchgehendes Band über
die volle Fensterbreite mit Signalton beim Überfahren und Abstand nach
unten. */
.sh20-cta-block {
width: 100% !important;
margin: 0 0 clamp(3rem, 7vw, 5.5rem) !important;
padding: clamp(3.5rem, 7vw, 6rem) var(--sh-gutter, 1.25rem) !important;
border-top: 1px solid var(--sh-line);
transition: background-color .18s ease;
}
.sh20-cta-block > * {
width: min(100%, var(--sh-shell, 1220px));
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
.sh20-cta-block .sh20-cta-block__question { max-width: 100% !important; }
.sh20-cta-block:hover,
.sh20-cta-block:focus-within { background: var(--sh-signal); }
.sh20-cta-block:hover *,
.sh20-cta-block:focus-within * { color: #0d0f0e !important; }
.sh20-cta-block:hover .wp-element-button { background: #0d0f0e !important; border-color: #0d0f0e !important; color: #ffffff !important; }
/* 6) Kontaktformular bündig mit dem Text darüber. */
.site-main .sh20-contact__form-shell,
.site-main .sh20-contact form,
.site-main .sh20-form-slot {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================================================================
1.55.0 — Hover bleibt am Kasten, Abschnitte auf der Seitenachse
========================================================================= */
/* Der Vollbreiten-Hover (eingesetzt in 1.51–1.54) wird zurückgenommen. Der
Signalton liegt beim Überfahren nur noch auf dem Element selbst — Kachel,
Projektkasten, Statusblock — und läuft nicht mehr über die ganze
Fensterbreite. */
.page-forschung .sh20-formats__tile:hover,
.page-forschung .sh20-formats__tile:focus-within,
.sh20-research-programs .sh20-project-card:hover,
.sh20-research-programs .sh20-project-card:focus-within,
.sh20-status-block:hover,
.sh20-status-block:focus-within,
.sh20-cta-block:hover,
.sh20-cta-block:focus-within {
box-shadow: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
}
/* Statusblock und Abschlussabschnitt liegen wieder auf derselben Achse wie die
übrigen Abschnitte: gleiche Breite, gleicher Seitenrand links und rechts.
Deshalb wirkt „Derzeit in Vorbereitung" wieder bündig mit dem Text darüber
und nicht mehr nach außen versetzt. */
.sh20-status-block,
.sh20-cta-block {
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.sh20-status-block > *,
.sh20-cta-block > * {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Der Statusblock behält seine ruhige, leicht abgesetzte Fläche — jetzt aber
als Kasten in der Seitenbreite, nicht als Band über das Fenster. */
.sh20-status-block { background: #f8f6f9 !important; }
.sh20-status-block:hover,
.sh20-status-block:focus-within { background: var(--sh-signal) !important; }
/* =========================================================================
1.56.0 — Unterseiten: Inhalt auf der Seitenachse, Text linksbündig
========================================================================= */
/* Was schiefging: Die Regel aus 1.54 nahm ALLEN Kindern der Kopfbereiche die
Außenabstände — auch dem inneren Rahmen (.site-shell), der den Inhalt auf die
Seitenachse rückt. Dadurch klebte der Seitentitel am linken Fensterrand, und
Überschrift und Text standen nicht an derselben Kante.
Jetzt zwei getrennte Zuständigkeiten:
- Die Rahmen (.site-shell, die Abschnittsblöcke) bleiben zentriert und halten
die Seitenbreite. Damit beginnt alles an derselben Kante.
- Die Textzeilen darin stehen linksbündig an der Kante dieses Rahmens, ohne
Einrückung und ohne Lesebreiten-Begrenzung. */
.site-main .entry-header > .site-shell,
.site-main .insights-header > .site-shell,
.site-main .workshop-header > .site-shell,
.site-main .product-header > .site-shell,
.site-main .publication-header > .site-shell,
.site-main .course-landing-header > .site-shell,
.site-main .calculator-header > .site-shell,
.site-main .sh20-bridge,
.site-main .sh20-narrative,
.site-main .sh20-status-block,
.site-main .sh20-cta-block {
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.site-main .entry-header h1,
.site-main .entry-header .eyebrow,
.site-main .insights-header h1,
.site-main .insights-header .insights-tagline,
.site-main .insights-header .insights-lead,
.site-main .workshop-header h1,
.site-main .workshop-header .eyebrow,
.site-main .product-header h1,
.site-main .publication-header h1,
.site-main .course-landing-header h1,
.site-main .calculator-header h1,
.site-main .sh20-bridge h2,
.site-main .sh20-bridge h3,
.site-main .sh20-bridge .eyebrow,
.site-main .sh20-bridge__copy,
.site-main .sh20-bridge__copy p,
.site-main .sh20-narrative h2,
.site-main .sh20-narrative p,
.site-main .sh20-formats__label,
.site-main .sh20-status-block h2,
.site-main .sh20-status-block .sh20-status-block__state,
.site-main .sh20-status-block__note,
.site-main .sh20-cta-block__question {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
max-width: 100% !important;
}
/* Innerhalb dieser Zeilen bleiben einzelne Absätze bündig, ohne Sondereinzug. */
.site-main .sh20-bridge__copy > *,
.site-main .sh20-narrative > * { margin-left: 0 !important; max-width: 100% !important; }
/* =========================================================================
1.57.0 — Unterseiten konsequent linksbündig, Akademie-Karten aufgeräumt
========================================================================= */
/* 1) Grundsatzregel für die Unterseiten: Überschriften und Fließtext stehen
linksbündig an der Kante ihres Rahmens. Die Startseite ist ausgenommen
(dort liegt der Inhalt in .homepage-content), Impressum-ähnliche Seiten
mit eigener Gestaltung ebenso wenig betroffen, weil nur Textausrichtung
und Einzug gesetzt werden — keine Breiten oder Zentrierungen. */
body:not(.home) .site-main h1,
body:not(.home) .site-main h2,
body:not(.home) .site-main h3,
body:not(.home) .site-main h4,
body:not(.home) .site-main p,
body:not(.home) .site-main li {
text-align: left !important;
}
body:not(.home) .site-main h1,
body:not(.home) .site-main h2,
body:not(.home) .site-main h3,
body:not(.home) .site-main h4 {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
/* Kopfbereiche jeder Art (der Rahmen bleibt zentriert, der Text links). */
.site-main [class*="header"] h1,
.site-main [class*="header"] h2,
.site-main [class*="header"] p,
.site-main [class*="header"] .eyebrow { text-align: left !important; }
/* 2) „Wir übersetzen Wissen in die Praxis." und die übrigen Abschnittsköpfe
der Akademie: Kopfzeile und Erklärtext linksbündig an der Kante, ohne
Zentrierung und ohne Einzug. */
.site-main .sh20-audience,
.site-main .sh20-audience__head,
.site-main .sh20-audience__grid,
.site-main .sh20-analyses__head,
.site-main .sh20-formats { text-align: left !important; }
.site-main .sh20-audience__head > *,
.site-main .sh20-analyses__head > *,
.site-main .sh20-formats__label {
margin-left: 0 !important;
text-align: left !important;
max-width: 100% !important;
}
/* 3) Akademie, Abschnitt „Bereiche": Statuszeilen entfernt und die dicke
Signalkante an der hervorgehobenen Karte entfernt („der fette Strich"). */
.site-main .sh20-audience__state { display: none !important; }
.site-main .sh20-audience__card--highlight,
.site-main .sh20-audience__card { box-shadow: none !important; }
/* 4) Mehr Abstand zur rosa Fläche darunter. */
.site-main .sh20-bridge--alt,
.site-main .sh20-analyses { margin-top: clamp(3rem, 7vw, 5.5rem) !important; }
/* 5) Abschlussabschnitt („Interesse an einer Lehrveranstaltung …",
„Lehre anfragen"): Text linksbündig, Fläche als Kasten in Seitenbreite,
Signalton nur beim Überfahren — nicht als Band über das Fenster. */
.site-main .sh20-cta-block { background: #f8f6f9 !important; }
.site-main .sh20-cta-block > *,
.site-main .sh20-cta-block .sh20-cta-block__question,
.site-main .sh20-cta-block p {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
.site-main .sh20-cta-block:hover,
.site-main .sh20-cta-block:focus-within { background: var(--sh-signal) !important; }
/* =========================================================================
1.58.0 — Statusfeld „Forschungsprogramm 2026/27": Feld und Hover seitenbreit
========================================================================= */
/* Die Vorgabe: Das Feld läuft über die volle Fensterbreite, beim Überfahren
ebenso. Damit der Text nicht an der Farbkante klebt, bekommt das Band innen
einen deutlichen Seitenabstand (mindestens 1,5 rem, auf großen Bildschirmen
bis 4 rem) und der Inhalt darin bleibt auf der Seitenachse — also bündig mit
allen anderen Abschnitten. */
.site-main .sh20-status-block {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem) !important;
background: #f2f2f4 !important;
transition: background-color .18s ease;
}
.site-main .sh20-status-block > * {
width: min(100%, var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-main .sh20-status-block h2,
.site-main .sh20-status-block .sh20-status-block__state,
.site-main .sh20-status-block .sh20-status-block__note,
.site-main .sh20-status-block .eyebrow {
text-align: left !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Feld und Überfahren laufen über die ganze Fensterbreite. */
.site-main .sh20-status-block:hover,
.site-main .sh20-status-block:focus-within { background: var(--sh-signal) !important; }
.site-main .sh20-status-block:hover h2,
.site-main .sh20-status-block:hover p,
.site-main .sh20-status-block:hover .eyebrow,
.site-main .sh20-status-block:hover .sh20-status-block__state,
.site-main .sh20-status-block:hover .sh20-status-block__note { color: #0d0f0e !important; }
/* =========================================================================
1.59.0 — Unterseiten: Text überall linksbündig, Abstände, Formular bündig
========================================================================= */
/* 1) Grundsatzregel ohne Klassennamen-Abhängigkeit.
Bisher habe ich einzelne Klassen angesprochen (.sh20-bridge h2 usw.).
Wenn eine Seite andere Klassen benutzt, greift nichts — das war der
Grund, warum „Wir übersetzen Wissen in die Praxis." mehrfach nicht
linksbündig wurde.
Diese Regel erfasst JEDES Text-Element auf Unterseiten (Startseite ist
ausgenommen): Text links, kein Einzug, keine Breitenbegrenzung. Rahmen
und Abschnittsbreiten bleiben unberührt, die Seitenachse also intakt. */
body:not(.home) .site-main h1,
body:not(.home) .site-main h2,
body:not(.home) .site-main h3,
body:not(.home) .site-main h4,
body:not(.home) .site-main h5,
body:not(.home) .site-main p,
body:not(.home) .site-main li,
body:not(.home) .site-main figcaption,
body:not(.home) .site-main blockquote,
body:not(.home) .site-main .eyebrow {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
padding-left: 0 !important;
}
/* 2) Kontaktformular: bündig mit dem Text darüber. Es saß zuletzt am linken
Fensterrand, weil ihm die Außenabstände genommen wurden. Jetzt bekommt es
dieselbe Breite und dieselbe Achse wie die übrigen Abschnitte. */
.site-main .sh20-contact,
.site-main .sh20-contact .site-shell,
.site-main .sh20-contact__form-shell,
.site-main .sh20-form-slot,
.site-main .sh20-contact form {
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* 3) Akademie „Bereiche": Statuszeilen („In Entwicklung", „Pilotierung") weg
und keine dicke Kante zwischen den Karten. */
.site-main [class*="__state"] { display: none !important; }
.site-main .sh20-audience__card,
.site-main .sh20-audience__card--highlight {
box-shadow: none !important;
border-left: 0 !important;
}
/* 4) Mehr Leerraum zwischen Raster und rosa Feld — deutlich größer als zuvor. */
.site-main .sh20-bridge--alt,
.site-main .sh20-analyses { margin-top: clamp(5rem, 11vw, 9rem) !important; }
/* 2) Innerhalb der Spalte: keine eigenen Einrückungen und Zentrierungen mehr.
Alles startet an derselben Kante. */
body:not(.home) .site-main .entry-content .wp-block-group,
body:not(.home) .site-main .entry-content .wp-block-group__inner-container,
body:not(.home) .site-main .entry-content .is-layout-constrained > *,
body:not(.home) .site-main .entry-content .is-layout-flow > *,
body:not(.home) .site-main .entry-content .sh20-bridge,
body:not(.home) .site-main .entry-content .sh20-narrative,
body:not(.home) .site-main .entry-content .sh20-bridge__copy,
body:not(.home) .site-main .entry-content .sh20-audience,
body:not(.home) .site-main .entry-content .sh20-audience__head,
body:not(.home) .site-main .entry-content .sh20-analyses,
body:not(.home) .site-main .entry-content .sh20-formats,
body:not(.home) .site-main .entry-content .sh20-filters,
body:not(.home) .site-main .entry-content .sh20-pubs,
body:not(.home) .site-main .entry-content .sh20-contact {
text-align: left !important;
}
/* 3) Textzeilen an der Kante: linksbündig, kein Einzug, keine Lesebreite. */
body:not(.home) .site-main .entry-content h1,
body:not(.home) .site-main .entry-content h2,
body:not(.home) .site-main .entry-content h3,
body:not(.home) .site-main .entry-content h4,
body:not(.home) .site-main .entry-content p,
body:not(.home) .site-main .entry-content li,
body:not(.home) .site-main .entry-content blockquote,
body:not(.home) .site-main .entry-content figcaption,
body:not(.home) .site-main .entry-content .eyebrow {
text-align: left !important;
}
/* 4) Kopfbereich der Unterseiten liegt auf derselben Achse wie der Inhalt. */
body:not(.home) .site-main [class*="header"] > .site-shell,
body:not(.home) .site-main .entry-header > .site-shell,
body:not(.home) .site-main .workshop-header > .site-shell {
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
margin-left: auto !important;
margin-right: auto !important;
}
body:not(.home) .site-main [class*="header"] h1,
body:not(.home) .site-main [class*="header"] h2,
body:not(.home) .site-main [class*="header"] p { text-align: left !important; margin-left: 0 !important; }
/* 5) Abschlussabschnitt: Der Button wurde beim Überfahren schwarz — auf der
pinken Fläche sah das wie ein schwarzer Balken aus. Bleibt jetzt dunkel
auf pink, ohne Farbwechsel der Fläche. */
.sh20-cta-block:hover .wp-element-button,
.sh20-cta-block:focus-within .wp-element-button {
background: transparent !important;
border-color: #0d0f0e !important;
color: #0d0f0e !important;
}
.site-main .entry-content h1,
.site-main .entry-content h2,
.site-main .entry-content h3,
.site-main .entry-content h4,
.site-main .entry-content h5,
.site-main .entry-content p,
.site-main .entry-content li,
.site-main .entry-content blockquote,
.site-main .entry-content figcaption,
.site-main .entry-content .eyebrow {
text-align: left !important;
}
/* 2) Case-Study-Kacheln: gleiche Sprache wie die übrigen Kacheln, beim
Überfahren in Signalpink mit dunklem Text. */
.sh20-cases__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.1rem;
margin-top: 2rem;
}
@media (max-width: 900px) { .sh20-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sh20-cases__grid { grid-template-columns: 1fr; } }
.sh20-case-card {
display: flex;
flex-direction: column;
gap: .6rem;
min-width: 0;
padding: 1.5rem 1.4rem 1.7rem;
background: #f8f6f9;
border: 1px solid var(--sh-line);
transition: background-color .16s ease, border-color .16s ease;
}
.sh20-case-card:hover,
.sh20-case-card:focus-within {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
}
.sh20-case-card:hover *,
.sh20-case-card:focus-within * { color: #0d0f0e !important; }
.sh20-case-card h3 { margin: 0; }
.sh20-case-card h3 a { text-decoration: none; }
.sh20-case-card__tag {
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sh-signal);
}
.sh20-case-card__subtitle { margin: 0; font-size: .95rem; }
.sh20-case-card__media { display: block; margin-bottom: .4rem; }
.sh20-case-card__media img { display: block; width: 100%; height: auto; }
.sh20-case-card__media--empty {
display: flex;
align-items: center;
justify-content: center;
min-height: 110px;
background: #ffffff;
color: var(--sh-signal);
font-weight: 800;
font-size: 1.5rem;
letter-spacing: -.03em;
}
.sh20-case-card--more {
align-items: center;
justify-content: center;
border-style: dashed;
color: var(--sh-muted);
}
/* 3) Einzelansicht einer Case Study. */
.sh20-case-single__media img { display: block; width: 100%; height: auto; margin: 0 0 2rem; }
.sh20-case-single__subtitle { margin-top: .6rem; color: var(--sh-dark); }
.sh20-case-single__facts { margin-top: 3rem; }
.sh20-case-single__facts ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.sh20-case-single__facts li {
padding: .85rem 0;
border-top: 1px solid var(--sh-line);
}
/* =========================================================================
1.61.2 — Genau eine Ursache: der Seitenkopf hatte einen eigenen Innenabstand
========================================================================= */
/* Befund auf der Kooperationsseite (Screenshot 16:21):
Der Seitentitel „Kooperation" begann deutlich weiter rechts als der Text
darunter. Ursache ist ein Innenabstand links am Kopfbereich selbst — nicht an
den Überschriften und nicht am Text. Deshalb haben alle bisherigen Regeln auf
h1, h2 und p nichts bewirkt.
Diese Regel entfernt ausschließlich den Innenabstand links und rechts am
Kopfbereich der Unterseiten. Keine Breiten, keine Außenabstände, keine
Zentrierung — damit bleibt das Layout unangetastet und der Titel beginnt an
derselben Kante wie der Text darunter. */
.site-main .entry-header,
.site-main .insights-header,
.site-main .workshop-header,
.site-main .product-header,
.site-main .publication-header,
.site-main .course-landing-header,
.site-main .calculator-header,
.site-main .dashboard-header,
.site-main .entry-header > .site-shell,
.site-main .insights-header > .site-shell,
.site-main .workshop-header > .site-shell,
.site-main .product-header > .site-shell,
.site-main .publication-header > .site-shell,
.site-main .course-landing-header > .site-shell,
.site-main .calculator-header > .site-shell,
.site-main [class*="header"] > .site-shell {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* =========================================================================
1.62.0 — Statusband ausgerichtet, Abschlusskasten entschärft,
Footerband zart rosa, Kontaktformular auf Seitenbreite
========================================================================= */
/* 1) Statusband „Forschungsprogramm 2026/27" (Forschung, Trägernetz).
Im Bild ragt es über die ganze Seite: Der Inhalt begann links weiter
außen als alle übrigen Abschnitte. Ursache war eine Regel, die den
Innenabstand des Bandes zum Rand machte und den Inhalt nach links zog.
Jetzt: Band über die volle Fensterbreite (wie gewünscht), der Inhalt darin
aber auf der Seitenachse, also bündig mit Überschriften und Text der
übrigen Abschnitte. */
.site-main .sh20-status-block {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: clamp(1.25rem, 4vw, 3rem) !important;
padding-right: clamp(1.25rem, 4vw, 3rem) !important;
background: #f2f2f4 !important;
}
.site-main .sh20-status-block > * {
width: min(100%, var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Abschlusskasten auf den Unterseiten (Lehre „Interesse an einer
Lehrveranstaltung …").
Er war flächig pink, und die Frage stand als dunkles Textband darin. Das
war nicht gewollt. Jetzt: keine farbige Fläche, kein Farbwechsel beim
Überfahren, die Frage als normaler Text, der Button dunkel und beim
Überfahren pink — wie alle anderen Buttons der Seite. */
.sh20-cta-block,
.sh20-cta-block:hover,
.sh20-cta-block:focus-within,
.sh20-cta-block__question,
.sh20-cta-block:hover .sh20-cta-block__question,
.sh20-cta-block:focus-within .sh20-cta-block__question {
background: transparent !important;
}
.sh20-cta-block__question { color: var(--sh-paper) !important; }
.sh20-cta-block .wp-element-button,
.sh20-cta-block .wp-block-button__link,
.sh20-cta-block a.button {
background: #0d0f0e !important;
border-color: #0d0f0e !important;
color: #ffffff !important;
}
.sh20-cta-block .wp-element-button:hover,
.sh20-cta-block .wp-block-button__link:hover,
.sh20-cta-block a.button:hover,
.sh20-cta-block .wp-element-button:focus-visible {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* 4) Kontaktformular: Seitenbreite, sehr zartes Rosa, Innenabstand — damit der
Text nicht am Rand klebt und die Fläche ruhig wirkt. */
.site-main .sh20-contact__form-shell,
.site-main .sh20-contact form {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
padding: clamp(1.5rem, 3vw, 2.75rem) !important;
border: 1px solid rgba(5, 5, 5, .08) !important;
}
.site-main .sh20-contact input,
.site-main .sh20-contact textarea,
.site-main .sh20-contact select {
background: #ffffff !important;
box-sizing: border-box !important;
width: 100% !important;
}
/* =========================================================================
1.62.2 — Statusfeld auf der Seitenachse
========================================================================= */
/* Vorgabe: bündig. Das Feld liegt deshalb nicht mehr über die Fensterbreite,
sondern genau auf derselben Achse und mit derselben Breite wie alle anderen
Abschnitte — linker und rechter Rand fluchten mit Überschriften und Text der
übrigen Bereiche. Der Inhalt beginnt innen mit festem Abstand, damit nichts
an der Farbkante klebt. Beim Überfahren füllt sich das Feld pink. */
.site-main .sh20-status-block {
box-sizing: border-box !important;
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3vw, 2.5rem) !important;
background: #f2f2f4 !important;
transition: background-color .18s ease;
}
.site-main .sh20-status-block > * {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-main .sh20-status-block h2,
.site-main .sh20-status-block p,
.site-main .sh20-status-block .eyebrow,
.site-main .sh20-status-block .sh20-status-block__state,
.site-main .sh20-status-block .sh20-status-block__note {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
text-align: left !important;
}
.site-main .sh20-status-block:hover,
.site-main .sh20-status-block:focus-within { background: var(--sh-signal) !important; }
.site-main .sh20-status-block:hover h2,
.site-main .sh20-status-block:hover p,
.site-main .sh20-status-block:hover .eyebrow,
.site-main .sh20-status-block:hover .sh20-status-block__state,
.site-main .sh20-status-block:hover .sh20-status-block__note { color: #0d0f0e !important; }
/* =========================================================================
1.63.0 — Drei gezielte Korrekturen
========================================================================= */
/* 1) Knöpfe: unlesbare Kombinationen ausschließen.
Im Bild war der rechte Knopf beim Überfahren schwarz auf schwarz. Ursache
war eine Regel, die beim Überfahren des ganzen Abschnitts JEDEN Text im
Abschnitt dunkel färbte — auch die Schrift auf dunklen Knöpfen.
Diese Pauschalregel ist hier außer Kraft gesetzt und durch klare,
lesbare Zustände ersetzt:
Ruhezustand → dunkle Fläche, weiße Schrift
Überfahren → Signalfarbe, dunkle Schrift
Gilt für alle Knöpfe der Unterseiten-Abschlusskästen und des
Kooperationsbandes. */
.sh20-cta-block:hover *,
.sh20-cta-block:focus-within * { color: inherit; }
.sh20-cta-block:hover h2,
.sh20-cta-block:hover p,
.sh20-cta-block:hover .eyebrow,
.sh20-cta-block:focus-within h2,
.sh20-cta-block:focus-within p,
.sh20-cta-block:focus-within .eyebrow { color: var(--sh-paper) !important; }
.sh20-cta-block .wp-element-button,
.sh20-cta-block .wp-block-button__link,
.sh20-cta-block a.button,
.site-footer .footer-cta .wp-element-button,
.site-footer .footer-cta .wp-block-button__link {
background: #0d0f0e !important;
border-color: #0d0f0e !important;
color: #ffffff !important;
}
.sh20-cta-block .wp-element-button:hover,
.sh20-cta-block .wp-block-button__link:hover,
.sh20-cta-block a.button:hover,
.site-footer .footer-cta .wp-element-button:hover,
.site-footer .footer-cta .wp-block-button__link:hover {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* 2) Statusfeld: Hintergrund über die volle Fensterbreite, der Text darin
bündig auf der Seitenachse — und mehr Weißraum darunter. */
.site-main .sh20-status-block {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: clamp(3rem, 6vw, 5rem) !important;
padding-bottom: clamp(3rem, 6vw, 5rem) !important;
margin-bottom: clamp(4rem, 9vw, 8rem) !important;
background: #f2f2f4 !important;
}
.site-main .sh20-status-block > * {
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* 3) Abschnittsblöcke ohne eigene Einrückung: damit Überschrift und Text
darin an derselben Kante beginnen wie der Seitentitel. */
.site-main .sh20-bridge,
.site-main .sh20-narrative,
.site-main .sh20-bridge__copy,
.site-main .sh20-audience,
.site-main .sh20-analyses,
.site-main .sh20-formats,
.site-main .sh20-filters,
.site-main .sh20-pubs {
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-main .sh20-bridge h2,
.site-main .sh20-bridge h3,
.site-main .sh20-bridge .eyebrow,
.site-main .sh20-bridge__copy,
.site-main .sh20-bridge__copy p,
.site-main .sh20-narrative h2,
.site-main .sh20-narrative p {
margin-left: 0 !important;
padding-left: 0 !important;
text-align: left !important;
max-width: 100% !important;
}
/* 4) Kooperationsband im Footer: zart rosa, Text dunkel — so wie gewünscht. */
.site-footer .footer-cta,
.site-footer .footer-cta__inner,
.site-footer .footer-cta .site-shell { background: #fdf7fb !important; }
.site-footer .footer-cta h2,
.site-footer .footer-cta p,
.site-footer .footer-cta .footer-cta__lead,
.site-footer .footer-cta .eyebrow { color: var(--sh-paper) !important; }
/* =========================================================================
1.64.0 — Kooperationsfeld: durchgehend rosa, ohne Unterstrich
========================================================================= */
/* 1) Unterstrich entfernen — an Überschrift, Einleitung und Verweisen des
Kooperationsfeldes, ebenso im Statusfeld (dort war der Titel im
Überfahrzustand unterstrichen). Keine Textdekoration, keine Unterkante. */
.site-footer .footer-cta h2,
.site-footer .footer-cta h3,
.site-footer .footer-cta p,
.site-footer .footer-cta .footer-cta__lead,
.site-footer .footer-cta .eyebrow,
.site-footer .footer-cta a,
.site-main .sh20-status-block h2,
.site-main .sh20-status-block h3,
.site-main .sh20-status-block p,
.site-main .sh20-status-block .eyebrow,
.site-main .sh20-status-block a {
text-decoration: none !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.site-footer .footer-cta h2::after,
.site-footer .footer-cta .footer-cta__lead::after,
.site-main .sh20-status-block h2::after {
content: none !important;
display: none !important;
}
/* 2) Das gesamte Feld rosa — auch die inneren Ebenen, damit keine weiße oder
pinke Fläche mehr durchscheint. Knöpfe bleiben ausgenommen. */
.site-footer .footer-cta,
.site-footer .footer-cta__inner,
.site-footer .footer-cta .site-shell,
.site-footer .footer-cta > div,
.site-footer .footer-cta > div > div,
.site-footer .footer-cta .wp-block-group,
.site-footer .footer-cta .wp-block-group__inner-container {
}
.site-footer .footer-cta .site-shell,
.site-footer .footer-cta__inner,
.site-footer .footer-cta > div {
padding-left: clamp(1.25rem, 4vw, 3rem) !important;
padding-right: clamp(1.25rem, 4vw, 3rem) !important;
}
/* =========================================================================
1.65.0 — Kontaktformular bündig, Abschlusskasten ohne Balken
========================================================================= */
/* 1) Kontaktformular: Text auf der Seitenachse.
Die rosa Fläche bleibt, aber sie liegt jetzt auf derselben Achse und in
derselben Breite wie alle übrigen Abschnitte, und innen gibt es links
und rechts keinen Zusatzabstand mehr. Damit beginnt der Text des
Formulars an derselben Kante wie die Überschrift der Seite. */
.site-main .sh20-contact,
.site-main .sh20-contact__form-shell,
.site-main .sh20-contact form {
box-sizing: border-box !important;
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-main .sh20-contact form > *,
.site-main .sh20-contact .sh20-contact__field,
.site-main .sh20-contact label,
.site-main .sh20-contact p {
margin-left: 0 !important;
padding-left: 0 !important;
text-align: left !important;
width: 100% !important;
max-width: 100% !important;
}
/* 2) Abschlusskasten (Lehre und andere Unterseiten): keine Fläche, kein
Balken — weder pink noch schwarz. Der Knopf bleibt ein normaler Knopf in
Textbreite, nicht über die ganze Zeile. */
.site-main .sh20-cta-block,
.site-main .sh20-cta-block:hover,
.site-main .sh20-cta-block:focus-within,
.site-main .sh20-cta-block > *,
.site-main .sh20-cta-block__question,
.site-main .sh20-cta-block:hover .sh20-cta-block__question {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
text-decoration: none !important;
border-bottom: 0 !important;
}
.site-main .sh20-cta-block__question { color: var(--sh-paper) !important; }
.site-main .sh20-cta-block .wp-element-button,
.site-main .sh20-cta-block .wp-block-button__link,
.site-main .sh20-cta-block a.button {
display: inline-block !important;
width: auto !important;
max-width: max-content !important;
background: #0d0f0e !important;
border-color: #0d0f0e !important;
color: #ffffff !important;
}
.site-main .sh20-cta-block .wp-element-button:hover,
.site-main .sh20-cta-block .wp-block-button__link:hover,
.site-main .sh20-cta-block a.button:hover {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* 3) Kopfleiste: „Trägernetzwerk" als normaler Verweis, nicht als pinker
Knopf. */
.header-cta--plain {
background: transparent !important;
border: 0 !important;
color: var(--sh-paper) !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-decoration: none !important;
}
.header-cta--plain:hover,
.header-cta--plain:focus-visible { color: var(--sh-signal) !important; }
/* =========================================================================
1.66.0 — Keine grauen Linien, Flächen seitenbreit, Text bündig
========================================================================= */
/* 1) KEINE grauen Linien auf Unterseiten.
Sie kamen als Rahmenkante von Kopfbereichen und Abschnittsblöcken
(border-bottom bzw. border-top). Hier werden diese Kanten an allen
Kopf- und Abschnittsblöcken entfernt — die Seiten sollen ohne jede
Trennlinie aussehen. Kachelränder bleiben davon unberührt. */
.site-main .entry-header,
.site-main .insights-header,
.site-main .workshop-header,
.site-main .product-header,
.site-main .publication-header,
.site-main .course-landing-header,
.site-main .calculator-header,
.site-main .dashboard-header,
.site-main [class*="-header"],
.site-main .sh20-bridge,
.site-main .sh20-narrative,
.site-main .sh20-analyses,
.site-main .sh20-formats,
.site-main .sh20-filters,
.site-main .sh20-cta-block,
.site-main .sh20-status-block,
.site-main .sh20-contact,
.site-main .sh20-contact__form-shell,
.site-main .sh20-cases,
.site-main .sh20-pubs {
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
.site-main .entry-header::after,
.site-main .insights-header::after,
.site-main .sh20-bridge::after,
.site-main .sh20-bridge::before,
.site-main .sh20-narrative::after,
.site-main .sh20-narrative::before,
.site-main .sh20-cta-block::after,
.site-main .sh20-cta-block::before,
.site-main .sh20-status-block::after,
.site-main .sh20-status-block::before,
.site-main .sh20-contact::after,
.site-main .sh20-contact::before {
content: none !important;
display: none !important;
}
.site-main .entry-header hr,
.site-main .insights-header hr,
.site-main .sh20-bridge hr,
.site-main .sh20-narrative hr,
.site-main .sh20-cta-block hr { display: none !important; }
/* 2) Kontaktformular: rosa Fläche über die volle Fensterbreite, der Text
darin auf der Seitenachse — damit bündig mit dem Rest der Seite. */
.site-main .sh20-contact,
.site-main .sh20-contact__form-shell,
.site-main .sh20-contact form {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-main .sh20-contact form > *,
.site-main .sh20-contact__form-shell > *,
.site-main .sh20-contact .sh20-contact__field,
.site-main .sh20-contact label,
.site-main .sh20-contact p,
.site-main .sh20-contact h2,
.site-main .sh20-contact h3 {
box-sizing: border-box !important;
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* 3) „Lehre als Denkraum": Hintergrund seitenbreit, Text bündig. */
.site-main .sh20-narrative,
.site-main .sh20-narrative > *,
.site-main .sh20-narrative h2,
.site-main .sh20-narrative h3,
.site-main .sh20-narrative p,
.site-main .sh20-narrative .eyebrow,
/* Zustzlich: jeder klassische Trennblock auf Unterseiten verschwindet. */
.site-main .wp-block-separator,
.site-main hr.wp-block-separator,
.site-main .sh20-rule,
.site-main .sh20-divider {
display: none !important;
border: 0 !important;
}
.site-main .sh20-bridge h2,
.site-main .sh20-bridge h3,
.site-main .sh20-narrative h2,
.site-main .sh20-cta-block h2,
.site-main [class*="-header"] h1,
.site-main [class*="-header"] h2 {
border-bottom: 0 !important;
text-decoration: none !important;
}
/* =========================================================================
1.66.1 — Kooperationsfeld genau wie Formular und Denkraum:
rosa Fläche über die volle Fensterbreite, Text bündig
========================================================================= */
/* Das Feld „Kooperation" (im Seitenfuß und auf der Kooperationsseite) lag als
schmaler Kasten mit eigenem Innenabstand. Jetzt: rosa Fläche über die volle
Fensterbreite, der Inhalt darin auf der Seitenachse — also bündig mit
Überschriften und Text der übrigen Abschnitte. */
.site-footer .footer-cta,
.site-footer .footer-cta__inner,
.site-footer .footer-cta .wp-block-group,
.site-footer .footer-cta .wp-block-group__inner-container,
.site-main .sh20-kooperation,
.site-main .sh20-cooperation,
.sh-page-kooperation .entry-content > * {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-footer .footer-cta .site-shell,
.site-footer .footer-cta > div,
.site-footer .footer-cta h2,
.site-footer .footer-cta h3,
.site-footer .footer-cta p,
.site-footer .footer-cta .footer-cta__lead,
.site-footer .footer-cta .eyebrow,
.site-main .sh20-kooperation > *,
.site-main .sh20-cooperation > *,
.sh-page-kooperation .entry-content > * > * {
box-sizing: border-box !important;
width: min(calc(100% - 2 * var(--sh-gutter, 1.25rem)), var(--sh-shell, 1220px)) !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* Knöpfe bleiben knopfbreit und dunkel. */
.site-footer .footer-cta .wp-element-button,
.site-footer .footer-cta a.button,
.site-main .sh20-kooperation .wp-element-button {
display: inline-block !important;
width: auto !important;
max-width: max-content !important;
background: #0d0f0e !important;
border-color: #0d0f0e !important;
color: #ffffff !important;
}
.site-footer .footer-cta .wp-element-button:hover,
.site-footer .footer-cta a.button:hover,
.site-main .sh20-kooperation .wp-element-button:hover {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* =========================================================================
1.66.2 — Abschlusskästen: jede farbige Fläche und jeder Balken verschwindet
========================================================================= */
/* Ursache der pinken Fläche mit dem schwarzen Balken: Der Abschlusskasten trug
selbst eine Signalfarbe, und der Knopf darin lief als Block über die ganze
Zeile. Beides wird hier für JEDE Variante des Kastens aufgehoben — egal, wie
der Abschnitt im Einzelfall heißt ("…cta", "…cta-block", "…abschluss"). */
.site-main [class*="cta"],
.site-main [class*="abschluss"],
.site-main [class*="kennenlernen"] {
background: none !important;
background-color: transparent !important;
box-shadow: none !important;
}
/* Fläche auch in allen inneren Ebenen aufheben — Knöpfe ausgenommen. */
.site-main [class*="cta"] > div,
.site-main [class*="cta"] > section,
.site-main [class*="cta"] .wp-block-group,
.site-main [class*="cta"] .wp-block-group__inner-container,
.site-main [class*="abschluss"] > div,
.site-main [class*="abschluss"] .wp-block-group {
background: none !important;
background-color: transparent !important;
}
/* Knöpfe: normale Breite statt Balken über die ganze Zeile. */
.site-main [class*="cta"] .wp-block-button,
.site-main [class*="cta"] .wp-block-buttons,
.site-main [class*="abschluss"] .wp-block-button,
.site-main [class*="kennenlernen"] .wp-block-button {
display: inline-block !important;
width: auto !important;
max-width: max-content !important;
}
.site-main [class*="cta"] a.wp-element-button,
.site-main [class*="cta"] a.wp-block-button__link,
.site-main [class*="cta"] a.button,
.site-main [class*="abschluss"] a.wp-element-button,
.site-main [class*="kennenlernen"] a.button,
.site-main [class*="kennenlernen"] a.wp-element-button {
display: inline-block !important;
width: auto !important;
max-width: max-content !important;
background: #0d0f0e !important;
border-color: #0d0f0e !important;
color: #ffffff !important;
}
.site-main [class*="cta"] a.wp-element-button:hover,
.site-main [class*="cta"] a.wp-block-button__link:hover,
.site-main [class*="abschluss"] a.wp-element-button:hover,
.site-main [class*="kennenlernen"] a.button:hover {
background: var(--sh-signal) !important;
border-color: var(--sh-signal) !important;
color: #0d0f0e !important;
}
/* Frage- und Fließtext im Kasten bleibt normaler dunkler Text, linksbündig. */
.site-main [class*="cta"] h2,
.site-main [class*="cta"] h3,
.site-main [class*="cta"] p,
.site-main [class*="abschluss"] h2,
.site-main [class*="abschluss"] p {
background: none !important;
color: var(--sh-paper) !important;
text-align: left !important;
text-decoration: none !important;
border-bottom: 0 !important;
}
/* =========================================================================
1.67.0 — Bündigkeit ohne Breitenverbote, Hintergrund unangetastet
========================================================================= */
/* Neue Technik, die zuverlässig wirkt:
Statt Breiten und Außenabstände der Inhaltsblöcke zu verbiegen (das hat
zweimal das Layout zerstört), bekommt der Abschnitt selbst links und rechts
genau so viel Innenabstand, wie der Seitenrand bis zur Seitenachse
ausmacht:
padding-inline = max(0, (100% − Inhaltsspalte) / 2)
Die farbige Fläche bleibt damit über die volle Fensterbreite, und der Inhalt
darin liegt exakt auf derselben Achse wie Überschriften und Texte aller
anderen Abschnitte. Keine Breitenverbote, kein Zentrieren, keine Wirkung auf
andere Abschnitte. */
:root { --sh-axis: max(0px, (100% - var(--sh-shell, 1220px)) / 2); }
/* 1) Statusfeld (Forschungsprogramm) */
.site-main .sh20-status-block {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--sh-axis) !important;
padding-right: var(--sh-axis) !important;
}
.site-main .sh20-status-block > * {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* 2) Kontaktformular: rosa Fläche seitenbreit, Inhalt auf der Achse. */
.site-main .sh20-contact,
.site-main .sh20-contact__form-shell,
.site-main .sh20-contact form {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--sh-axis) !important;
padding-right: var(--sh-axis) !important;
}
.site-main .sh20-contact form > *,
.site-main .sh20-contact .sh20-contact__field,
.site-main .sh20-contact label,
.site-main .sh20-contact input,
.site-main .sh20-contact textarea,
.site-main .sh20-contact select,
.site-main .sh20-contact p,
.site-main .sh20-contact h2,
.site-main .sh20-contact h3 {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
text-align: left !important;
}
/* 3) Kooperationsfeld: rosa seitenbreit, Inhalt auf der Achse. */
.site-footer .footer-cta,
.site-footer .footer-cta__inner,
.site-footer .footer-cta .wp-block-group,
.site-main .sh20-kooperation,
.site-main .sh20-cooperation {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--sh-axis) !important;
padding-right: var(--sh-axis) !important;
}
.site-footer .footer-cta .site-shell,
.site-footer .footer-cta > div,
.site-footer .footer-cta h2,
.site-footer .footer-cta h3,
.site-footer .footer-cta p,
.site-footer .footer-cta .footer-cta__lead,
.site-footer .footer-cta .eyebrow,
.site-main .sh20-kooperation > *,
.site-main .sh20-cooperation > * {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* 4) „Lehre als Denkraum": nur die Breite auf die Seitenachse — die
Hintergrundfarbe wird NICHT verändert. */
/* =========================================================================
1.68.0 — Mit den echten Klassennamen aus dem Theme
========================================================================= */
/* 1) Kooperationsfeld — echte Klasse: