/* ==========================================================
PAGE: Mitglied
Mitgliedschaftsseite

Standard-Intro, Typografie und Breiten liegen zentral in:
/css/layout/page.css
Buttons und Dokumentkarten liegen in:
/css/components/buttons.css
/css/components/documents.css
========================================================== */

/* ==========================================================
STELLSCHRAUBEN
Nur hier oben Werte ändern.
Keine Kommentare hinter die Variablen schreiben.
========================================================== */

body.mitglied-seite {
/* Seite */
--mitglied-page-width: 96vw;
--mitglied-page-padding-top: clamp(3.4rem, 5vw, 5.4rem);
--mitglied-page-padding-bottom: 0;

/* Hauptlayout */
--mitglied-layout-gap: clamp(1.4rem, 2.2vw, 3rem);
--mitglied-layout-row-gap: 1.2rem;
--mitglied-layout-margin-bottom: clamp(2rem, 3vw, 3.5rem);

/* Desktop-Spalten */
--mitglied-gebuehren-width: clamp(620px, 30vw, 760px);
--mitglied-guide-width: clamp(560px, 24vw, 620px);

/* Schmalerer Desktop ab 1900px */
--mitglied-desktop-small-left-min: 420px;
--mitglied-desktop-small-left-max: 580px;
--mitglied-desktop-small-gap: clamp(1.4rem, 2.4vw, 2.8rem);
--mitglied-desktop-small-right-width: minmax(0, 1fr);
--mitglied-desktop-small-guide-width: min(720px, 100%);

/* Mittlerer Text */
--mitglied-copy-width: none;
--mitglied-copy-title-width: none;
--mitglied-copy-text-width: 1450px;
--mitglied-copy-title-margin-bottom: 1rem;
--mitglied-copy-text-line-height: 1.65;
--mitglied-copy-paragraph-gap: 0.65rem;
--mitglied-copy-strong-margin-top: 0.15rem;
--mitglied-copy-manual-break-display: none;

/* Mittlerer Text Schrift */
--mitglied-copy-title-size: clamp(2.2rem, 3vw, 3.4rem);
--mitglied-copy-text-size: 1.28rem;

/* Satzung */
--mitglied-satzung-width: none;
--mitglied-satzung-title-width: none;
--mitglied-satzung-text-width: 1450px;
--mitglied-satzung-title-margin-bottom: 0.85rem;
--mitglied-satzung-h3-margin-top: 0.85rem;
--mitglied-satzung-h3-margin-bottom: 0.45rem;
--mitglied-satzung-text-line-height: 1.65;
--mitglied-satzung-paragraph-gap: 0.65rem;
--mitglied-satzung-offset-top: 0;

/* Satzung Schrift */
--mitglied-satzung-title-size: clamp(1.8rem, 2vw, 2.3rem);
--mitglied-satzung-h3-size: inherit;
--mitglied-satzung-text-size: 1.25rem;

/* Gebührenbox */
--mitglied-gebuehren-padding: clamp(1.25rem, 1.8vw, 1.65rem);
--mitglied-gebuehren-title-size: clamp(1.45rem, 1.45vw, 1.9rem);
--mitglied-gebuehren-info-size: clamp(0.94rem, 0.95vw, 1.04rem);
--mitglied-gebuehren-h3-size: clamp(1.08rem, 1.05vw, 1.24rem);
--mitglied-gebuehren-text-size: clamp(0.98rem, 0.98vw, 1.08rem);
--mitglied-gebuehren-title-gap: 1rem;
--mitglied-gebuehren-block-gap: 1.05rem;
--mitglied-gebuehren-block-padding: 1.05rem 1.1rem;
--mitglied-gebuehren-confirm-gap: 1.8rem;
--mitglied-gebuehren-confirm-padding: 1rem 1.1rem;

/* Eurozeichen */
--mitglied-euro-right: clamp(0.7rem, 2.4vw, 1.65rem);
--mitglied-euro-top: -1.05rem;
--mitglied-euro-size: clamp(7.2rem, 7vw, 9rem);
--mitglied-euro-color: rgba(0, 31, 58, 0.46);
--mitglied-euro-shadow: 0 4px 10px rgba(0, 20, 40, 0.12);

/* Guidebox */
--mitglied-guide-padding: clamp(1.15rem, 1.7vw, 1.55rem);
--mitglied-guide-title-size: clamp(1.35rem, 1.35vw, 1.85rem);
--mitglied-guide-text-size: var(--font-normal);
--mitglied-guide-step-gap: 0.82rem;
--mitglied-guide-button-gap: 0.68rem;

/* Dokumente / Schlusskontakt */
--mitglied-documents-width: 1450px;
--mitglied-bottom-section-width: 1450px;

/* Tablet / Mobil */
--mitglied-tablet-width: min(900px, 100%);
--mitglied-tablet-gap: 2rem;
--mitglied-tablet-box-width: min(720px, 100%);
--mitglied-mobile-container-width: calc(100% - (var(--site-gutter) * 2));
--mitglied-mobile-padding-top: 2rem;
--mitglied-mobile-box-padding: 1rem;
}

/* ==========================================================
Seitenbreite
========================================================== */

body.mitglied-seite main > .container {
width: var(--mitglied-page-width);
max-width: none;
margin: 0 auto;
padding: var(--mitglied-page-padding-top) 0 var(--mitglied-page-padding-bottom);
}

