Partner werden: Sponsoring-Argumente & Werbekanäle
Überarbeitete Seite /partner-werden mit Argument-Karten (sponsor-arguments) und einer Übersicht der Werbekanäle (sponsor-channels) aus data/partner-werden.json, inkl. zugehöriger Icons. 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:
@@ -595,6 +595,192 @@
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
/* === sponsor-arguments === */
|
||||
.sponsor-arguments__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2.5rem 3rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sponsor-arguments__item {
|
||||
display: flex;
|
||||
gap: 1.25rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sponsor-arguments__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.1rem;
|
||||
color: #fff;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.sponsor-arguments__title {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-675);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--lh-heading);
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.sponsor-arguments__text {
|
||||
color: var(--clr-text-muted);
|
||||
font-size: var(--fs-500);
|
||||
line-height: var(--lh-body);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sponsor-arguments__grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* === sponsor-channels === */
|
||||
.sponsor-channels > .container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sponsor-channels__intro {
|
||||
max-width: 65ch;
|
||||
margin-inline: auto;
|
||||
margin-top: 1rem;
|
||||
color: var(--clr-text-muted);
|
||||
}
|
||||
|
||||
.sponsor-channels__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
margin-top: 2.5rem;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sponsor-channels__card {
|
||||
background: var(--clr-glass-bg);
|
||||
border: 1px solid var(--clr-glass-border);
|
||||
border-top: 3px solid var(--clr-accent);
|
||||
border-radius: var(--radius-card);
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
text-align: left;
|
||||
transition: background var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
|
||||
.sponsor-channels__card:hover {
|
||||
background: rgb(255 255 255 / 0.07);
|
||||
box-shadow: 0 8px 32px rgb(0 0 0 / 0.35);
|
||||
}
|
||||
|
||||
.sponsor-channels__head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.sponsor-channels__kicker {
|
||||
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 1rem;
|
||||
}
|
||||
|
||||
.sponsor-channels__icon {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
background: var(--clr-accent);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 1.25rem;
|
||||
color: #fff;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.sponsor-channels__title {
|
||||
font-family: var(--ff-heading);
|
||||
font-size: var(--fs-700);
|
||||
text-transform: uppercase;
|
||||
line-height: var(--lh-heading);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.sponsor-channels__desc {
|
||||
color: var(--clr-text-muted);
|
||||
font-size: var(--fs-500);
|
||||
line-height: var(--lh-body);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sponsor-channels__divider {
|
||||
border: none;
|
||||
border-top: 1px solid var(--clr-glass-border);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.sponsor-channels__features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sponsor-channels__features li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
font-size: var(--fs-500);
|
||||
color: var(--clr-text);
|
||||
}
|
||||
|
||||
.sponsor-channels__check {
|
||||
flex-shrink: 0;
|
||||
font-size: 1rem;
|
||||
color: var(--clr-accent);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sponsor-channels__grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.sponsor-channels__title {
|
||||
font-size: var(--fs-700);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 992px) {
|
||||
.sponsor-channels__grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.sponsor-channels__card:last-child:nth-child(odd) {
|
||||
grid-column: 1 / -1;
|
||||
max-width: 50%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* === persons (Ansprechpartner-Visitenkarten) === */
|
||||
.persons > .container {
|
||||
text-align: center;
|
||||
|
||||
1
public/assets/icons/geo-alt-fill.svg
Normal file
1
public/assets/icons/geo-alt-fill.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10m0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6"/></svg>
|
||||
|
After Width: | Height: | Size: 161 B |
1
public/assets/icons/globe2.svg
Normal file
1
public/assets/icons/globe2.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855q-.215.403-.395.872c.705.157 1.472.257 2.282.287zM4.249 3.539q.214-.577.481-1.078a7 7 0 0 1 .597-.933A7 7 0 0 0 3.051 3.05q.544.277 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9 9 0 0 1-1.565-.667A6.96 6.96 0 0 0 1.018 7.5zm1.4-2.741a12.3 12.3 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332M8.5 5.09V7.5h2.99a12.3 12.3 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.6 13.6 0 0 1 7.5 10.91V8.5zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741zm-3.282 3.696q.18.469.395.872c.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a7 7 0 0 1-.598-.933 9 9 0 0 1-.481-1.079 8.4 8.4 0 0 0-1.198.49 7 7 0 0 0 2.276 1.522zm-1.383-2.964A13.4 13.4 0 0 1 3.508 8.5h-2.49a6.96 6.96 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667m6.728 2.964a7 7 0 0 0 2.275-1.521 8.4 8.4 0 0 0-1.197-.49 9 9 0 0 1-.481 1.078 7 7 0 0 1-.597.933M8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855q.216-.403.395-.872A12.6 12.6 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.96 6.96 0 0 0 14.982 8.5h-2.49a13.4 13.4 0 0 1-.437 3.008M14.982 7.5a6.96 6.96 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008zM11.27 2.461q.266.502.482 1.078a8.4 8.4 0 0 0 1.196-.49 7 7 0 0 0-2.275-1.52c.218.283.418.597.597.932m-.488 1.343a8 8 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
2
public/assets/icons/newspaper.svg
Normal file
2
public/assets/icons/newspaper.svg
Normal file
@@ -0,0 +1,2 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v10.528c0 .3-.05.654-.238.972h.738a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 1 1 0v9a1.5 1.5 0 0 1-1.5 1.5H1.497A1.497 1.497 0 0 1 0 13.5zM12 14c.37 0 .654-.211.853-.441.092-.106.147-.279.147-.531V2.5a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5v11c0 .278.223.5.497.5z"/>
|
||||
<path d="M2 3h10v2H2zm0 3h4v3H2zm0 4h4v1H2zm0 2h4v1H2zm5-6h2v1H7zm3 0h2v1h-2zM7 8h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2zm-3 2h2v1H7zm3 0h2v1h-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 530 B |
Reference in New Issue
Block a user