/* ==========================================================
PAGE: Partner
Partnervereine links, Haupttext mittig, Organisationen rechts
========================================================== */

.partner-main {
/* ========================================================
STELLSCHRAUBEN
Hier kannst du die Seite später bequem feinjustieren.
======================================================== */

/* Gesamtseite */
--partner-page-padding-top: 3.4rem;
--partner-page-padding-bottom: 6rem;

/* Desktop-Layout */
--partner-layout-width: 96vw;
--partner-layout-gap: 3.2rem;

/* Mittlerer Hauptbereich */
--partner-hero-padding-top: 1rem;
--partner-hero-title-width: 920px;
--partner-hero-text-width: 780px;
--partner-hero-title-size: 4.2rem;
--partner-hero-text-size: 1.16rem;

/* Netzwerkball */
--partner-network-size: 18.6rem;
--partner-network-gap: 0.65rem;

/* Seitenbereiche links/rechts */
--partner-panel-padding-top: 1.4rem;
--partner-panel-title-size: 2.35rem;
--partner-panel-text-width: 520px;
--partner-panel-text-size: 0.98rem;

/* Partner-/Verband-Symbole neben den oberen Texten */
--partner-symbol-size: 8.8rem;
--partner-symbol-gap: 1rem;

/* Trennlinie */
--partner-divider-margin-top: 1.35rem;
--partner-divider-margin-bottom: 1.6rem;

/* Linkkarten */
--partner-card-gap: 1rem;
--partner-card-padding: 1rem;
--partner-card-logo-column: 104px;
--partner-card-logo-width: 104px;
--partner-card-logo-height: 88px;

/* Hinweisbereich unten */
--partner-note-margin-top: 4rem;
--partner-note-padding-y: 2.4rem;

width: 100%;
padding: var(--partner-page-padding-top) 0 var(--partner-page-padding-bottom);
}

/* ==========================================================
Grundlayout
========================================================== */

.partner-layout {
width: var(--partner-layout-width);
max-width: none;
margin: 0 auto;

display: grid;
grid-template-columns:
minmax(300px, 0.9fr)
minmax(460px, 1.15fr)
minmax(300px, 0.9fr);
grid-template-areas: "partners intro orgs";
gap: var(--partner-layout-gap);
align-items: start;
}

.partner-panel-left {
grid-area: partners;
}

.partner-hero {
grid-area: intro;
}

.partner-panel-right {
grid-area: orgs;
}

/* ==========================================================
Haupttext Mitte
========================================================== */

.partner-hero {
text-align: center;
padding-top: var(--partner-hero-padding-top);
position: relative;
}