/* ==========================================================
Oberer Bereich:
Gebühren links breit, Mitgliedschaft mittig, Mitglied-Guide rechts.
Satzung läuft unter dem Mittelbereich weiter.
========================================================== */

.mitglied-top-layout {
display: grid;
grid-template-columns:
minmax(620px, var(--mitglied-gebuehren-width))
minmax(0, 1fr)
minmax(560px, var(--mitglied-guide-width));
column-gap: var(--mitglied-layout-gap);
row-gap: var(--mitglied-layout-row-gap);
align-items: start;
margin: 0 auto var(--mitglied-layout-margin-bottom);
}

body.mitglied-seite .mitglied-copy.intro {
grid-column: 2;
grid-row: 1;
width: 100%;
max-width: var(--mitglied-copy-width);
min-width: 0;
margin: 0 auto;
padding: 0;
text-align: center;
box-sizing: border-box;
}

.mitglied-copy h1 {
max-width: var(--mitglied-copy-title-width);
margin: 0 auto var(--mitglied-copy-title-margin-bottom);
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}

.mitglied-copy p {
max-width: var(--mitglied-copy-text-width);
min-width: 0;
margin: 0 auto;
line-height: var(--mitglied-copy-text-line-height);
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}

.mitglied-copy p + p {
margin-top: var(--mitglied-copy-paragraph-gap);
}

.mitglied-copy p strong {
display: inline-block;
margin-top: var(--mitglied-copy-strong-margin-top);
}

.mitglied-copy br {
display: var(--mitglied-copy-manual-break-display);
}

body.mitglied-seite .mitglied-copy h1 {
font-size: var(--mitglied-copy-title-size);
}

body.mitglied-seite .mitglied-copy p {
font-size: var(--mitglied-copy-text-size);
}

/* ==========================================================
Satzung
========================================================== */

body.mitglied-seite .mitglied-satzung.intro {
grid-column: 2;
grid-row: 2;
width: 100%;
max-width: var(--mitglied-satzung-width);
min-width: 0;
margin: 0;
padding: 0;
text-align: center;
transform: none;
box-sizing: border-box;
}

.mitglied-satzung h2 {
max-width: var(--mitglied-satzung-title-width);
margin: 0 auto var(--mitglied-satzung-title-margin-bottom);
font-size: var(--mitglied-satzung-title-size);
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}

.mitglied-satzung h3 {
margin: var(--mitglied-satzung-h3-margin-top) auto var(--mitglied-satzung-h3-margin-bottom);
font-size: var(--mitglied-satzung-h3-size);
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}

.mitglied-satzung p {
max-width: var(--mitglied-satzung-text-width);
min-width: 0;
margin: 0 auto;
line-height: var(--mitglied-satzung-text-line-height);
font-size: var(--mitglied-satzung-text-size);
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}

.mitglied-satzung p + h3 {
margin-top: var(--mitglied-satzung-paragraph-gap);
}

/* ==========================================================
Gebühren links
Eigenständiger heller Gebührenstil
========================================================== */

.mitglied-gebuehren {
grid-column: 1;
grid-row: 1 / span 2;
position: relative;
justify-self: start;
align-self: start;

width: 100%;
max-width: var(--mitglied-gebuehren-width);
min-width: 0;
padding: var(--mitglied-gebuehren-padding);

color: #1f2a35;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
border: 1px solid rgba(18, 44, 68, 0.14);
border-radius: var(--radius-xl);
box-shadow:
0 16px 34px rgba(18, 44, 68, 0.10),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
text-align: left;
overflow: hidden;
box-sizing: border-box;
}

.mitglied-gebuehren::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 7px;
background: linear-gradient(90deg, #005486, #d8aa2d);
pointer-events: none;
}

.mitglied-gebuehren::after {
content: "€";
position: absolute;
right: var(--mitglied-euro-right);
top: var(--mitglied-euro-top);
color: var(--mitglied-euro-color);
font-size: var(--mitglied-euro-size);
font-weight: 900;
line-height: 1;
text-shadow: var(--mitglied-euro-shadow);
pointer-events: none;
}

.mitglied-gebuehren h2,
.mitglied-gebuehren h3,
.mitglied-gebuehren p,
.mitglied-gebuehren-block,
.gebuehren-bestaetigung {
position: relative;
z-index: 1;
}

.mitglied-gebuehren h2 {
margin: 0 0 var(--mitglied-gebuehren-title-gap);
color: #123047;
font-size: var(--mitglied-gebuehren-title-size);
line-height: 1.14;
letter-spacing: -0.025em;
text-align: center;
}

.mitglied-gebuehren h2::after {
content: none;
display: none;
}

.mitglied-gebuehren > p:first-of-type {
margin: 0;
padding: 0.95rem 1rem;
color: #43515f;
background: rgba(0, 84, 134, 0.055);
border: 1px solid rgba(0, 84, 134, 0.11);
border-radius: var(--radius-medium);
font-size: var(--mitglied-gebuehren-info-size);
line-height: 1.55;
text-align: center;
}

.mitglied-gebuehren h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.7rem;
color: #123047;
font-size: var(--mitglied-gebuehren-h3-size);
line-height: 1.25;
}

.mitglied-gebuehren h3::before {
content: "";
flex: 0 0 auto;
width: 0.62rem;
height: 0.62rem;
border-radius: 999px;
background: #d8aa2d;
box-shadow: 0 0 0 4px rgba(216, 170, 45, 0.16);
}

