/* ============================================================
   HANDSCHRIFT – Website 2026
   Aufbau: 1. Schriften  2. Grundlagen  3. Bausteine
           4. Kopf  5. Startseite  6. Fuß  7. Mobil
   ============================================================ */

/* --- 1. Schriften ------------------------------------------ */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/playfair-display-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url(fonts/playfair-display-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url(fonts/jost-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}

/* --- 2. Grundlagen ----------------------------------------- */
:root {
    /* Königsblau exakt aus dem HANDSCHRIFT-Logo ausgelesen */
    --blau: #0012d8;
    --blau-dunkel: #000ea4;   /* für Mauszeiger-Kontakt */
    --blau-hell: #e3e6fc;     /* zarte Fläche, Fokusrahmen */
    --text: #1a1a1e;
    --text-leise: #63636e;
    --linie: #e2e2e8;
    --creme: #f2f2f6;
    --creme-hell: #f9f9fb;
    --dunkel: #16161c;
    --dunkel-text: #d2d2da;
    --weiss: #fff;

    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;

    --breite: 1200px;
    --radius: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--text);
    background: var(--weiss);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--blau); }

:focus-visible {
    outline: 2px solid var(--blau);
    outline-offset: 3px;
}

.visuell-versteckt {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--blau);
    color: var(--weiss);
    padding: .75rem 1.25rem;
}
.skip:focus { left: 0; color: var(--weiss); }

/* --- 3. Bausteine ------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .7rem 1.3rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.btn-blau {
    background: var(--blau);
    border-color: var(--blau);
    color: var(--weiss);
}
.btn-blau:hover {
    background: var(--blau-dunkel);
    border-color: var(--blau-dunkel);
    color: var(--weiss);
}
.btn-linie {
    background: var(--weiss);
    border-color: var(--text);
    color: var(--text);
}
.btn-linie:hover {
    background: var(--text);
    color: var(--weiss);
}
.btn-gross {
    font-size: .82rem;
    padding: .95rem 1.9rem;
}

.mini-icon { width: 1em; height: 1em; flex: none; }

.mehr-link {
    font-family: var(--sans);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    color: var(--blau);
    white-space: nowrap;
}
.mehr-link:hover { color: var(--blau-dunkel); text-decoration: underline; }

/* --- 4. Kopf ----------------------------------------------- */
.kopf {
    border-bottom: 1px solid var(--linie);
    background: var(--weiss);
    /* bleibt beim Scrollen oben stehen */
    position: sticky;
    top: 0;
    z-index: 60;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}
.kopf-innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.logo { flex: none; display: block; }
.logo img {
    height: 3.1rem;
    width: auto;
    transition: opacity .15s;
}
.logo:hover img { opacity: .8; }

.hauptnav {
    display: flex;
    align-items: center;
    gap: 1.9rem;
    margin-left: auto;
}
.hauptnav > a {
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--text);
    padding: .35rem 0;
    border-bottom: 2px solid transparent;
}
.hauptnav > a:hover { color: var(--blau); }
.hauptnav > a.aktiv { border-bottom-color: var(--blau); color: var(--blau); }

.nav-aktionen {
    display: flex;
    gap: .6rem;
    margin-left: .6rem;
}

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: .5rem;
    color: var(--text);
    cursor: pointer;
}
.nav-toggle svg { width: 1.4rem; height: 1.4rem; }

/* --- 5. Startseite ----------------------------------------- */

/* 5.1 Hero – aktuelle Ausgabe */
.hero {
    background: linear-gradient(180deg, var(--weiss) 0%, var(--creme-hell) 100%);
    padding: 3.5rem 1.5rem 4rem;
}
.hero-innen {
    max-width: var(--breite);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
    align-items: center;
}