.partner-hero::before {
content: "";
display: block;
width: var(--partner-network-size);
height: var(--partner-network-size);
margin: 0 auto var(--partner-network-gap);

background-image: url("/bilder/grafiken/netzwerkball.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;

filter: drop-shadow(0 14px 24px rgba(23, 32, 51, 0.16));
pointer-events: none;
}

.partner-kicker {
margin: 0 0 0.85rem;
color: #6c520c;
font-size: var(--font-small);
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.partner-hero h1 {
max-width: var(--partner-hero-title-width);
margin: 0 auto 1.35rem;
color: #172033;
font-size: var(--partner-hero-title-size);
line-height: 1.06;
letter-spacing: -0.05em;
}

.partner-hero p {
max-width: var(--partner-hero-text-width);
margin: 0 auto 1rem;
color: #506174;
font-size: var(--partner-hero-text-size);
line-height: 1.72;
}

.partner-hero p:last-child {
margin-bottom: 0;
}

/* ==========================================================
Link-Spalten links/rechts
========================================================== */

.partner-panel {
min-width: 0;
padding-top: var(--partner-panel-padding-top);
}

.partner-panel-head {
display: grid;
align-items: center;
column-gap: var(--partner-symbol-gap);
text-align: center;
}

.partner-panel-left .partner-panel-head {
grid-template-columns: minmax(0, 1fr) var(--partner-symbol-size);
grid-template-areas:
"kicker symbol"
"title symbol"
"text symbol";
}

.partner-panel-right .partner-panel-head {
grid-template-columns: var(--partner-symbol-size) minmax(0, 1fr);
grid-template-areas:
"symbol kicker"
"symbol title"
"symbol text";
}

.partner-panel-head::before,
.partner-panel-head::after {
content: "";
grid-area: symbol;
display: block;
width: var(--partner-symbol-size);
height: var(--partner-symbol-size);

background-repeat: no-repeat;
background-position: center;
background-size: contain;

filter: drop-shadow(0 14px 24px rgba(23, 32, 51, 0.13));
pointer-events: none;
}

.partner-panel-left .partner-panel-head::before,
.partner-panel-right .partner-panel-head::after {
content: none;
}

.partner-panel-left .partner-panel-head::after {
background-image: url("/bilder/grafiken/partner.png");
}

.partner-panel-right .partner-panel-head::before {
background-image: url("/bilder/grafiken/verband.png");
}

.partner-panel-kicker {
grid-area: kicker;
margin: 0 0 0.45rem;
color: #6c520c;
font-size: var(--font-small);
font-weight: 800;
}

.partner-panel h2 {
grid-area: title;
margin: 0;
color: #172033;
font-size: var(--partner-panel-title-size);
line-height: 1.12;
letter-spacing: -0.035em;
}

.partner-panel-text {
grid-area: text;
max-width: var(--partner-panel-text-width);
margin: 0.75rem auto 0;
color: #506174;
font-size: var(--partner-panel-text-size);
line-height: 1.58;
}

.partner-divider {
width: 100%;
height: 2px;
margin: var(--partner-divider-margin-top) 0 var(--partner-divider-margin-bottom);
border-radius: 999px;
background: linear-gradient(
90deg,
rgba(23, 32, 51, 0.08),
rgba(216, 170, 45, 0.9),
rgba(23, 32, 51, 0.08)
);
}

.partner-link-list {
display: grid;
gap: var(--partner-card-gap);
}

/* ==========================================================
Link-Blöcke
Keine Kontaktkarten, sondern Partner-Linkflächen
========================================================== */

.partner-link-item {
display: grid;
grid-template-columns: var(--partner-card-logo-column) minmax(0, 1fr);
gap: 1rem;
align-items: center;

width: 100%;
padding: var(--partner-card-padding);
box-sizing: border-box;

color: inherit;
text-decoration: none;

background:
linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.66));
border: 1px solid rgba(23, 32, 51, 0.09);
border-radius: var(--radius-large);
box-shadow:
0 12px 30px rgba(23, 32, 51, 0.08),
0 1px 0 rgba(255, 255, 255, 0.85) inset;

position: relative;
overflow: hidden;

transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
background-color 0.2s ease;
}

.partner-link-item::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(180deg, #f0d36b, #d8aa2d);
}

.partner-link-logo,
.partner-link-content {
position: relative;
z-index: 1;
}

/* ==========================================================
Logos ohne extra Rahmen / ohne extra Hintergrund
========================================================== */

.partner-link-logo {
display: flex;
align-items: center;
justify-content: center;

width: var(--partner-card-logo-width);
height: var(--partner-card-logo-height);
padding: 0;
box-sizing: border-box;

background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}

.partner-link-logo img {
display: block;
width: 100%;
max-width: 96px;
max-height: 74px;
object-fit: contain;
}

.partner-link-logo-placeholder {
color: rgba(23, 32, 51, 0.38);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-size: 1.75rem;
font-weight: 900;
letter-spacing: -0.06em;
}

/* ==========================================================
Link-Inhalt
========================================================== */

.partner-link-content {
min-width: 0;
display: grid;
gap: 0.28rem;
}

.partner-link-kicker {
color: #6c520c;
font-size: 0.8rem;
font-weight: 850;
line-height: 1.2;
}