.mitglied-gebuehren p {
margin: 0;
color: #43515f;
font-size: var(--mitglied-gebuehren-text-size);
line-height: 1.6;
}

.mitglied-gebuehren strong {
color: #123047;
font-weight: 900;
}

.mitglied-gebuehren em {
color: #657280;
font-size: 0.93em;
}

.mitglied-gebuehren a {
color: #005486;
font-weight: 800;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}

.mitglied-gebuehren a:hover,
.mitglied-gebuehren a:focus-visible {
color: #003f65;
}

.mitglied-gebuehren-block {
margin-top: var(--mitglied-gebuehren-block-gap);
padding: var(--mitglied-gebuehren-block-padding);
background: #fff;
border: 1px solid rgba(18, 44, 68, 0.11);
border-left: 5px solid #d8aa2d;
border-radius: var(--radius-medium);
box-shadow:
0 8px 18px rgba(18, 44, 68, 0.06),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.mitglied-gebuehren-block p + p {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px dashed rgba(18, 44, 68, 0.16);
}

.mitglied-gebuehren .gebuehren-bestaetigung {
margin-top: var(--mitglied-gebuehren-confirm-gap);
padding: var(--mitglied-gebuehren-confirm-padding);
color: #123047;
background: rgba(216, 170, 45, 0.12);
border: 1px solid rgba(216, 170, 45, 0.25);
border-radius: var(--radius-medium);
font-size: clamp(0.92rem, 0.92vw, 1rem);
line-height: 1.45;
text-align: center;
}

/* ==========================================================
Mitglied-Guide
Dunkel/Gold, angelehnt an Visitor-Guide
========================================================== */

.mitglied-guide {
grid-column: 3;
grid-row: 1 / span 2;
position: relative;
justify-self: end;
align-self: start;

width: 100%;
max-width: var(--mitglied-guide-width);
min-width: 0;
padding: var(--mitglied-guide-padding);

color: #fff;
background:
linear-gradient(135deg, rgba(18, 28, 42, 0.96), rgba(32, 45, 63, 0.92)),
linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 38%);
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: var(--radius-xl);
box-shadow:
0 16px 34px rgba(0, 0, 0, 0.20),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
text-align: left;
overflow: hidden;
box-sizing: border-box;
}

.mitglied-guide::before {
content: "";
position: absolute;
top: 1rem;
bottom: 1rem;
left: 0;
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, #f6dd78, #d8aa2d);
}

.mitglied-guide::after {
content: "";
position: absolute;
right: -4rem;
bottom: -4rem;
width: 11rem;
height: 11rem;
border-radius: 50%;
background: rgba(216, 170, 45, 0.13);
pointer-events: none;
}

.mitglied-guide-kicker,
.mitglied-guide h2,
.mitglied-guide-text,
.mitglied-steps,
.mitglied-guide-actions {
position: relative;
z-index: 1;
}

.mitglied-guide-kicker {
margin: 0 0 0.35rem;
color: #f6dd78;
font-size: var(--font-small);
font-weight: 800;
}

.mitglied-guide h2 {
margin: 0 0 0.75rem;
color: #fff;
font-size: var(--mitglied-guide-title-size);
line-height: 1.14;
letter-spacing: -0.025em;
}

.mitglied-guide-text {
margin: 0 0 1.15rem;
color: rgba(255, 255, 255, 0.82);
font-size: var(--mitglied-guide-text-size);
line-height: 1.55;
}

.mitglied-steps {
display: grid;
gap: var(--mitglied-guide-step-gap);
margin: 0;
padding: 0;
list-style: none;
}

.mitglied-steps li {
display: grid;
grid-template-columns: 1.65rem 1fr;
gap: 0.7rem;
align-items: start;
}

.mitglied-steps li > span {
display: inline-flex;
align-items: center;
justify-content: center;

width: 1.5rem;
height: 1.5rem;
margin-top: 0.12rem;

color: #172033;
background: #f6dd78;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 900;
line-height: 1;
}

.mitglied-steps strong {
display: block;
margin: 0 0 0.12rem;
color: #fff;
font-size: clamp(0.98rem, 0.9vw, 1.08rem);
line-height: 1.25;
}

.mitglied-steps p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: clamp(0.9rem, 0.82vw, 0.98rem);
line-height: 1.42;
}

/* ==========================================================
Guide Buttons
Hauptaktion + drei gleich große Dokumentenbuttons
========================================================== */

.mitglied-guide-actions {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--mitglied-guide-button-gap);
align-items: stretch;
margin-top: 1.15rem;
padding-top: 1.05rem;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mitglied-guide-button {
display: flex;
align-items: center;
justify-content: center;

width: 100%;
min-width: 0;
max-width: 100%;
min-height: 2.9rem;
height: 100%;
padding: 0.55rem 0.6rem;
box-sizing: border-box;

color: #fff8dc;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(246, 221, 120, 0.38);
border-radius: var(--radius-medium);

font-size: clamp(0.78rem, 0.74vw, 0.88rem);
font-weight: 800;
line-height: 1.15;
text-align: center;
text-decoration: none;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
hyphens: none;

box-shadow:
0 8px 18px rgba(0, 0, 0, 0.16),
0 1px 0 rgba(255, 255, 255, 0.12) inset;

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

.mitglied-guide-button-primary {
grid-column: 1 / -1;
color: #172033;
background: #f6dd78;
border-color: rgba(246, 221, 120, 0.95);
font-size: clamp(0.95rem, 0.9vw, 1.05rem);
box-shadow:
0 9px 20px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.36) inset;
}