.hero-cover {
    position: relative;
    justify-self: center;
}
.hero-cover img {
    width: 100%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    /* zum Text hin geneigt (Text steht rechts) */
    transform: perspective(1400px) rotateY(6deg);
    border-radius: 2px;
}
.hero-stempel {
    position: absolute;
    top: 8%;
    right: -1.5rem;
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 50%;
    background: var(--blau);
    color: var(--weiss);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: .68rem;
    line-height: 1.3;
    letter-spacing: .04em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.hero-stempel strong {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 700;
}

.hero-text h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.4rem);
    letter-spacing: .02em;
    margin-bottom: 1.4rem;
}
.hero-nummer {
    display: block;
    color: var(--blau);
    font-style: italic;
    font-weight: 400;
}
.hero-vorschau {
    font-size: 1.05rem;
    color: var(--text-leise);
    margin: 0 0 .6rem;
    max-width: 34em;
}
.hero-datum {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-leise);
    margin: 0 0 1.6rem;
}

.hero-themen {
    list-style: none;
    margin: 0 0 2.2rem;
    padding: 0;
    display: grid;
    gap: .7rem;
}
.hero-themen li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    font-size: .97rem;
}
.hero-themen li::before {
    content: '✓';
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    margin-top: .1rem;
    border-radius: 50%;
    background: var(--blau);
    color: var(--weiss);
    font-size: .7rem;
    display: grid;
    place-items: center;
}

.hero-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 0;
}

/* 5.2 Vertrauenshinweis */
.claim-band {
    margin: 0;
    padding: 1.4rem 1.5rem;
    background: var(--creme);
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text);
}

/* 5.3 Blöcke allgemein */
.block {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 4rem 1.5rem;
}
.block-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.block-kopf h2,
.block-partner h2 {
    font-size: 1.45rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* 5.4 Blog */
.beitrag-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}
.beitrag-karte {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--weiss);
    transition: box-shadow .2s, transform .2s;
}
.beitrag-karte:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
}
/* Festes Seitenverhältnis: alle Beitragsbilder exakt gleich groß
   (20/9 = 20 % flacher als 16/9, Bilder werden passend beschnitten) */
.beitrag-bild {
    position: relative;
    display: block;
    aspect-ratio: 20 / 9;
    background: var(--creme);
    overflow: hidden;
}
.beitrag-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.rubrik {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--blau);
    color: var(--weiss);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .12em;
    padding: .3rem .7rem;
}
.beitrag-text {
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: .5rem;
}
.beitrag-datum {
    margin: 0;
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--text-leise);
}
.beitrag-text h3 {
    font-size: 1.18rem;
    margin: 0;
}
.beitrag-anleser {
    margin: 0;
    font-size: .92rem;
    color: var(--text-leise);
    flex: 1;
}
.beitrag-text .mehr-link { margin-top: .3rem; }

/* 5.5 Partner – auf der Startseite mittig gesetzt */
.block-partner {
    border-top: 1px solid var(--linie);
    text-align: center;
}
.partner-einleitung {
    max-width: 38em;
    color: var(--text-leise);
    margin: .8rem auto 2rem;
    /* verteilt die Zeilen gleichmäßig – keine einsamen Wörter in der letzten Zeile */
    text-wrap: balance;
}
.partner-einleitung-mittig {
    text-align: center;
}
/* 3 Spalten → bei 6 Partnern zwei Zeilen, Logos groß */
.partner-logos {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 3rem;
    align-items: center;
}
.partner-logos a {
    display: grid;
    place-items: center;
    min-height: 6rem;
}
/* Die Logodateien selbst sind schwarz eingefärbt (assets/img/partner/) */
.partner-logos img {
    max-height: 8rem;
    max-width: 100%;
    width: auto;
    opacity: .75;
    transition: opacity .2s;
}
.partner-logos a:hover img { opacity: 1; }
.logo-ersatz {
    font-family: var(--serif);
    font-size: .9rem;
    text-align: center;
    color: var(--text-leise);
    line-height: 1.25;
}
.partner-logos a:hover .logo-ersatz { color: var(--blau); }

