/* ============================================================
Schulsozialarbeit ASS — Theme-Stile (Utilities)
Nutzt die theme.json-Preset-Variablen, damit Style-Variation
UND der persistente Front-End-Umschalter dieselben Klassen umfärben.
============================================================ */
/* ---- Metrisch angepasste Fallback-Schriften (verhindern das Flackern/den Layout-Shift
beim Nachladen der Webschrift): Die System-Schrift „Arial" wird per size-adjust/
ascent-override/descent-override so skaliert, dass sie exakt denselben Platz einnimmt
wie Bricolage bzw. Mulish — beim Umschalten von Fallback auf Webschrift ändern sich die
Maße dann NICHT, es gibt keinen sichtbaren Neuaufbau.
Werte AUS DEN ECHTEN FONT-DATEIEN gemessen (fonttools) gegen die System-Arial
(unitsPerEm 2048, xAvgCharWidth 904); Formel wie next/font · Capsize. ---- */
@font-face {
font-family: "Bricolage Fallback";
src: local("Arial");
size-adjust: 115.31%;
ascent-override: 80.65%;
descent-override: 23.41%;
line-gap-override: 0%;
}
@font-face {
font-family: "Mulish Fallback";
src: local("Arial");
size-adjust: 120.07%;
ascent-override: 83.70%;
descent-override: 20.82%;
line-gap-override: 0%;
}
/* Fallback-Familie zusätzlich hier in den Font-Stack schreiben (cache-unabhängig,
versionsgebustet). `html:root` (höhere Spezifität als WordPress' `:root`) stellt sicher,
dass die Überschreibung unabhängig von der Stylesheet-Reihenfolge gewinnt. */
html:root {
--wp--preset--font-family--display: "Bricolage Grotesque", "Bricolage Fallback", "Segoe UI", system-ui, sans-serif;
--wp--preset--font-family--body: "Mulish", "Mulish Fallback", "Segoe UI", system-ui, sans-serif;
}
/* ---- Persistenter Dark-Mode: überschreibt die Preset-Farben ---- */
html[data-theme="dark"] {
--wp--preset--color--brand: #6690a0;
--wp--preset--color--brand-strong: #82a3b0;
--wp--preset--color--brand-subtle: #1e3540;
--wp--preset--color--brand-text: #7ea6b5;
--wp--preset--color--accent: #ea9a00;
--wp--preset--color--accent-subtle: #33280f;
--wp--preset--color--accent-text: #f0c66a;
--wp--preset--color--on-gold: #19171a;
--wp--preset--color--heritage: #a51b30;
--wp--preset--color--ink: #f4f2ee;
--wp--preset--color--surface: #182831;
--wp--preset--color--card: #1b2e37;
--wp--preset--color--sunken: #0f1c23;
--wp--preset--color--border: #294049;
--wp--preset--color--text: #dbe2e5;
--wp--preset--color--muted: #9fb0b6;
--wp--preset--color--on-brand: #0f1c23;
--wp--preset--color--footer: #10191f;
--wp--preset--color--success: #5cbd90;
color-scheme: dark;
}
/* Expliziter Hell-Zustand: stellt die Hell-Palette wieder her, damit der
Umschalter auch dann maßgeblich bleibt, wenn im Site-Editor die
Stil-Variation „Dunkel" global aktiv gesetzt wurde. */
html[data-theme="light"] {
--wp--preset--color--brand: #3e6478;
--wp--preset--color--brand-strong: #2b4553;
--wp--preset--color--brand-subtle: #eef3f5;
--wp--preset--color--brand-text: #3e6478;
--wp--preset--color--accent: #ea9a00;
--wp--preset--color--accent-subtle: #fbedcf;
--wp--preset--color--accent-text: #7a4f00;
--wp--preset--color--on-gold: #19171a;
--wp--preset--color--heritage: #831526;
--wp--preset--color--ink: #19171a;
--wp--preset--color--surface: #f7f6f3;
--wp--preset--color--card: #ffffff;
--wp--preset--color--sunken: #eeece7;
--wp--preset--color--border: #e2ded7;
--wp--preset--color--text: #2c2a2d;
--wp--preset--color--muted: #6b6a6d;
--wp--preset--color--on-brand: #ffffff;
--wp--preset--color--footer: #17242c;
--wp--preset--color--success: #2f7d5b;
color-scheme: light;
}
html { color-scheme: light; scroll-padding-top: 5rem; }
html, body { transition: background-color .25s ease, color .25s ease; }
body {
background: var(--wp--preset--color--surface);
color: var(--wp--preset--color--text);
}
/* ---- Sticky-Footer: Footer bleibt am unteren Bildschirmrand, wenn der Inhalt den
Viewport nicht füllt; bei mehr Inhalt wird er normal nach unten geschoben.
(100dvh statt 100vh für mobile Browser-Leisten – Regel #6.) ---- */
.wp-site-blocks {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh;
}
.wp-site-blocks > main { flex: 1 0 auto; }
/* ---- Eyebrow / Versalien-Label ---- */
.ssa-eyebrow {
font-family: var(--wp--preset--font-family--body);
font-weight: 700; font-size: .75rem; line-height: 1;
letter-spacing: var(--wp--custom--tracking--caps);
text-transform: uppercase;
color: var(--wp--preset--color--brand-text);
}
/* ---- Karte ---- */
.ssa-card {
background: var(--wp--preset--color--card);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--lg);
box-shadow: var(--wp--custom--shadow--sm);
padding: 2rem;
position: relative;
overflow: hidden;
transition: transform .24s ease, box-shadow .24s ease;
}
.ssa-card.ssa-card--hover:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--md); }
.ssa-card--accent::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: var(--wp--preset--color--brand);
}
.ssa-card--accent-gold::before { background: var(--wp--preset--color--accent); }
/* ---- Icon-Kachel ---- */
.ssa-icontile {
width: 48px; height: 48px; flex: 0 0 48px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--wp--custom--radius--md);
background: var(--wp--preset--color--brand-subtle);
color: var(--wp--preset--color--brand);
}
.ssa-icontile svg { width: 26px; height: 26px; }
/* ---- Callout / Hinweisbox ---- */
.ssa-callout {
display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; row-gap: 2px; align-items: start;
padding: 1rem 1.25rem;
border-radius: var(--wp--custom--radius--md);
border-left: 4px solid var(--wp--preset--color--brand);
background: var(--wp--preset--color--brand-subtle);
}
/* Icon links (Spalte 1), Titel + Text rechts (Spalte 2). Neutralisiert evtl. „constrained"-Kinder. */
.ssa-callout > * { max-width: none; margin-inline: 0; }
.ssa-callout > .ssa-callout__icon { grid-column: 1; grid-row: 1; }
.ssa-callout > :not(.ssa-callout__icon) { grid-column: 2; }
.ssa-callout .ssa-callout__icon { display: inline-flex; flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; color: var(--wp--preset--color--brand); }
.ssa-callout .ssa-callout__icon svg { width: 22px; height: 22px; display: block; }
.ssa-callout .ssa-callout__icon .dashicons { font-size: 22px; width: 22px; height: 22px; line-height: 22px; }
.ssa-callout .ssa-callout__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.05rem; color: var(--wp--preset--color--ink); margin: 0 0 2px; }
.ssa-callout .ssa-callout__text { margin: 0; font-size: .95rem; color: var(--wp--preset--color--text); }
.ssa-callout p { margin: 0; font-size: .95rem; color: var(--wp--preset--color--text); }
.ssa-callout--tip { border-left-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent-subtle); }
.ssa-callout--tip .ssa-callout__icon { color: var(--wp--preset--color--accent); }
/* Weitere Presets — Tönung via color-mix (passt sich Hell/Dunkel an), Rahmen/Icon in Vollfarbe. */
.ssa-callout--info { border-left-color: var(--wp--preset--color--brand); background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, transparent); }
.ssa-callout--info .ssa-callout__icon { color: var(--wp--preset--color--brand); }
.ssa-callout--success { border-left-color: var(--wp--preset--color--success); background: color-mix(in srgb, var(--wp--preset--color--success) 14%, transparent); }
.ssa-callout--success .ssa-callout__icon { color: var(--wp--preset--color--success); }
.ssa-callout--warning { border-left-color: #b45309; background: color-mix(in srgb, #b45309 14%, transparent); }
.ssa-callout--warning .ssa-callout__icon { color: #b45309; }
.ssa-callout--caution { border-left-color: #c2410c; background: color-mix(in srgb, #c2410c 14%, transparent); }
.ssa-callout--caution .ssa-callout__icon { color: #c2410c; }
.ssa-callout--error { border-left-color: #b3261e; background: color-mix(in srgb, #b3261e 14%, transparent); }
.ssa-callout--error .ssa-callout__icon { color: #b3261e; }
html[data-theme="dark"] .ssa-callout--warning { border-left-color: #e0922f; } html[data-theme="dark"] .ssa-callout--warning .ssa-callout__icon { color: #e0922f; }
html[data-theme="dark"] .ssa-callout--caution { border-left-color: #f0743a; } html[data-theme="dark"] .ssa-callout--caution .ssa-callout__icon { color: #f0743a; }
html[data-theme="dark"] .ssa-callout--error { border-left-color: #ef5350; } html[data-theme="dark"] .ssa-callout--error .ssa-callout__icon { color: #ef5350; }
/* ---- Vertraulich-Band (Petrol-Fläche) ---- */
.ssa-band {
background: var(--wp--preset--color--brand) !important;
border-radius: var(--wp--custom--radius--xl);
box-shadow: var(--wp--custom--shadow--brand);
padding: clamp(2rem, 5vw, 3rem);
}
.ssa-band, .ssa-band :where(h1,h2,h3,p) { color: var(--wp--preset--color--on-brand) !important; }
.ssa-band :where(h1,h2,h3) { color: #ffffff !important; }
.ssa-band p { color: rgba(255,255,255,.9) !important; }
/* Dunkelmodus: eigenes, ausreichend dunkles Petrol für das Band, damit weißer
Text den AA-Kontrast erreicht (die allgemeine brand-Füllung ist im Dunkelmodus
für weißen Text zu hell). */
html[data-theme="dark"] .ssa-band { background: #294c5c !important; }
/* ---- Foto-Slot (editierbares Bild) ---- */
.ssa-photo img {
width: 100%; height: auto; display: block;
border-radius: var(--wp--custom--radius--lg);
object-fit: cover;
}
.ssa-photo.ssa-photo--tall img { aspect-ratio: 4 / 3; }
/* ---- Kontaktkarte ---- */
.ssa-contactcard {
background: var(--wp--preset--color--card);
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--lg);
box-shadow: var(--wp--custom--shadow--sm);
padding: 2rem;
}
.ssa-hours {
background: var(--wp--preset--color--brand-subtle);
border-radius: var(--wp--custom--radius--md);
padding: .75rem 1rem; margin-top: 1rem;
}
.ssa-hours .ssa-eyebrow { margin-bottom: 4px; display: block; }
/* ---- Marke / Logo (per Maske eingefärbt) ---- */
.ssa-brandmark {
display: inline-block; width: 44px; height: 44px; flex: 0 0 44px;
background: var(--wp--preset--color--brand);
-webkit-mask: url("../img/ssa-mark-flat.svg") center / contain no-repeat;
mask: url("../img/ssa-mark-flat.svg") center / contain no-repeat;
}
html[data-theme="dark"] .ssa-brandmark { background: #ffffff; }
.ssa-brand-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ssa-brand-lockup b { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.125rem; color: var(--wp--preset--color--ink); line-height: 1.05; }
.ssa-brand-lockup span { font-size: .75rem; color: var(--wp--preset--color--muted); }
/* ---- Persistenter Theme-Umschalter ---- */
.ssa-theme-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--md);
background: var(--wp--preset--color--brand-subtle);
color: var(--wp--preset--color--brand);
cursor: pointer;
}
.ssa-theme-toggle:hover { background: var(--wp--preset--color--sunken); }
.ssa-theme-toggle svg { width: 20px; height: 20px; }
.ssa-theme-toggle .ssa-icon-sun { display: none; }
html[data-theme="dark"] .ssa-theme-toggle .ssa-icon-sun { display: block; }
html[data-theme="dark"] .ssa-theme-toggle .ssa-icon-moon { display: none; }
/* ---- Sticky Reveal-Header ---- */
.wp-site-blocks > header.wp-block-template-part,
.site-header {
position: sticky; top: 0; z-index: 30;
background: color-mix(in srgb, var(--wp--preset--color--surface) 90%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--wp--preset--color--border);
transition: transform .28s ease;
}
body.ssa-header-hidden .site-header,
body.ssa-header-hidden .wp-site-blocks > header.wp-block-template-part { transform: translateY(-100%); }
/* ============================================================
Mobiles Hauptmenü — Material-Drawer (von rechts)
Das Core-Navigations-Overlay (wp:navigation, overlayMenu:"mobile") wird
zu einem von rechts einfahrenden Material-Drawer umgestaltet:
Öffnen per Hamburger (drei Balken) oder Swipe vom rechten Bildschirmrand,
Schließen per X, Escape, Tap außerhalb (Scrim) oder Swipe nach rechts.
Der Farbschema-Umschalter wird mobil per JS ins Menü eingesetzt.
Mobile-first, Touch-Ziele >= 44px, prefers-reduced-motion respektiert.
============================================================ */
/* ---- Hamburger-Button: drei Balken (Core-SVG durch CSS ersetzt) ---- */
.site-header .wp-block-navigation__responsive-container-open {
width: 44px; height: 44px; padding: 0;
align-items: center; justify-content: center;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--md);
background: var(--wp--preset--color--brand-subtle);
color: var(--wp--preset--color--brand);
}
.site-header .wp-block-navigation__responsive-container-open svg { display: none; }
.site-header .wp-block-navigation__responsive-container-open::before {
content: ""; width: 20px; height: 2px; border-radius: 2px;
background: currentColor;
box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
/* Header-Umschalter mobil ausblenden — er erscheint dann im Drawer.
Der ins Menü eingesetzte Umschalter (…__toggle) bleibt sichtbar. */
body.ssa-nav-collapsed .site-header .ssa-theme-toggle:not(.ssa-drawer-tools__toggle) { display: none; }
body.ssa-drawer-open { overflow: hidden; }
/* ---- Scrim (abgedunkelter Hintergrund) = geöffneter Container ---- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
position: fixed; inset: 0; z-index: 1000;
display: flex; justify-content: flex-end; align-items: stretch;
padding: 0;
background: rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
animation: ssa-drawer-scrim .28s ease both;
}
/* ---- Panel = Dialog, rechtsbündig, volle Höhe (Material-Elevation) ---- */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
display: block; width: min(360px, 86vw); max-width: none; height: 100%; margin: 0; padding: 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
position: relative; width: 100%; height: 100%; box-sizing: border-box;
display: flex; flex-direction: column;
padding: 4.5rem 1.25rem 1.5rem;
background: var(--wp--preset--color--surface);
box-shadow: -12px 0 32px rgba(0, 0, 0, 0.28);
overflow-y: auto; -webkit-overflow-scrolling: touch;
animation: ssa-drawer-slide .3s cubic-bezier(.4, 0, .2, 1) both;
}
/* Schließen-Button (X) oben rechts im Panel */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
position: absolute; top: .9rem; right: 1rem;
width: 44px; height: 44px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--wp--custom--radius--md);
color: var(--wp--preset--color--text);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
background: var(--wp--preset--color--sunken);
}
/* Inhalt füllt den Drawer; Menü oben, Werkzeug-Zeile unten */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch;
}
/* Vertikale Menüliste, großzügige Touch-Ziele, Untermenüs aufgeklappt */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: .15rem;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
display: flex; align-items: center; width: 100%;
min-height: 44px; padding: .65rem .6rem;
border-radius: var(--wp--custom--radius--md);
font-size: 1.05rem; color: var(--wp--preset--color--ink);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
background: var(--wp--preset--color--brand-subtle); color: var(--wp--preset--color--brand-text);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
gap: .15rem; padding-left: .75rem; border-left: 2px solid var(--wp--preset--color--border);
margin-left: .35rem;
}
/* Werkzeug-Zeile (Farbschema-Umschalter) am unteren Rand des Drawers */
.ssa-drawer-tools {
margin-top: auto; padding-top: 1.25rem;
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
border-top: 1px solid var(--wp--preset--color--border);
}
.ssa-drawer-tools__label { font-weight: 600; color: var(--wp--preset--color--text); }
.ssa-drawer-tools__toggle { flex: 0 0 auto; }
@keyframes ssa-drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ssa-drawer-scrim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.site-header .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
animation: none;
}
}
/* ---- Angebot-Zeile (Icon + Text) ---- */
.ssa-service { display: flex; gap: 1rem; align-items: flex-start; }
.ssa-service .ssa-service__body h3 { margin: 0 0 .35rem; font-size: 1.125rem; }
.ssa-service .ssa-service__body p { margin: 0; font-size: .95rem; color: var(--wp--preset--color--text); }
/* ---- Badges ---- */
.ssa-badges { display: flex; flex-wrap: wrap; gap: .5rem; }
.ssa-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: var(--wp--custom--radius--pill);
font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
background: var(--wp--preset--color--brand-subtle); color: var(--wp--preset--color--brand-text);
}
.ssa-badge--gold { background: var(--wp--preset--color--accent-subtle); color: var(--wp--preset--color--accent-text); }
.ssa-badge--absent { background: var(--wp--preset--color--heritage-subtle, #f6e2e5); color: var(--wp--preset--color--heritage-text, #831526); }
.ssa-absence-note { font-weight: 600; color: var(--wp--preset--color--heritage-text, #831526); margin: .25rem 0; }
/* ---- Brotkrumen ---- */
.ssa-breadcrumbs { margin: 0 0 1rem; font-size: .85rem; }
.ssa-breadcrumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.ssa-breadcrumbs__item { display: inline-flex; align-items: center; gap: .35rem; color: var(--wp--preset--color--muted); }
.ssa-breadcrumbs__item + .ssa-breadcrumbs__item::before { content: "›"; color: var(--wp--preset--color--muted); }
.ssa-breadcrumbs__item a { color: var(--wp--preset--color--brand-text); text-decoration: none; }
.ssa-breadcrumbs__item a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ssa-breadcrumbs__item [aria-current="page"] { color: var(--wp--preset--color--text); font-weight: 600; }
/* ---- Notfall-Hilfe / Schnell-Verlassen ---- */
.ssa-notfall { position: fixed; right: 1rem; bottom: 1rem; z-index: 1000; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
.ssa-notfall__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border: 0; border-radius: 999px; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.ssa-notfall__help { background: var(--wp--preset--color--accent, #ea9a00); color: var(--wp--preset--color--on-gold, #19171a); }
.ssa-notfall__btn:focus-visible { outline: 3px solid var(--wp--preset--color--brand, #3e6478); outline-offset: 2px; }
/* Dialog „Schnelle Hilfe": exakt im Viewport zentriert — horizontal UND vertikal. Statt auf
margin:auto des Top-Layers zu vertrauen (bricht, sobald ein Vorfahr transform/filter/contain
setzt), wird hart per position:fixed + 50/50 + translate zentriert. notfall.js hängt den Dialog
zusätzlich direkt an , damit kein transformierter Vorfahr die Zentrierung „einfängt".
Höhenbegrenzt + scrollbar, „Premium"-Anmutung. Dark/Light über die Tokens. */
.ssa-hilfe {
position: fixed; inset: auto; top: 50%; left: 50%;
transform: translate(-50%, -50%); margin: 0;
max-width: 480px; width: calc(100% - 2rem);
max-height: calc(100dvh - 4rem);
border: 1px solid var(--wp--preset--color--border, #e2ded7); border-radius: var(--wp--custom--radius--lg, 18px);
padding: 0; overflow: auto;
color: var(--wp--preset--color--text, #2c2a2d); background: var(--wp--preset--color--card, #fff);
box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.ssa-hilfe::backdrop { background: color-mix(in srgb, #0b141a 62%, transparent); backdrop-filter: blur(2px); }
.ssa-hilfe__inner { padding: 1.75rem; }
.ssa-hilfe__inner h2 { margin: 0 0 .35rem; font-family: var(--wp--preset--font-family--display, inherit); font-weight: 800; color: var(--wp--preset--color--ink, #19171a); }
.ssa-hilfe__inner > p { margin: 0 0 1rem; color: var(--wp--preset--color--muted, #6b6a6d); }
.ssa-hilfe__list { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
/* Hervorgehobene Karten, dezent animiert; keine Unterstreichung. */
.ssa-hilfe__list a {
display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; min-height: 44px;
border: 1px solid var(--wp--preset--color--border, #e2ded7);
border-left: 4px solid var(--wp--preset--color--brand, #3e6478);
border-radius: var(--wp--custom--radius--md, 12px);
background: var(--wp--preset--color--surface, #f7f6f3);
box-shadow: var(--wp--custom--shadow--sm, 0 2px 6px rgba(24,40,49,.07));
text-decoration: none !important; color: var(--wp--preset--color--ink, #19171a);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.ssa-hilfe__list a strong { color: var(--wp--preset--color--ink, #19171a); text-decoration: none !important; }
.ssa-hilfe__list a span { color: var(--wp--preset--color--muted, #6b6a6d); font-size: .85rem; text-decoration: none !important; }
.ssa-hilfe__list a:hover, .ssa-hilfe__list a:focus-visible {
transform: translateY(-2px);
border-left-color: var(--wp--preset--color--accent, #ea9a00);
background: var(--wp--preset--color--brand-subtle, #eef3f5);
box-shadow: var(--wp--custom--shadow--md, 0 10px 24px rgba(24,40,49,.14));
}
.ssa-hilfe__list a:focus-visible { outline: 3px solid var(--wp--preset--color--brand, #3e6478); outline-offset: 2px; }
.ssa-hilfe__close { min-height: 44px; margin-top: .25rem; padding: .55rem 1.75rem; border: 0; border-radius: 999px; background: var(--wp--preset--color--brand, #3e6478); color: var(--wp--preset--color--on-brand, #fff); font-weight: 700; cursor: pointer; transition: background .15s ease; }
.ssa-hilfe__close:hover { background: var(--wp--preset--color--brand-strong, #2b4553); }
@media (prefers-reduced-motion: reduce) {
.ssa-hilfe__list a { transition: none; }
.ssa-hilfe__list a:hover, .ssa-hilfe__list a:focus-visible { transform: none; }
}
@media print { .ssa-notfall { display: none; } }
/* ---- Schnelle-Hilfe-Ausstieg auf der Kontaktseite ---- */
.ssa-quickhelp { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin: 1rem 0; }
.ssa-quickhelp a {
display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; min-height: 44px;
border: 1px solid var(--wp--preset--color--border); border-left: 4px solid var(--wp--preset--color--brand);
border-radius: var(--wp--custom--radius--md, 12px); background: var(--wp--preset--color--card);
box-shadow: var(--wp--custom--shadow--sm, 0 2px 6px rgba(24,40,49,.07));
text-decoration: none !important; color: var(--wp--preset--color--ink);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ssa-quickhelp a strong { color: var(--wp--preset--color--ink); text-decoration: none !important; }
.ssa-quickhelp a span { color: var(--wp--preset--color--muted); font-size: .85rem; text-decoration: none !important; }
.ssa-quickhelp a:hover, .ssa-quickhelp a:focus-visible { transform: translateY(-2px); border-left-color: var(--wp--preset--color--accent); box-shadow: var(--wp--custom--shadow--md, 0 10px 24px rgba(24,40,49,.14)); }
.ssa-quickhelp a:focus-visible { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ssa-quickhelp a { transition: none; } .ssa-quickhelp a:hover, .ssa-quickhelp a:focus-visible { transform: none; } }
/* ---- Checkliste (grüne Haken) ---- */
.ssa-checklist { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.ssa-checklist li { position: relative; padding-left: 1.9rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.ssa-checklist li::before {
content: ""; position: absolute; left: 0; top: 0.05em; width: 1.25rem; height: 1.25rem;
background: var(--wp--preset--color--success);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12l3 3 5-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ---- Portfolio-/Projektkarte ---- */
.ssa-portfolio-card {
background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--lg); overflow: hidden; box-shadow: var(--wp--custom--shadow--sm);
}
.ssa-portfolio-card .wp-block-media-text__content { padding: 2rem; }
.ssa-portfolio-card .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; }
/* ---- Projekt-Portfolio (dynamischer Block schulsozialarbeit-ass/portfolio) ---- */
.ssa-portfolio-grid { display: grid; grid-template-columns: repeat(var(--ssa-cols, 2), 1fr); gap: 1.5rem; }
@media (max-width: 782px) { .ssa-portfolio-grid { grid-template-columns: 1fr; } }
.ssa-project-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.ssa-project-card__media { display: block; }
.ssa-project-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.ssa-project-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; }
.ssa-project-card__title { margin: 0; font-size: 1.25rem; }
.ssa-project-card__title a { text-decoration: none; color: var(--wp--preset--color--ink); }
.ssa-project-card__title a:hover { color: var(--wp--preset--color--brand-text); }
.ssa-project-card__subtitle { color: var(--wp--preset--color--brand-text); font-weight: 600; margin: 0; }
.ssa-project-card__excerpt { color: var(--wp--preset--color--text); margin: 0; }
.ssa-project-card__more { margin-top: auto; }
.ssa-project-card__team { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.ssa-project-card__team-label { color: var(--wp--preset--color--muted); font-size: .85rem; }
.ssa-project-team { display: flex; flex-wrap: wrap; gap: .5rem; }
.ssa-project-team__item { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--wp--preset--color--text); }
.ssa-project-team__avatar img, .ssa-project-team .ssa-avatar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ssa-project-team__name { font-size: .85rem; display: flex; flex-direction: column; line-height: 1.15; }
.ssa-project-team__role { color: var(--wp--preset--color--muted); font-size: .78rem; }
.ssa-project-team--lg .ssa-project-team__avatar img, .ssa-project-team--lg .ssa-avatar img { width: 48px; height: 48px; }
/* Einzelprojekt-Detailfelder */
.ssa-projekt-details { display: flex; flex-direction: column; gap: 2rem; margin-top: 2rem; }
.ssa-projekt-section h2 { margin: 0 0 .75rem; }
.ssa-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.ssa-gallery-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; }
.ssa-projekt-video { margin: 0 0 1rem; }
.ssa-projekt-video video { width: 100%; border-radius: 12px; display: block; background: #000; }
/* ---- Team-Raster ---- */
.ssa-team-member {
background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--custom--shadow--sm);
padding: 1.5rem; text-align: center;
}
/* Avatar über die Klasse (nicht `img`) dimensionieren — im Frontend ersetzt der Bildschutz
das ![]()
durch ein