Mitmachen: Ehrenamtsseite mit Stellen-Filter
Neue Seite /mitmachen, die offene Ehrenamtsstellen aus data/mitmachen.json als position-card-Komponente listet, mit clientseitigem Bereichsfilter (position-filter.js, progressive enhancement) und JobPosting-Schema (job_posting_schema(), employmentType VOLUNTEER). Route ergänzt. Enthält zudem kleine person-card__contact-Stilanpassungen (gleiche CSS-Sektion). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ
This commit is contained in:
@@ -713,6 +713,270 @@
|
||||
text-underline-offset: 0.25em;
|
||||
}
|
||||
|
||||
/* === mitmachen / positions (Ehrenamt-Stellen) === */
|
||||
/* Filter-Stripe (Alle/Fußball/Turnen) — Unterstrich-Tabbar wie group-tabs */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.filter-bar__tab {
|
||||
padding: 0.65rem 1.2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
box-shadow: inset 0 -2px 0 var(--clr-glass-border);
|
||||
font-family: var(--ff-body);
|
||||
font-size: var(--fs-500);
|
||||
color: var(--clr-text-muted);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.filter-bar__tab:first-child {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.filter-bar__tab:hover {
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.filter-bar__tab[aria-pressed="true"] {
|
||||
color: var(--clr-text);
|
||||
box-shadow: inset 0 -2px 0 var(--clr-accent);
|
||||
}
|
||||
|
||||
.filter-bar__tab:focus-visible {
|
||||
outline: 2px solid var(--clr-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.positions__list {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.positions__empty {
|
||||
margin: 0;
|
||||
padding: 2.5rem 0;
|
||||
max-width: 60ch;
|
||||
color: var(--clr-text-muted);
|
||||
font-size: var(--fs-500);
|
||||
line-height: var(--lh-body);
|
||||
}
|
||||
|
||||
.positions__empty[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.positions__empty a {
|
||||
color: var(--clr-text);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
/* "Warum mithelfen?": geteiltes sponsor-arguments-Raster, hier mit Überschrift
|
||||
(nur auf dieser Seite — Partner-/Sportheim-Variante bleibt ohne Heading unberührt) */
|
||||
#warum-mithelfen > .container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#warum-mithelfen .sponsor-arguments__intro {
|
||||
max-width: 60ch;
|
||||
margin: 1rem auto 0;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
#warum-mithelfen .sponsor-arguments__grid {
|
||||
margin-top: 2.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Aufklappbare Stelle (details/summary, FAQ-Mechanik): eingeklappt nur Bereich + Titel */
|
||||
.position-card {
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-radius: var(--radius-card);
|
||||
overflow: hidden;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
|
||||
.position-card[open] {
|
||||
border-color: var(--clr-glass-border-strong, var(--clr-glass-border));
|
||||
}
|
||||
|
||||
/* display:grid o. Ä. würde sonst [hidden]{display:none} überschreiben — explizit halten */
|
||||
.position-card[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Klickzeile: Icon + Bereich/Titel + Chevron */
|
||||
.position-card__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.position-card__head::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.position-card__head:hover {
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
}
|
||||
|
||||
.position-card__head:focus-visible {
|
||||
outline: 2px solid var(--clr-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.position-card__icon {
|
||||
flex-shrink: 0;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background: var(--clr-accent);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.15rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.position-card__heading {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.position-card__area {
|
||||
display: block;
|
||||
font-family: var(--ff-body);
|
||||
font-size: var(--fs-300);
|
||||
font-weight: var(--fw-bold);
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-muted);
|
||||
margin: 0 0 0.2rem;
|
||||
}
|
||||
|
||||
.position-card__title {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-675);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--lh-heading);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.position-card__chevron {
|
||||
flex: none;
|
||||
font-size: 0.9rem;
|
||||
color: var(--clr-text-muted);
|
||||
transition: transform var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.position-card[open] .position-card__chevron {
|
||||
transform: rotate(180deg);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
/* Aufgeklappter Inhalt: Detailspalte + Ansprechpartner */
|
||||
.position-card__body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(0, 16rem);
|
||||
gap: 2.5rem;
|
||||
align-items: start;
|
||||
padding: 0 1.5rem 1.5rem 5rem;
|
||||
animation: faq-reveal 260ms ease;
|
||||
}
|
||||
|
||||
.position-card__main > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.position-card__summary {
|
||||
color: var(--clr-text-muted);
|
||||
font-size: var(--fs-500);
|
||||
line-height: var(--lh-body);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.position-card__tasks {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1.25rem 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.position-card__tasks li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 0.625rem;
|
||||
font-size: var(--fs-500);
|
||||
line-height: var(--lh-body);
|
||||
}
|
||||
|
||||
.position-card__check {
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.2em;
|
||||
font-size: 1rem;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.position-card__meta {
|
||||
margin: 1.25rem 0 0;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.position-card__meta-row {
|
||||
display: grid;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.position-card__meta dt {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: var(--fs-300);
|
||||
font-weight: var(--fw-bold);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.position-card__meta-icon {
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
.position-card__meta dd {
|
||||
margin: 0;
|
||||
font-size: var(--fs-500);
|
||||
line-height: var(--lh-body);
|
||||
}
|
||||
|
||||
/* Kompakte Kontakt-Karte: flacheres Foto als im Ansprechpartner-Grid */
|
||||
.position-card__contact .person-card__media img {
|
||||
aspect-ratio: 4 / 3.4;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.position-card__body {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.position-card__contact {
|
||||
max-width: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* === contact form === */
|
||||
.contact__inner {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user