/* 5.5b Abo-Abschnitt auf der Startseite */
.abo-start { border-top: 1px solid var(--linie); }
.abo-start > h2 {
    font-size: 1.45rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2.2rem;
}
.abo-start-oben {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    margin-bottom: 2.5rem;
}
.abo-start-bild {
    max-width: 24rem;
    justify-self: center;
}
.abo-start-vorteile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}
.abo-start-vorteile .abo-punkte { margin-bottom: 0; }
.abo-start .abo-fragen h3 {
    font-family: var(--serif);
    font-size: 1.05rem;
    margin: 0 0 .4rem;
}
.abo-start .abo-fragen {
    margin-bottom: 0;
    border-top: 1px solid var(--linie);
    padding-top: 2rem;
}
.abo-start .abo-fragen p { font-size: .95rem; }

/* 5.6 Rundbrief */
.rundbrief {
    background: var(--creme);
    padding: 3.2rem 1.5rem;
    text-align: center;
}
.rundbrief-innen {
    max-width: 46rem;
    margin: 0 auto;
}
/* Überschrift soll auf einer Zeile stehen (nur ganz schmal darf sie brechen) */
.rundbrief h2 {
    font-size: clamp(1.05rem, 2.6vw, 1.6rem);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
@media (max-width: 420px) {
    .rundbrief h2 { white-space: normal; }
}
.rundbrief > .rundbrief-innen > p {
    color: var(--text-leise);
    margin: .8rem auto 1.8rem;
    max-width: 34em;
}
.rundbrief-zeile {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}
.rundbrief-zeile input[type="email"] {
    flex: 1 1 18rem;
    max-width: 24rem;
    font-family: var(--sans);
    font-size: .95rem;
    padding: .75rem 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--text);
}
.rundbrief-zeile input[type="email"]:focus {
    border-color: var(--blau);
    outline: none;
    box-shadow: 0 0 0 3px var(--blau-hell);
}
.rundbrief-einwilligung {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: .55rem;
    margin-top: 1rem;
    font-size: .82rem;
    color: var(--text-leise);
    text-align: left;
}
.rundbrief-einwilligung input { margin-top: .25rem; accent-color: var(--blau); }
.rundbrief-einwilligung a { color: var(--blau); text-decoration: underline; }

/* 5.7 Zwischenseite „in Vorbereitung“ */
.bald {
    text-align: center;
    padding: 5rem 1.5rem;
    max-width: 40rem;
}
.bald h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    margin-bottom: 1rem;
}
.bald p { color: var(--text-leise); }
.bald .btn { margin-top: 1rem; }

/* --- 5b. Unterseiten --------------------------------------- */

.seiten-kopf {
    background: linear-gradient(180deg, var(--weiss) 0%, var(--creme-hell) 100%);
    border-bottom: 1px solid var(--linie);
    padding: 3rem 1.5rem;
    text-align: center;
}
.seiten-kopf h1 {
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    letter-spacing: .02em;
}
.seiten-kopf p {
    margin: .8rem auto 0;
    max-width: 40em;
    color: var(--text-leise);
}

.rubrik-zeile {
    margin: 0 0 .6rem;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-leise);
}
.rubrik-zeile a { color: var(--blau); }