.partner-link-title {
color: #172033;
font-size: 1.22rem;
font-weight: 850;
line-height: 1.18;
letter-spacing: -0.02em;
}

.partner-link-text {
color: #506174;
font-size: 0.95rem;
line-height: 1.45;
}

.partner-link-action {
justify-self: start;
margin-top: 0.35rem;

display: inline-flex;
align-items: center;
justify-content: center;

min-height: 2.35rem;
padding: 0.42rem 0.75rem;
box-sizing: border-box;

color: #fff8dc;
background: rgba(23, 32, 51, 0.94);
border: 1px solid rgba(246, 221, 120, 0.38);
border-radius: var(--radius-medium);

font-size: 0.84rem;
font-weight: 850;
line-height: 1.15;
text-align: center;
text-decoration: none;

box-shadow:
0 7px 16px rgba(0, 0, 0, 0.15),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.partner-link-action::after {
content: "›";
margin-left: 0.4rem;
color: #f6dd78;
font-size: 1.05em;
}

/* ==========================================================
Hinweis unten
Breiter Abschlussbereich, kompakt und eigenständig
========================================================== */

.partner-note {
width: 100%;
max-width: none;
margin: var(--partner-note-margin-top) 0 0;
padding: var(--partner-note-padding-y) var(--site-gutter);
box-sizing: border-box;

background:
radial-gradient(circle at 12% 22%, rgba(246, 221, 120, 0.16), transparent 28%),
radial-gradient(circle at 90% 82%, rgba(216, 170, 45, 0.14), transparent 30%),
linear-gradient(135deg, rgba(23, 32, 51, 0.97), rgba(35, 48, 67, 0.95));

border-top: 1px solid rgba(246, 221, 120, 0.24);
border-bottom: 1px solid rgba(246, 221, 120, 0.12);

position: relative;
overflow: hidden;
}

.partner-note::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(820px, 86vw);
height: 2px;
transform: translateX(-50%);
border-radius: 999px;
background: linear-gradient(
90deg,
transparent,
rgba(246, 221, 120, 0.82),
transparent
);
}

.partner-note::after {
content: "";
position: absolute;
right: -5rem;
bottom: -5.5rem;
width: 15rem;
height: 15rem;
border-radius: 50%;
background: rgba(246, 221, 120, 0.07);
pointer-events: none;
}

.partner-note-inner {
width: min(1120px, 100%);
margin: 0 auto;
padding: 0;
box-sizing: border-box;

text-align: center;

background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;

position: relative;
z-index: 1;
overflow: visible;
}

.partner-note-inner::before {
content: none;
}

.partner-note h2 {
margin: 0 0 0.8rem;
color: #fff;
font-size: 2rem;
line-height: 1.14;
letter-spacing: -0.04em;
}

.partner-note p {
max-width: 980px;
margin: 0 auto 0.78rem;
color: rgba(255, 255, 255, 0.8);
font-size: 1.04rem;
line-height: 1.68;
}

.partner-note p:last-of-type {
margin-bottom: 1.2rem;
}

.partner-note-button {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 2.65rem;
padding: 0.48rem 0.95rem;
box-sizing: border-box;

color: #172033;
background: #f6dd78;
border: 1px solid rgba(246, 221, 120, 0.95);
border-radius: var(--radius-medium);

font-size: 0.92rem;
font-weight: 850;
line-height: 1.15;
text-align: center;
text-decoration: none;

box-shadow:
0 9px 20px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.36) inset;

transition:
transform 0.2s ease,
color 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.partner-note-button::after {
content: "›";
margin-left: 0.45rem;
color: #172033;
font-size: 1.05em;
}

/* ==========================================================
Deaktivierte Elemente
========================================================== */

.partner-link-item-disabled {
opacity: 0.86;
}

.partner-link-action-disabled {
cursor: default;
color: rgba(255, 248, 220, 0.86);
background: rgba(23, 32, 51, 0.58);
border-color: rgba(246, 221, 120, 0.22);
box-shadow: none;
}