.mitglied-guide-button:hover,
.mitglied-guide-button:focus-visible {
color: #172033;
background: #f6dd78;
border-color: #f6dd78;
text-decoration: none;
box-shadow:
0 10px 22px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.mitglied-guide-button-primary:hover,
.mitglied-guide-button-primary:focus-visible {
color: #172033;
background: #ffe88f;
border-color: #ffe88f;
}

@media (hover: hover) and (pointer: fine) {
.mitglied-guide-button:hover {
transform: translateY(-1px);
}
}

/* ==========================================================
Dokumente und Schlusskontakt
========================================================== */

body.mitglied-seite .dokumente-sektion {
width: min(var(--mitglied-documents-width), 100%);
max-width: var(--mitglied-documents-width);
margin-left: auto;
margin-right: auto;
}

body.mitglied-seite main > .container > section.intro {
width: min(var(--mitglied-bottom-section-width), 100%);
max-width: var(--mitglied-bottom-section-width);
margin-left: auto;
margin-right: auto;
text-align: center;
}

body.mitglied-seite main > .container > section.intro p {
line-height: 1.65;
}

/* ==========================================================
Responsive
Bis 1900px: Gebühren links, rechts oben Text, darunter Satzung, darunter Guide.
Bis 1200px: einspaltig.
========================================================== */

@media (max-width: 1900px) {
body.mitglied-seite {
--mitglied-layout-row-gap: 1.35rem;
--mitglied-satzung-offset-top: 0;
--mitglied-copy-title-size: clamp(2rem, 2.35vw, 3rem);
--mitglied-copy-text-size: clamp(1rem, 1.04vw, 1.14rem);
--mitglied-copy-text-width: 1050px;
--mitglied-satzung-title-size: clamp(1.6rem, 1.8vw, 2.1rem);
--mitglied-satzung-text-size: clamp(0.95rem, 0.98vw, 1.06rem);
--mitglied-satzung-text-width: 1050px;
}

.mitglied-top-layout {
grid-template-columns:
minmax(var(--mitglied-desktop-small-left-min), var(--mitglied-desktop-small-left-max))
var(--mitglied-desktop-small-right-width);
column-gap: var(--mitglied-desktop-small-gap);
row-gap: var(--mitglied-layout-row-gap);
align-items: start;
width: 100%;
}

.mitglied-gebuehren {
grid-column: 1;
grid-row: 1 / 4;
width: 100%;
max-width: var(--mitglied-desktop-small-left-max);
}

body.mitglied-seite .mitglied-copy.intro {
grid-column: 2;
grid-row: 1;
align-self: start;
min-width: 0;
}

body.mitglied-seite .mitglied-satzung.intro {
grid-column: 2;
grid-row: 2;
align-self: start;
min-width: 0;
transform: none;
}

.mitglied-guide {
grid-column: 2;
grid-row: 3;
justify-self: center;
align-self: start;
width: var(--mitglied-desktop-small-guide-width);
max-width: 720px;
}
}

@media (max-width: 1500px) {
body.mitglied-seite {
--mitglied-desktop-small-left-min: 360px;
--mitglied-desktop-small-left-max: 500px;
--mitglied-desktop-small-gap: clamp(1rem, 2vw, 2rem);
--mitglied-copy-title-size: clamp(1.85rem, 2.25vw, 2.65rem);
--mitglied-copy-text-size: clamp(0.95rem, 1vw, 1.05rem);
--mitglied-satzung-title-size: clamp(1.45rem, 1.7vw, 1.9rem);
--mitglied-satzung-text-size: clamp(0.9rem, 0.95vw, 1rem);
}

.mitglied-guide {
width: min(620px, 100%);
max-width: 620px;
}
}

@media (max-width: 1200px) {
body.mitglied-seite {
--mitglied-satzung-offset-top: 0;
--mitglied-copy-title-size: clamp(2rem, 5vw, 2.6rem);
--mitglied-copy-text-size: 1.05rem;
--mitglied-satzung-title-size: clamp(1.55rem, 4vw, 2rem);
--mitglied-satzung-text-size: 1rem;
}

.mitglied-top-layout {
display: flex;
flex-direction: column;
width: var(--mitglied-tablet-width);
gap: var(--mitglied-tablet-gap);
}

body.mitglied-seite .mitglied-copy.intro,
body.mitglied-seite .mitglied-satzung.intro,
.mitglied-gebuehren,
.mitglied-guide {
grid-column: auto;
grid-row: auto;
min-width: 0;
}

body.mitglied-seite .mitglied-copy.intro {
order: 1;
}

body.mitglied-seite .mitglied-satzung.intro {
order: 2;
transform: none;
}

.mitglied-guide {
order: 3;
width: var(--mitglied-tablet-box-width);
max-width: 720px;
margin: 0 auto;
}

.mitglied-gebuehren {
order: 4;
width: var(--mitglied-tablet-box-width);
max-width: 720px;
margin: 0 auto;
}
}

@media (max-width: 640px) {
body.mitglied-seite main > .container {
width: var(--mitglied-mobile-container-width);
padding-top: var(--mitglied-mobile-padding-top);
}

.mitglied-top-layout {
gap: 2rem;
}

.mitglied-gebuehren,
.mitglied-guide {
width: 100%;
max-width: none;
padding: var(--mitglied-mobile-box-padding);
}

.mitglied-gebuehren::after {
right: 0.65rem;
top: -0.35rem;
font-size: clamp(4.8rem, 22vw, 6.4rem);
color: rgba(0, 31, 58, 0.34);
}

.mitglied-gebuehren h2,
.mitglied-guide h2 {
font-size: 1.35rem;
}

.mitglied-guide-actions {
gap: 0.45rem;
}

.mitglied-guide-button {
min-height: 2.6rem;
padding: 0.45rem 0.35rem;
font-size: 0.68rem;
}

.mitglied-guide-button-primary {
font-size: 0.9rem;
}
}

@media (max-width: 460px) {
.mitglied-guide-actions {
grid-template-columns: 1fr;
}

.mitglied-guide-button {
font-size: 0.88rem;
}
}

@media (max-width: 380px) {
.mitglied-guide-button {
font-size: 0.82rem;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
}

@media (prefers-reduced-motion: reduce) {
.mitglied-guide-button {
transition: none;
}

.mitglied-guide-button:hover {
transform: none;
}
}

/* Divider über „Auszug aus unserer Satzung“ */
body.mitglied-seite .mitglied-satzung.intro {
margin-top: -13.00rem !important;
}

body.mitglied-seite .mitglied-satzung.intro::before {
content: "";
display: block;
position: relative;
left: 50%;
transform: translateX(-50%);

width: 960px;
height: 2px;
margin: 0 0 0.65rem;

background: linear-gradient(
90deg,
transparent,
rgba(95, 105, 115, 0.72),
rgba(120, 130, 140, 0.92),
rgba(95, 105, 115, 0.72),
transparent
);

box-shadow: 0 1px 5px rgba(80, 90, 100, 0.22);
border-radius: 999px;
}

/* ==========================================================
   FINALER FIX: MITGLIED OHNE ÜBERLAPPUNGEN
   Muss ganz am Ende der mitglied.css stehen.

   Wichtig:
   Der alte Satzungs-Abstand -13rem bleibt nur auf sehr breitem Desktop aktiv.
   Ab 1900px und kleiner wird er neutralisiert, weil sonst Textbereiche überlappen.
   ========================================================== */

.mitglied-top-layout > *,
.mitglied-copy,
.mitglied-satzung,
.mitglied-gebuehren,
.mitglied-guide,
.mitglied-guide-actions,
.mitglied-guide-button {
  min-width: 0;
  box-sizing: border-box;
}

.mitglied-copy h1,
.mitglied-copy p,
.mitglied-satzung h2,
.mitglied-satzung h3,
.mitglied-satzung p,
.mitglied-gebuehren h2,
.mitglied-gebuehren h3,
.mitglied-gebuehren p,
.mitglied-guide h2,
.mitglied-guide-text,
.mitglied-steps strong,
.mitglied-steps p,
.mitglied-guide-button {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Divider darf nie aus dem sichtbaren Bereich laufen */
body.mitglied-seite .mitglied-satzung.intro::before {
  width: min(960px, 100%) !important;
  max-width: 100% !important;
}

/* Entscheidender Fix für verkleinerte Desktop-Browser:
   Der alte globale margin-top:-13rem überlappt im Bereich unter 1900px. */
@media (max-width: 1900px) {
  body.mitglied-seite .mitglied-satzung.intro {
    margin-top: 0 !important;
  }
}

/* Hochformat: volle nutzbare Breite, sauber einspaltig */
@media (max-width: 1200px) and (orientation: portrait) {
  body.mitglied-seite {
    --mitglied-page-width: 96vw;
    --mitglied-mobile-container-width: 96vw;
    --mitglied-tablet-width: 100%;
    --mitglied-tablet-box-width: 100%;
    --mitglied-copy-text-width: 100%;
    --mitglied-satzung-text-width: 100%;
    --mitglied-documents-width: 100%;
    --mitglied-bottom-section-width: 100%;

    --mitglied-copy-title-size: clamp(1.75rem, 6vw, 2.45rem);
    --mitglied-copy-text-size: clamp(0.98rem, 3.2vw, 1.08rem);
    --mitglied-satzung-title-size: clamp(1.45rem, 4.8vw, 1.95rem);
    --mitglied-satzung-text-size: clamp(0.95rem, 3vw, 1.02rem);
  }

  body.mitglied-seite main > .container {
    width: 96vw;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .mitglied-top-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    gap: 1.55rem;
  }

  body.mitglied-seite .mitglied-copy.intro {
    order: 1;
  }

  body.mitglied-seite .mitglied-satzung.intro {
    order: 2;
    margin-top: 0 !important;
  }

  .mitglied-guide {
    order: 3;
  }

  .mitglied-gebuehren {
    order: 4;
  }

  body.mitglied-seite .mitglied-copy.intro,
  body.mitglied-seite .mitglied-satzung.intro,
  .mitglied-guide,
  .mitglied-gebuehren {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  body.mitglied-seite .mitglied-satzung.intro::before {
    width: 100% !important;
    margin-bottom: 0.85rem;
  }

  body.mitglied-seite .dokumente-sektion,
  body.mitglied-seite main > .container > section.intro {
    width: 100%;
    max-width: none;
  }
}

/* Querformat bis 1200px:
   Desktop-ähnlich zweispaltig, aber ohne Überlappung.
   Links Gebühren, rechts Text + Satzung + Guide. */
@media (max-width: 1200px) and (orientation: landscape) {
  body.mitglied-seite {
    --mitglied-page-width: 98vw;
    --mitglied-page-padding-top: clamp(1rem, 2vw, 1.8rem);

    --mitglied-layout-row-gap: clamp(0.8rem, 1.5vw, 1.25rem);
    --mitglied-desktop-small-left-min: clamp(260px, 34vw, 360px);
    --mitglied-desktop-small-left-max: clamp(300px, 38vw, 430px);
    --mitglied-desktop-small-gap: clamp(0.75rem, 1.6vw, 1.45rem);

    --mitglied-copy-title-size: clamp(1.25rem, 2.5vw, 1.95rem);
    --mitglied-copy-text-size: clamp(0.78rem, 1.3vw, 0.98rem);
    --mitglied-copy-text-width: 100%;
    --mitglied-copy-text-line-height: 1.45;
    --mitglied-copy-paragraph-gap: 0.42rem;

    --mitglied-satzung-title-size: clamp(1.05rem, 2vw, 1.45rem);
    --mitglied-satzung-text-size: clamp(0.72rem, 1.2vw, 0.92rem);
    --mitglied-satzung-text-width: 100%;
    --mitglied-satzung-text-line-height: 1.45;
    --mitglied-satzung-title-margin-bottom: 0.5rem;
    --mitglied-satzung-h3-margin-top: 0.55rem;
    --mitglied-satzung-h3-margin-bottom: 0.3rem;

    --mitglied-gebuehren-padding: clamp(0.7rem, 1.35vw, 1rem);
    --mitglied-gebuehren-title-size: clamp(1rem, 1.8vw, 1.35rem);
    --mitglied-gebuehren-info-size: clamp(0.68rem, 1.12vw, 0.88rem);
    --mitglied-gebuehren-h3-size: clamp(0.78rem, 1.25vw, 1rem);
    --mitglied-gebuehren-text-size: clamp(0.68rem, 1.12vw, 0.88rem);
    --mitglied-gebuehren-title-gap: 0.65rem;
    --mitglied-gebuehren-block-gap: 0.6rem;
    --mitglied-gebuehren-block-padding: 0.62rem 0.7rem;
    --mitglied-gebuehren-confirm-gap: 0.8rem;
    --mitglied-gebuehren-confirm-padding: 0.62rem 0.7rem;

    --mitglied-euro-right: clamp(0.45rem, 1.1vw, 0.85rem);
    --mitglied-euro-top: -0.45rem;
    --mitglied-euro-size: clamp(3.8rem, 6.5vw, 6rem);

    --mitglied-guide-padding: clamp(0.7rem, 1.35vw, 1rem);
    --mitglied-guide-title-size: clamp(1rem, 1.8vw, 1.35rem);
    --mitglied-guide-text-size: clamp(0.68rem, 1.12vw, 0.88rem);
    --mitglied-guide-step-gap: 0.5rem;
    --mitglied-guide-button-gap: 0.42rem;
  }

  body.mitglied-seite main > .container {
    width: var(--mitglied-page-width);
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .mitglied-top-layout {
    display: grid !important;
    grid-template-columns:
      minmax(var(--mitglied-desktop-small-left-min), var(--mitglied-desktop-small-left-max))
      minmax(0, 1fr) !important;
    column-gap: var(--mitglied-desktop-small-gap);
    row-gap: var(--mitglied-layout-row-gap);
    align-items: start;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  .mitglied-gebuehren {
    order: initial !important;
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    width: 100%;
    max-width: var(--mitglied-desktop-small-left-max);
    margin: 0;
  }

  body.mitglied-seite .mitglied-copy.intro {
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  body.mitglied-seite .mitglied-satzung.intro {
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100%;
    max-width: none;
    margin-top: 0 !important;
    margin-left: 0;
    margin-right: 0;
    transform: none;
  }

  .mitglied-guide {
    order: initial !important;
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: center;
    width: min(620px, 100%);
    max-width: 620px;
    margin: 0 auto;
  }

  body.mitglied-seite .mitglied-satzung.intro::before {
    width: min(760px, 100%) !important;
    margin-bottom: 0.6rem;
  }

  .mitglied-copy h1,
  .mitglied-copy p,
  .mitglied-satzung h2,
  .mitglied-satzung h3,
  .mitglied-satzung p {
    max-width: 100%;
  }

  .mitglied-gebuehren > p:first-of-type {
    padding: 0.62rem 0.7rem;
    line-height: 1.38;
  }

  .mitglied-gebuehren h3 {
    gap: 0.38rem;
    margin-bottom: 0.42rem;
    line-height: 1.18;
  }

  .mitglied-gebuehren h3::before {
    width: 0.45rem;
    height: 0.45rem;
    box-shadow: 0 0 0 3px rgba(216, 170, 45, 0.14);
  }

  .mitglied-gebuehren p {
    line-height: 1.38;
  }

  .mitglied-gebuehren-block p + p {
    margin-top: 0.45rem;
    padding-top: 0.45rem;
  }

  .mitglied-guide::before {
    top: 0.7rem;
    bottom: 0.7rem;
    width: 3px;
  }

  .mitglied-guide::after {
    right: -3rem;
    bottom: -3rem;
    width: 8rem;
    height: 8rem;
  }

  .mitglied-guide-kicker {
    margin-bottom: 0.18rem;
    font-size: clamp(0.58rem, 1vw, 0.76rem);
  }

  .mitglied-guide h2 {
    margin-bottom: 0.45rem;
  }

  .mitglied-guide-text {
    margin-bottom: 0.65rem;
    line-height: 1.35;
  }

  .mitglied-steps li {
    grid-template-columns: clamp(1rem, 1.9vw, 1.3rem) 1fr;
    gap: clamp(0.32rem, 0.7vw, 0.52rem);
  }

  .mitglied-steps li > span {
    width: clamp(0.95rem, 1.8vw, 1.2rem);
    height: clamp(0.95rem, 1.8vw, 1.2rem);
    margin-top: 0.05rem;
    font-size: clamp(0.5rem, 0.85vw, 0.64rem);
  }

  .mitglied-steps strong {
    font-size: clamp(0.64rem, 1.06vw, 0.82rem);
    line-height: 1.15;
  }

  .mitglied-steps p {
    font-size: clamp(0.58rem, 0.95vw, 0.74rem);
    line-height: 1.25;
  }

  .mitglied-guide-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: var(--mitglied-guide-button-gap);
    margin-top: 0.65rem;
    padding-top: 0.62rem;
  }

  .mitglied-guide-button-primary {
    grid-column: 1 / -1 !important;
  }

  .mitglied-guide-button {
    min-height: clamp(1.85rem, 3.3vw, 2.4rem);
    padding: 0.32rem 0.28rem;
    font-size: clamp(0.52rem, 0.88vw, 0.68rem);
    line-height: 1.08;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .mitglied-guide-button-primary {
    font-size: clamp(0.62rem, 1vw, 0.82rem);
  }
}

/* Sehr schmal im Querformat: hier ist selbst 2-spaltig zu eng */
@media (max-width: 700px) and (orientation: landscape) {
  body.mitglied-seite {
    --mitglied-page-width: 96vw;
    --mitglied-copy-title-size: clamp(1.25rem, 4vw, 1.8rem);
    --mitglied-copy-text-size: clamp(0.82rem, 2.3vw, 0.98rem);
    --mitglied-satzung-title-size: clamp(1.1rem, 3.4vw, 1.55rem);
    --mitglied-satzung-text-size: clamp(0.78rem, 2.1vw, 0.92rem);
  }

  .mitglied-top-layout {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    gap: 1.2rem;
  }

  body.mitglied-seite .mitglied-copy.intro {
    order: 1 !important;
  }

  body.mitglied-seite .mitglied-satzung.intro {
    order: 2 !important;
    margin-top: 0 !important;
  }

  .mitglied-guide {
    order: 3 !important;
  }

  .mitglied-gebuehren {
    order: 4 !important;
  }

  body.mitglied-seite .mitglied-copy.intro,
  body.mitglied-seite .mitglied-satzung.intro,
  .mitglied-guide,
  .mitglied-gebuehren {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .mitglied-guide-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ==========================================================
DOWNLOADS + KONTAKT: BALKEN MIT EXAKTEM VEREIN-LEGACY-HINTERGRUND
Hintergrundwerte 1:1 aus .verein-legacy übernommen.
========================================================== */

body.mitglied-seite {
overflow-x: hidden;
--mitglied-kontakt-bg-height: calc(clamp(2.2rem, 3.4vw, 3rem) + 1.9rem);
}

body.mitglied-seite main,
body.mitglied-seite main > .container {
overflow: visible !important;
}

/* Full-Width-Fläche wie beim Verein-Balken */
body.mitglied-seite .dokumente-sektion,
body.mitglied-seite main > .container > section.intro:last-of-type {
width: 100vw !important;
max-width: none !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box;

position: relative;
color: #fff;
text-align: center;
background: transparent !important;
box-shadow: none !important;
}

/* Oberer Balkenteil */
body.mitglied-seite .dokumente-sektion {
margin-top: clamp(2.8rem, 5vw, 5.2rem) !important;
margin-bottom: 0 !important;

padding: clamp(2.2rem, 3.4vw, 3rem) var(--site-gutter) clamp(1.7rem, 2.8vw, 2.35rem);

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

overflow: visible !important;
isolation: auto !important;
z-index: 1;
}

/* Ein einziger Hintergrund für Download + Kontakt.
   Hintergrund exakt wie .verein-legacy:
   2 Radial-Layer + dunkler Linear-Verlauf, ohne zusätzliche Hilfsverläufe. */
body.mitglied-seite .dokumente-sektion::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: calc(-1 * var(--mitglied-kontakt-bg-height));
left: 0;

background:
radial-gradient(circle at 12% 22%, rgba(246, 221, 120, 0.16), transparent 28%),
radial-gradient(circle at 90% 82%, rgba(11, 134, 243, 0.13), transparent 30%),
linear-gradient(135deg, rgba(23, 32, 51, 0.93), rgba(35, 48, 67, 0.91));

pointer-events: none;
z-index: 0;
}

/* Goldlinie exakt wie .verein-legacy::before */
body.mitglied-seite .dokumente-sektion::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
);

pointer-events: none;
z-index: 2;
}

body.mitglied-seite .dokumente-sektion > * {
position: relative;
z-index: 1;
}

/* Kontaktbereich liegt auf demselben Hintergrund und beendet ihn vor dem Footer */
body.mitglied-seite main > .container > section.intro:last-of-type {
margin-top: 0 !important;
margin-bottom: 0 !important;

min-height: var(--mitglied-kontakt-bg-height);
padding: 0 var(--site-gutter) clamp(2.2rem, 3.4vw, 3rem);

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

overflow: visible !important;
z-index: 2;
}

/* Kreis exakt wie .verein-legacy::after, aber als eigene Ebene im unteren Balkenteil */
body.mitglied-seite main > .container > section.intro:last-of-type::before {
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;
z-index: 0;
}

body.mitglied-seite main > .container > section.intro:last-of-type::after {
content: none !important;
display: none !important;
}

body.mitglied-seite main > .container > section.intro:last-of-type > * {
position: relative;
z-index: 1;
}

/* Footer bleibt sauber getrennt */
body.mitglied-seite footer,
body.mitglied-seite .footer,
body.mitglied-seite #footer {
position: relative;
z-index: 20;
}

/* Inhalt mittig wie .verein-legacy-inner */
body.mitglied-seite .dokumente-sektion h2 {
position: relative !important;
z-index: 1 !important;

width: min(1120px, 100%) !important;
max-width: 1120px !important;
margin: 0 auto 0.95rem !important;

color: #fff !important;
font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
line-height: 1.08 !important;
letter-spacing: -0.045em !important;
text-align: center !important;
}

/* Downloadbereich im Stil der Mitglied-Guide-Buttons */
body.mitglied-seite .dokumente-liste {
position: relative !important;
z-index: 1 !important;

display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: var(--mitglied-guide-button-gap) !important;

width: min(1120px, 100%) !important;
max-width: 1120px !important;
margin: 1.25rem auto 0 !important;
padding-top: 1.05rem !important;
box-sizing: border-box !important;

background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 0 !important;
box-shadow: none !important;
}

body.mitglied-seite .dokument-link {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.45rem !important;

width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 2.9rem !important;
height: 100% !important;

padding: 0.55rem 0.6rem !important;
box-sizing: border-box !important;

color: #fff8dc !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(246, 221, 120, 0.38) !important;
border-radius: var(--radius-medium) !important;

font-size: clamp(0.78rem, 0.74vw, 0.88rem) !important;
font-weight: 800 !important;
line-height: 1.15 !important;
text-align: center !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;

box-shadow:
0 8px 18px rgba(0, 0, 0, 0.16),
0 1px 0 rgba(255, 255, 255, 0.12) inset !important;

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

body.mitglied-seite .dokument-link:hover,
body.mitglied-seite .dokument-link:focus-visible {
color: #172033 !important;
background: #f6dd78 !important;
border-color: #f6dd78 !important;
text-decoration: none !important;

box-shadow:
0 10px 22px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
}

@media (hover: hover) and (pointer: fine) {
body.mitglied-seite .dokument-link:hover {
transform: translateY(-1px) !important;
}
}

/* Kontakttext wie Verein-Legacy */
body.mitglied-seite main > .container > section.intro:last-of-type p {
position: relative !important;
z-index: 1 !important;

max-width: 980px !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;

color: rgba(255, 255, 255, 0.80) !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;

font-size: 1.04rem !important;
line-height: 1.68 !important;
text-align: center !important;
}

body.mitglied-seite main > .container > section.intro:last-of-type a {
color: rgba(246, 221, 120, 0.88) !important;
font-weight: 850 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 0.18em !important;
}

body.mitglied-seite main > .container > section.intro:last-of-type a:hover,
body.mitglied-seite main > .container > section.intro:last-of-type a:focus-visible {
color: #ffe88f !important;
}

/* Flugbetriebsordnung bleibt einzeilig: Icon links, Text rechts */
body.mitglied-seite .dokument-link[href*="flugbetriebsordnung" i] {
padding-left: 0.42rem !important;
padding-right: 0.42rem !important;
font-size: clamp(0.68rem, 0.68vw, 0.78rem) !important;
letter-spacing: -0.015em !important;
}

body.mitglied-seite .dokument-link[href*="flugbetriebsordnung" i] img,
body.mitglied-seite .dokument-link[href*="flugbetriebsordnung" i] svg,
body.mitglied-seite .dokument-link[href*="flugbetriebsordnung" i] .icon {
flex: 0 0 auto !important;
margin: 0 !important;
}

@media (max-width: 1100px) {
body.mitglied-seite .dokumente-liste {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
width: min(720px, 100%) !important;
}
}

@media (max-width: 700px) {
body.mitglied-seite {
--mitglied-kontakt-bg-height: calc(2rem + 3.5rem);
}

body.mitglied-seite .dokumente-sektion {
padding-top: 2rem !important;
padding-bottom: 1.45rem !important;
}

body.mitglied-seite .dokumente-sektion h2 {
font-size: clamp(1.85rem, 8.5vw, 2.45rem) !important;
}

body.mitglied-seite .dokumente-liste {
grid-template-columns: 1fr !important;
width: min(520px, 100%) !important;
gap: 0.55rem !important;
margin-top: 1.15rem !important;
}

body.mitglied-seite .dokument-link {
min-height: 2.6rem !important;
padding: 0.45rem 0.35rem !important;
font-size: 0.88rem !important;
}

body.mitglied-seite .dokument-link[href*="flugbetriebsordnung" i] {
font-size: 0.82rem !important;
}

body.mitglied-seite main > .container > section.intro:last-of-type {
padding-bottom: 2rem !important;
}

body.mitglied-seite main > .container > section.intro:last-of-type p {
font-size: 0.98rem !important;
line-height: 1.58 !important;
}
}