/* Magazin-Übersicht: aktuelle Ausgabe links, Abo-Kasten rechts daneben */
.magazin-oben-innen {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.magazin-aktuell-innen {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2.5rem;
    align-items: center;
}
.magazin-aktuell-cover img {
    max-width: 14.5rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
    border-radius: 2px;
}
.magazin-titel { font-size: 1.7rem; margin: .3rem 0 .6rem; }

.abo-kasten {
    background: var(--creme);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: flex-start;
}
.abo-kasten h2 {
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.abo-kasten .abo-punkte { margin-bottom: .6rem; }
.abo-kasten .btn { align-self: stretch; justify-content: center; }

.ausgaben-raster {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 2rem;
}
.ausgabe-karte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    text-align: center;
}
.ausgabe-karte > a { display: block; }
/* Titelbilder bewusst deutlich kleiner als die Spaltenbreite */
.ausgabe-karte img {
    max-width: 60%;
    margin: 0 auto .9rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .13);
    border-radius: 2px;
    transition: transform .2s, box-shadow .2s;
}
.ausgabe-karte a:hover img {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.ausgabe-karte-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.btn-karte {
    font-size: .7rem;
    padding: .55rem 1rem;
}
.ausgabe-karte-text strong {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
}
.ausgabe-karte-text small { color: var(--text-leise); }

.verfuegbarkeit {
    display: inline-block;
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.verfuegbarkeit.bestellbar { color: #157a3b; }
.verfuegbarkeit.vergriffen { color: var(--text-leise); }

/* Ausgabe-Detailseite */
.ausgabe-detail-innen {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 3rem;
    align-items: start;
}
.ausgabe-detail-cover img {
    box-shadow: 0 14px 35px rgba(0, 0, 0, .16);
    border-radius: 2px;
    position: sticky;
    top: 6rem;
}
.inhalt-titel {
    font-size: 1.1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin: 2rem 0 .8rem;
}
.inhalt-liste {
    margin: 0;
    padding: 0;
    list-style: none;
}
.inhalt-liste li {
    padding: .45rem 0;
    border-bottom: 1px solid var(--linie);
}
.inhalt-liste li:last-child { border-bottom: none; }

/* Abo-Seite */
.abo-vorteile h2, .abo-schluss h2 {
    font-size: 1.35rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.abo-punkte { margin-bottom: 1.8rem; }
.abo-kernpreis {
    text-align: center;
    background: var(--creme);
    border-radius: var(--radius);
    padding: 2.2rem 1.5rem;
    margin-bottom: 3rem;
}
.abo-preis {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 5vw, 3rem);
    color: var(--blau);
    margin: 0 0 .4rem;
}
.abo-preis small {
    font-size: .45em;
    color: var(--text-leise);
}
.abo-kernpreis .btn { margin-top: 1rem; }
.abo-fragen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
    margin-bottom: 3rem;
}
.abo-fragen h3 {
    font-size: 1.15rem;
    margin: 0 0 .5rem;
}
.abo-fragen p { margin: 0; color: var(--text-leise); }
.abo-schluss { text-align: left; }

/* Artikel (Blogbeitrag) */
.artikel { max-width: 50rem; }
.artikel-kopf h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: .2rem 0 .7rem;
}
.artikel-subline {
    font-size: 1.08rem;
    color: var(--text-leise);
    margin: 0 0 .6rem;
}
.artikel-bild {
    margin: 1.5rem 0;
    border-radius: var(--radius);
}
.artikel-text {
    font-size: 1.02rem;
    line-height: 1.75;
}
.artikel-hinweis {
    color: var(--text-leise);
    font-style: italic;
}
.artikel-kasten {
    background: var(--creme);
    border-left: 3px solid var(--blau);
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
    margin: 1.5rem 0 0;
}
.artikel-kasten p { margin: 0; }
.artikel-kasten a { color: var(--blau); }
.beitrag-titel { font-size: 1.18rem; margin: 0; }

/* Partner-Seite: ein Abschnitt je Partner (Sprungmarken #slug) */
.partner-abschnitte {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}
.partner-abschnitt {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: 2.5rem;
    align-items: start;
    padding-top: 1rem;
    border-top: 1px solid var(--linie);
    scroll-margin-top: 6rem;   /* Sprungmarke landet unterhalb des festen Menüs */
}
.partner-abschnitt-logo {
    display: grid;
    place-items: center;
    min-height: 6rem;
    padding-top: 1rem;
}
.partner-abschnitt-logo img {
    max-height: 6rem;
    max-width: 100%;
    width: auto;
    opacity: .85;
}
.partner-abschnitt-text { text-align: left; }
.partner-abschnitt-text h2 {
    font-size: 1.45rem;
    margin-bottom: .8rem;
}
.partner-abschnitt-text p {
    margin: 0 0 1rem;
    line-height: 1.75;
}
.partner-werden {
    border-top: 1px solid var(--linie);
    text-align: center;
}
.partner-werden h2 { margin-bottom: .6rem; }
.partner-werden p { color: var(--text-leise); max-width: 40em; margin: 0 auto; }
.partner-werden a { color: var(--blau); }

/* Partnerseite */
.partnerseite-kopf-innen {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: 2.5rem;
    align-items: center;
}
.partnerseite-logo {
    max-height: 8rem;
    width: auto;
}
.partnerseite-kopf h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
.partnerseite-abschnitt {
    max-width: 50rem;
    padding-top: 0;
}
.partnerseite-abschnitt h2 {
    font-size: 1.25rem;
    margin-bottom: .7rem;
}
.partnerseite-abschnitt p { color: var(--text); line-height: 1.75; }

/* Rundbrief-Seiten */
.rundbrief-info { max-width: 46rem; }
.rundbrief-form-seite { margin-top: 1.5rem; }
.rundbrief-form-seite .rundbrief-zeile { justify-content: flex-start; }
.rundbrief-form-seite .rundbrief-einwilligung { justify-content: flex-start; }
.hinweis-erfolg, .hinweis-fehler {
    border-radius: var(--radius);
    padding: 1rem 1.3rem;
    margin-bottom: 1.5rem;
}
.hinweis-erfolg { background: #e8f5ec; border: 1px solid #b7dfc3; }
.hinweis-fehler { background: #fdeceb; border: 1px solid #f2c4c0; }
.hinweis-erfolg p, .hinweis-fehler p { margin: 0; }

/* Rundbrief-Seite: Anmeldung zweispaltig, Archiv im 2-Spalten-Raster */
.rundbrief-zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.rundbrief-zweispaltig h2 {
    font-size: 1.2rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.rundbrief-form-seite {
    background: var(--creme);
    border-radius: var(--radius);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.rundbrief-form-seite input[type="email"] {
    width: 100%;
    font-family: var(--sans);
    font-size: .95rem;
    padding: .75rem 1rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--text);
}
.rundbrief-form-seite input[type="email"]:focus {
    border-color: var(--blau);
    outline: none;
    box-shadow: 0 0 0 3px var(--blau-hell);
}
.rundbrief-form-seite .rundbrief-einwilligung {
    justify-content: flex-start;
    margin-top: 0;
}
.rundbrief-form-seite .btn { justify-content: center; }
.rundbrief-klein { color: var(--text-leise); font-size: .9rem; }

.archiv-raster {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem 2rem;
}
.archiv-raster a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    transition: box-shadow .2s, border-color .2s;
}
.archiv-raster a:hover {
    border-color: var(--blau);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}
.archiv-nr {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    background: var(--blau);
    color: var(--weiss);
    border-radius: 50%;
    font-family: var(--serif);
    font-weight: 600;
}
.archiv-text {
    display: flex;
    flex-direction: column;
}
.archiv-text strong {
    font-family: var(--serif);
    font-weight: 500;
}
.archiv-text small { color: var(--text-leise); }

/* Über-uns-Seite */
.ueber-hero-bild img {
    max-width: 12rem;
    border-radius: 50%;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .18);
    margin: 0 auto;
}
.zahlen-band {
    background: var(--dunkel);
    color: var(--dunkel-text);
    padding: 2rem 1.5rem;
}
.zahlen-band-innen {
    max-width: var(--breite);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}
.zahlen-band strong {
    display: block;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--weiss);
    margin-bottom: .2rem;
}
.zahlen-band span { font-size: .85rem; }
.zitat-band {
    padding: 4rem 1.5rem 1rem;
    text-align: center;
}
.zitat-band blockquote {
    margin: 0 auto;
    max-width: 40rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.4rem, 3.2vw, 2rem);
    line-height: 1.4;
    color: var(--blau);
}
.ueber-text h2 {
    letter-spacing: .08em;
    text-transform: uppercase;
}
.ueber-magazin { border-top: 1px solid var(--linie); }
.ueber-magazin-innen {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 2.5rem;
    align-items: center;
}
.ueber-magazin-cover img {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .15);
    border-radius: 2px;
}
.ueber-magazin h2 { font-size: 1.4rem; margin-bottom: .7rem; }