.partner-link-action-disabled::after {
content: "";
margin-left: 0;
}

/* ==========================================================
Hover / Fokus
========================================================== */

.partner-link-item:focus-visible,
.partner-note-button:focus-visible {
outline: 3px solid rgba(242, 212, 107, 0.72);
outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
a.partner-link-item:hover {
transform: translateY(-1px);
border-color: rgba(216, 170, 45, 0.42);
box-shadow:
0 18px 38px rgba(23, 32, 51, 0.13),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

a.partner-link-item:hover .partner-link-action {
color: #172033;
background: #f6dd78;
border-color: #f6dd78;
}

a.partner-link-item:hover .partner-link-action::after {
color: #172033;
}

.partner-note-button:hover {
color: #172033;
background: #f6dd78;
border-color: #f6dd78;
transform: translateY(-1px);
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.2),
0 1px 0 rgba(255, 255, 255, 0.36) inset;
}

.partner-note-button:hover::after {
color: #172033;
}
}

/* ==========================================================
Tablet
========================================================== */

@media (max-width: 1350px) {
.partner-main {
--partner-layout-width: min(980px, calc(100% - (var(--site-gutter) * 2)));
--partner-layout-gap: 2.4rem;

--partner-hero-padding-top: 1.6rem;
--partner-hero-title-width: 1100px;
--partner-hero-text-width: 900px;
--partner-hero-title-size: 3.8rem;

--partner-network-size: 5.8rem;
--partner-network-gap: 0.6rem;

--partner-symbol-size: 6.8rem;
--partner-symbol-gap: 0.7rem;

}

.partner-layout {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"intro intro"
"partners orgs";
}

.partner-note {
width: 100%;
max-width: none;
}
}

@media (max-width: 900px) {
.partner-main {
--partner-layout-width: min(900px, calc(100% - (var(--site-gutter) * 2)));
--partner-layout-gap: 2rem;

--partner-hero-padding-top: 1.2rem;
--partner-hero-title-size: 3.2rem;

--partner-network-size: 5rem;
--partner-network-gap: 0.55rem;

--partner-card-logo-column: 96px;
--partner-card-logo-width: 96px;
--partner-card-logo-height: 82px;

}

.partner-layout {
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"partners"
"orgs";
}

.partner-panel-left .partner-panel-head,
.partner-panel-right .partner-panel-head {
display: block;
}

.partner-panel-head::before,
.partner-panel-head::after {
display: none;
}

.partner-note {
width: 100%;
max-width: none;
}
}

/* ==========================================================
Mobil
========================================================== */

@media (max-width: 640px) {
.partner-main {
--partner-page-padding-top: 2rem;
--partner-page-padding-bottom: 4rem;

--partner-layout-width: min(100%, calc(100% - (var(--site-gutter) * 2)));
--partner-layout-gap: 1.8rem;

--partner-hero-padding-top: 0;
--partner-hero-title-size: var(--font-h2);
--partner-hero-text-size: 1.03rem;

--partner-note-margin-top: 2.6rem;
--partner-note-padding-y: 2rem;

}

.partner-hero::before {
display: none;
}

.partner-hero p {
line-height: 1.66;
}

.partner-link-item {
grid-template-columns: 1fr;
text-align: center;
}

.partner-link-logo {
width: min(180px, 100%);
height: 110px;
margin: 0 auto;
}

.partner-link-logo img {
max-width: 160px;
max-height: 92px;
}

.partner-link-content {
justify-items: center;
}

.partner-link-action,
.partner-note-button {
width: 100%;
}

.partner-note-inner {
padding: 0;
}

.partner-note h2 {
font-size: 1.65rem;
}
}

@media (prefers-reduced-motion: reduce) {
.partner-link-item,
.partner-note-button {
transition: none;
}

a.partner-link-item:hover,
.partner-note-button:hover {
transform: none;
}
}