/* Textseiten und Rechtstexte */
.textseite { max-width: 50rem; }
.textseite h2 {
    font-size: 1.25rem;
    margin: 1.8rem 0 .6rem;
}
.textseite h2:first-child { margin-top: 0; }
.rechtstext h1 { font-size: clamp(1.7rem, 3.5vw, 2.3rem); margin-bottom: 1.2rem; }
.rechtstext h2 { font-size: 1.1rem; }
.rechtstext p, .rechtstext li { color: var(--text); }
.rechtstext a { color: var(--blau); text-decoration: underline; }
.rechtstext-stand { color: var(--text-leise); font-size: .85rem; margin-top: 2rem; }

/* Kontakt */
.kontakt-spalten {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
}
.kontakt-seite h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
.kontakt-daten h2 + p { margin-top: 0; }
.kontakt-daten a { color: var(--blau); }
.kontakt-daten h2:not(:first-child) { margin-top: 2rem; }
.kontakt-anliegen { margin: 0; }
.kontakt-anliegen dt {
    font-weight: 500;
    margin-top: 1rem;
}
.kontakt-anliegen dd {
    margin: .15rem 0 0;
    color: var(--text-leise);
    font-size: .95rem;
}
.kontakt-formular label {
    display: block;
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .04em;
    margin: 1.1rem 0 .3rem;
}
.kontakt-formular input,
.kontakt-formular textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: .95rem;
    padding: .7rem .9rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--text);
}
.kontakt-formular input:focus,
.kontakt-formular textarea:focus {
    border-color: var(--blau);
    outline: none;
    box-shadow: 0 0 0 3px var(--blau-hell);
}
.kontakt-formular button { margin-top: 1.4rem; }
.kontakt-formular .kontakt-captcha { max-width: 8rem; }

.ausgaben-archiv-link {
    text-align: center;
    margin: 2.5rem 0 0;
}

/* --- 6. Fuß ------------------------------------------------ */
.fuss {
    background: var(--dunkel);
    color: var(--dunkel-text);
    padding: 3rem 1.5rem 1.5rem;
}
.fuss-innen {
    max-width: var(--breite);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 2rem;
}
.fuss-spalte h2 {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--weiss);
    margin-bottom: .9rem;
}
.fuss-spalte a {
    display: block;
    font-size: .86rem;
    color: var(--dunkel-text);
    padding: .22rem 0;
}
.fuss-spalte a:hover { color: var(--blau); }

.fuss-social { display: flex; gap: .7rem; }
.fuss-social a { color: var(--dunkel-text); }
.fuss-social svg { width: 1.35rem; height: 1.35rem; }
.fuss-social a:hover { color: var(--blau); }

.fuss-claim {
    max-width: var(--breite);
    margin: 2.5rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--weiss);
    text-align: center;
}
.fuss-unten {
    max-width: var(--breite);
    margin: 1.5rem auto 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .76rem;
    color: var(--text-leise);
}
.fuss-unten a { color: var(--text-leise); }
.fuss-unten a:hover { color: var(--blau); }

/* --- 6b. Verwaltung (Admin-Bereich) ------------------------- */
.admin-body { background: var(--creme-hell); }
.admin-kopf {
    background: var(--dunkel);
    color: var(--weiss);
}
.admin-kopf-innen {
    max-width: var(--breite);
    margin: 0 auto;
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.admin-titel {
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 600;
}
.admin-nav {
    display: flex;
    gap: 1.3rem;
    flex-wrap: wrap;
}
.admin-nav a {
    color: var(--dunkel-text);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.admin-nav a:hover, .admin-nav a.aktiv { color: var(--weiss); }

.admin-inhalt {
    max-width: var(--breite);
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.admin-seitenkopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.admin-seitenkopf h1 { font-size: 1.6rem; }
.admin-erklaerung {
    color: var(--text-leise);
    font-size: .92rem;
    max-width: 55em;
    margin: 0 0 1.5rem;
}

.admin-tabelle {
    width: 100%;
    border-collapse: collapse;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    font-size: .93rem;
}
.admin-tabelle th, .admin-tabelle td {
    text-align: left;
    padding: .65rem .9rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: middle;
}
.admin-tabelle th {
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-leise);
    background: var(--creme);
}
.admin-tabelle tr:last-child td { border-bottom: none; }
.admin-aktionen {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}
.admin-aktionen form { display: inline; }
.btn-rot { color: #a0322a; border-color: #d9a09b; }
.btn-rot:hover { background: #a0322a; border-color: #a0322a; color: var(--weiss); }

.admin-login {
    max-width: 24rem;
    margin: 3rem auto;
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 2rem;
}
.admin-login h1 { font-size: 1.4rem; margin-bottom: 1.2rem; }

.admin-formular {
    background: var(--weiss);
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    padding: 1.8rem;
    max-width: 60rem;
}
.feld { margin-bottom: 1.1rem; flex: 1; }
.feld label {
    display: block;
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .04em;
    margin-bottom: .3rem;
}
.feld input[type="text"], .feld input[type="email"], .feld input[type="password"],
.feld input[type="date"], .feld input[type="number"],
.feld select, .feld textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: .95rem;
    padding: .6rem .8rem;
    border: 1px solid var(--linie);
    border-radius: var(--radius);
    background: var(--weiss);
    color: var(--text);
}
.feld textarea { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; line-height: 1.5; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
    border-color: var(--blau);
    outline: none;
    box-shadow: 0 0 0 3px var(--blau-hell);
}
.feld small { display: block; margin-top: .3rem; color: var(--text-leise); }
.feld-reihe { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.feld-haken {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .5rem 0 1.4rem;
    font-size: .92rem;
}
.feld-haken input { accent-color: var(--blau); }

/* --- 7. Mobil ---------------------------------------------- */
@media (max-width: 1000px) {
    .hero-innen { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-cover { max-width: 22rem; }
    .beitrag-raster { grid-template-columns: repeat(2, 1fr); }
    .magazin-oben-innen,
    .magazin-aktuell-innen,
    .ausgabe-detail-innen,
    .rundbrief-zweispaltig,
    .abo-start-oben,
    .kontakt-spalten { grid-template-columns: 1fr; gap: 2rem; }
    .ausgabe-detail-cover img { position: static; max-width: 20rem; }
    .abo-fragen { grid-template-columns: 1fr; gap: 1.5rem; }
    .partner-abschnitt { grid-template-columns: 1fr; gap: 1.2rem; }
    .partner-abschnitt-logo { justify-content: start; min-height: 0; }
    .zahlen-band-innen { grid-template-columns: repeat(2, 1fr); }
    .ueber-hero-bild img { max-width: 16rem; }
    .ueber-magazin-innen { grid-template-columns: 1fr; }
    .ueber-magazin-cover img { max-width: 12rem; }
}
@media (max-width: 640px) {
    .archiv-raster { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .kopf-innen { flex-wrap: wrap; gap: 1rem; }
    .hauptnav {
        display: none;
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        border-top: 1px solid var(--linie);
        padding-top: .5rem;
    }
    .hauptnav.offen { display: flex; }
    .hauptnav > a {
        padding: .8rem .2rem;
        border-bottom: 1px solid var(--linie);
    }
    .hauptnav > a.aktiv { border-bottom-color: var(--linie); }
    .nav-aktionen {
        margin: 1rem 0 .5rem;
        flex-direction: column;
    }
    .nav-aktionen .btn { justify-content: center; }
}

@media (max-width: 640px) {
    body { font-size: 16px; }
    .beitrag-raster { grid-template-columns: 1fr; }
    .block { padding: 2.5rem 1.25rem; }
    .hero { padding: 2.5rem 1.25rem 3rem; }
    .hero-stempel { width: 5rem; height: 5rem; right: -.5rem; font-size: .6rem; }
    .hero-aktionen .btn { flex: 1 1 100%; justify-content: center; }
    .fuss-unten { justify-content: center; text-align: center; }
    .ausgaben-raster { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .partner-logos { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .partner-logos img { max-height: 5rem; }
    .partner-karte { grid-template-columns: 1fr; text-align: center; }
    .partner-karte-text h2 a { display: block; }
}