/* Neues Miteinander TV — Design nach nmtv-design.jpg */

:root {
    --creme:   #f4efe6;
    --creme-2: #ebe4d6;
    --navy:    #14232b;
    --navy-2:  #0e1a21;
    --rot:     #e8502f;
    --rot-dunkel: #c93f20;
    --rot-hell: #ff8466;   /* Korallrot für kleine Schrift auf dunklem Banner */
    --lime:    #d6e38b;
    --grau:    #5d6a70;
    --linie:   #ddd5c6;
    --sans:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Inter Tight", "Inter", system-ui, sans-serif;
    --radius:  4px;
    --breite:  1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--creme);
    color: var(--navy);
    font: 400 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 28px; }

.eyebrow {
    font: 600 11.5px/1.4 var(--sans);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--rot);
    margin: 0 0 14px;
}

/* ---------- Buttons und Links ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 22px;
    font: 600 15px/1 var(--sans);
    text-decoration: none;
    border-radius: 2px;
    border: 0;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.btn-primary { background: var(--rot); color: #fff; }
.btn-primary:hover { background: var(--rot-dunkel); }
.btn-primary::after { content: "→"; font-weight: 400; }
.btn-play {
    display: inline-flex; align-items: center; gap: 12px;
    color: #fff; text-decoration: none; font: 500 15px/1 var(--sans);
}
.btn-play::before {
    content: ""; width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.7);
    background: no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E");
    transition: background-color .15s;
}
.btn-play:hover::before { background-color: rgba(255,255,255,.12); }

.more {
    font: 600 14px/1 var(--sans);
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 7px;
    white-space: nowrap;
}
.more::after { content: "  →"; }
.more:hover { color: var(--rot); }
.more-light { color: #fff; }

/* ---------- Kopf ---------- */
.site-header {
    background: var(--creme);
    border-bottom: 1px solid var(--linie);
    position: sticky; top: 0; z-index: 50;
}
.site-nav { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.site-logo img { width: 172px; height: auto; }
.nav-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-list a {
    display: block; padding: 8px 12px;
    font: 500 14px/1 var(--sans); text-decoration: none;
    border-radius: 999px;
}
.nav-list a:hover { color: var(--rot); }
.nav-list a.nav-spenden { background: var(--rot); border: 1.5px solid var(--navy); color: #fff; padding: 9px 18px; margin: 0 6px; }
.nav-list a.nav-spenden:hover { background: var(--navy); color: #fff; }
.nav-open, .nav-toggle { display: none; }
.nav-list a.nav-suche { display: flex; align-items: center; padding: 8px; }
.nav-suche svg { width: 19px; height: 19px; }
.nav-suche span { display: none; }

/* ---------- Hero ---------- */
.nm-hero {
    position: relative;
    color: #fff;
    background-color: var(--navy-2);
    background-image:
        radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 38% 78%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 55% 14%, rgba(255,255,255,.6), transparent),
        radial-gradient(1px 1px at 92% 88%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 47% 52%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 8% 90%, rgba(255,255,255,.4), transparent),
        radial-gradient(ellipse 40% 45% at 100% 100%, rgba(14,26,33,.9), rgba(14,26,33,0)),
        linear-gradient(90deg, var(--navy-2) 34%, rgba(14,26,33,0) 66%);
    background-repeat: no-repeat;
    background-size: auto, auto, auto, auto, auto, auto, 100% 100%, 100% 100%;
    overflow: hidden;
}
/* Banner: Erde, Knospen und Porträt im Wechsel, Schleier links für die Schrift (nmtv.js legt die Ebenen an) */
.nm-hero-bilder { position: absolute; inset: 0; }
.nm-hero-bilder::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--navy-2) 18%, rgba(14,26,33,.6) 38%, rgba(14,26,33,0) 60%);
}
.nm-hero-bild {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0;
    animation: nm-hero-wechsel 12s infinite;
}
/* 1: Erde vor der Milchstraße (Foto: studiofriluma, Pixabay) */
.nm-hero-bild-1 { background-image: url("/static/img/sternenhimmel.jpg"); }
.nm-hero-erde {
    position: absolute; top: 50%; right: calc(170px - 22vw);
    height: 110%; aspect-ratio: 1;
    transform: translateY(-50%);
    background: url("/static/img/erde-frei.webp") center / contain no-repeat;
    filter: drop-shadow(0 0 36px rgba(90,160,255,.45));
}
.nm-hero-bild-2 { background-image: url("/static/img/banner-knospen.jpg"); animation-delay: 4s; }
/* 3: Porträt in voller Höhe rechtsbündig, linker Rand weich ins Dunkle */
.nm-hero-bild-3 { background-color: var(--navy-2); animation-delay: 8s; }
.nm-hero-bild-3::before {
    content: ""; position: absolute; top: 0; right: 0;
    height: 100%; aspect-ratio: 2573 / 1501;
    background: url("/static/img/banner-portrait.jpg") center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%);
    mask-image: linear-gradient(90deg, transparent, #000 35%);
}
@keyframes nm-hero-wechsel {
    0%    { opacity: 0; }
    8.3%  { opacity: 1; }
    33.3% { opacity: 1; }
    41.7% { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .nm-hero-bild { animation: none; }
    .nm-hero-bild-1 { opacity: 1; }
}
.nm-hero-inner { z-index: 1; }
.nm-hero-inner { position: relative; padding-top: 72px; padding-bottom: 72px; min-height: 620px; display: flex; flex-direction: column; justify-content: center; }
.nm-hero .eyebrow { color: var(--rot-hell); font-weight: 700; font-size: 12.5px; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.45); }
/* Titel im Banner in Kaushan Script (frei, SIL OFL; liegt in static/fonts) */
.nm-hero-title h1 {
    font-family: "Kaushan Script", var(--display);
    font-weight: 400;
    font-size: clamp(3rem, 7.5vw, 6rem);
    line-height: 1.05;
    letter-spacing: 0;
    max-width: 10ch;
    margin: 0 0 28px;
}
.nm-hero-title em { font-style: normal; color: var(--lime); display: block; }
/* Rot und Grün im Banner getauscht (3.11.26): Knopf „Jetzt entdecken“ grün */
.nm-hero .btn-primary { background: var(--lime); color: var(--navy); }
.nm-hero .btn-primary:hover { background: #c3d16f; }
.nm-hero-lead { max-width: 470px; font-size: 18px; color: rgba(255,255,255,.85); margin-bottom: 36px; }
.nm-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
/* „Im Fokus“ unten zur Mitte hin, damit es noch auf dem abgedunkelten Teil des Banners liegt */
.nm-fokus {
    position: absolute; left: 40%; bottom: 40px;
    max-width: 330px;
    border-left: 2px solid var(--lime);
    padding: 4px 0 4px 18px;
}
.nm-fokus .eyebrow { color: var(--rot-hell); font-size: 11px; margin-bottom: 6px; }
.nm-fokus a { font: 500 15px/1.4 var(--sans); text-decoration: none; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.nm-fokus a:hover { color: var(--rot-hell); }

/* ---------- Abschnitte ---------- */
.nm-section { padding-top: 88px; padding-bottom: 88px; }
.nm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.nm-section-head h2 { margin: 0; }

/* ---------- Beitragskarten: gemeinsam ---------- */
.blog { margin: 0; }
.blog-card { position: relative; margin: 0; background: none; border: 0; }
.blog-card a { text-decoration: none; }
.blog-thumb-link { display: block; position: relative; overflow: hidden; background: var(--navy); }
.blog-thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.blog-card:hover .blog-thumb { transform: scale(1.04); }
.blog-rubric { font: 600 10.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--rot); margin: 0 0 8px; }
.blog-rubric a:hover { text-decoration: underline; }
.blog-meta { font-size: 13px; color: var(--grau); margin: 0 0 6px; }
.blog-card-title { font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0; }
.blog-card-title a:hover { color: var(--rot); }
.blog-teaser { font-size: 14.5px; color: var(--grau); margin: 8px 0 0; }
.blog-play {
    position: absolute; right: 16px; bottom: 16px;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--rot) no-repeat 55% 50%/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%23fff'/%3E%3C/svg%3E");
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transition: transform .15s, background-color .15s;
}
.blog-card:hover .blog-play { transform: scale(1.1); background-color: var(--rot-dunkel); }
.blog-card.is-playing .blog-thumb-link { cursor: default; }
.blog-card .player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }
.blog-feed { display: none; }

/* Karte ohne Bild: Logo-Farben statt Loch */
.blog-card:not(:has(.blog-thumb-link))::before {
    content: ""; display: block; aspect-ratio: 16/9;
    background: var(--navy) no-repeat center/38% url("/static/img/favicon.svg");
    opacity: 1;
}

/* ---------- Aktuell: 1 groß + 2 klein ---------- */
.nm-bento {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: 540px;
}
.nm-bento .blog-card { overflow: hidden; background: var(--navy); color: #fff; }
.nm-bento .blog-card:first-child { grid-row: span 2; }
.nm-bento .blog-thumb-link { position: absolute; inset: 0; }
.nm-bento .blog-thumb-link::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(14,26,33,0) 20%, rgba(14,26,33,.7) 55%, rgba(14,26,33,.96) 100%);
}
.nm-bento .blog-card:not(:has(.blog-thumb-link))::before { position: absolute; inset: 0; aspect-ratio: auto; background-size: 24%; opacity: .5; }
.nm-bento .blog-card-body { position: absolute; left: 0; right: 76px; bottom: 0; padding: 26px 30px; z-index: 2; pointer-events: none; }
.nm-bento .blog-card-body a { pointer-events: auto; }
.nm-bento .blog-rubric { color: var(--lime); }
.nm-bento .blog-meta { color: rgba(255,255,255,.7); }
.nm-bento .blog-card-title { font-size: 1.5rem; color: #fff; }
.nm-bento .blog-card:first-child .blog-card-title { font-size: clamp(1.6rem, 2.8vw, 2.4rem); }
.nm-bento .blog-card-title a:hover { color: var(--lime); }
.nm-bento .blog-teaser { color: rgba(255,255,255,.8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nm-bento .blog-card:not(:first-child) .blog-teaser { display: none; }
.nm-bento .blog-play { z-index: 2; right: 24px; bottom: 26px; }
.nm-bento .blog-pager { display: none; }

/* ---------- Mediathek-Reihen ---------- */
.nm-mediathek { background: var(--creme-2); padding: 72px 0 40px; }
.nm-reihe-wrap { margin-bottom: 48px; padding-right: 0; }
.nm-reihe-wrap .nm-section-head { padding-right: 28px; margin-bottom: 20px; }
.nm-reihe-wrap h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.nm-reihe {
    display: flex; gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    padding: 0 28px 18px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--linie) transparent;
}
.nm-reihe .blog-card { flex: 0 0 300px; scroll-snap-align: start; }
.nm-reihe .blog-thumb-link { aspect-ratio: 16/9; border-radius: var(--radius); }
.nm-reihe .blog-play { width: 38px; height: 38px; right: 12px; bottom: 12px; background-size: 10px; }
.nm-reihe .blog-card-body { padding: 14px 2px 0; }
.nm-reihe .blog-card-title { font-size: 1.02rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nm-reihe .blog-teaser, .nm-reihe .blog-rubric { display: none; }
.nm-reihe .blog-pager { display: none; }

/* ---------- Raster (Rubrik- und Übersichtsseiten) ---------- */
.nm-rubrik h1 { margin-bottom: 14px; }
.nm-rubrik-lead { max-width: 640px; font-size: 18px; color: var(--grau); margin-bottom: 48px; }
.nm-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 26px; }
.nm-raster .blog-thumb-link { aspect-ratio: 16/9; border-radius: var(--radius); }
.nm-raster .blog-card-body { padding: 16px 2px 0; }
.nm-raster .blog-teaser { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-pager {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px;
    margin-top: 24px;
}
.blog-pager a {
    font: 600 14px/1 var(--sans); text-decoration: none;
    border: 1.5px solid var(--navy); padding: 12px 20px; border-radius: 999px;
}
.blog-pager a:hover { background: var(--navy); color: #fff; }
.blog-page { font-size: 14px; color: var(--grau); }
.blog-empty { color: var(--grau); }

/* ---------- Suche ---------- */
.blog-search { grid-column: 1 / -1; display: flex; gap: 10px; max-width: 640px; margin-bottom: 8px; }
.blog-search .form-control { flex: 1; min-width: 0; }
form.blog-search button[type=submit] { margin: 0; }
.blog-search-result { grid-column: 1 / -1; font-size: 16px; color: var(--grau); margin: -6px 0 8px; }
.blog-list-title { grid-column: 1 / -1; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 32px 0 0; }
.nm-suche-querperlen { margin-top: 72px !important; padding-top: 40px; border-top: 1px solid var(--linie); scroll-margin-top: 90px; }
.nm-suche-querperlen .blog-list-title { margin-top: 0; }

/* ---------- Einzelner Beitrag ---------- */
.blog-post { max-width: 860px; margin: 0 auto; padding: 56px 28px 96px; }
.blog-back { font-size: 14px; margin-bottom: 28px; }
.blog-back a { text-decoration: none; color: var(--grau); }
.blog-back a:hover { color: var(--rot); }
.blog-title { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 14px; }
.blog-post > .blog-meta { font-size: 14px; margin-bottom: 32px; }
.blog-video { margin: 0 -28px 40px; }
.blog-video-preview { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.blog-video-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.blog-video-preview:hover img { opacity: .85; }
.blog-video-preview .blog-play { left: 50%; top: 50%; right: auto; bottom: auto; width: 76px; height: 76px; margin: -38px 0 0 -38px; background-size: 20px; }
.blog-video-preview .player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.blog-video .video-embed, .blog-body .video-embed, .blog-body .youtube-embed { background: #000; }
.blog-image { margin: 0 0 40px; }
.blog-image img { width: 100%; border-radius: var(--radius); }
.blog-body { font-size: 18px; line-height: 1.7; }
.blog-body h2, .blog-body h3, .blog-body h4 { margin-top: 1.6em; }
.blog-body h2 { font-size: 1.7rem; }
.blog-body h3 { font-size: 1.35rem; }
.blog-body a { color: var(--rot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.blog-body img { margin: 28px 0; border-radius: var(--radius); }
/* eigene Videos aus dem Facebook-Blog; das Vorschaubild oben wäre doppelt */
.blog-body video.fb-video { display: block; width: 100%; margin: 0 auto 32px; border-radius: var(--radius); background: #000; }
.blog-body video.fb-video.hoch { width: auto; max-width: 100%; max-height: 80vh; }
.blog-post:has(.blog-body video.fb-video) .blog-image { display: none; }
.blog-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--rot); color: #33434b; }
.blog-body .youtube-embed, .blog-body .video-embed { margin: 28px 0; }
.blog-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 48px 0 0; padding-top: 28px; border-top: 1px solid var(--linie); }
.blog-share > *:first-child { font: 600 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--grau); margin-right: 8px; }
.blog-share-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border: 1.5px solid var(--linie); border-radius: 999px;
    background: none; font: 500 14px/1 var(--sans); color: var(--navy); text-decoration: none; cursor: pointer;
}
.blog-share-btn:hover { border-color: var(--navy); }
.blog-share-btn svg { width: 16px; height: 16px; }
.blog-share-status { font-size: 14px; color: var(--grau); }
.blog-neighbours { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.blog-neighbours a { text-decoration: none; font-weight: 500; line-height: 1.4; }
.blog-neighbours small { display: block; color: var(--grau); font-weight: 400; margin-bottom: 4px; }
.blog-neighbours a:hover { color: var(--rot); }
.blog-next { text-align: right; }

/* ---------- Haltung ---------- */
/* Eibsee als Parallax hinter dem Zitat (Bild bleibt beim Scrollen stehen), abgedunkelt für die Schrift.
   iOS kennt background-attachment: fixed nicht, dort scrollt das Bild einfach mit. */
.nm-haltung {
    color: rgba(255,255,255,.85); text-align: center;
    background-color: var(--navy);
    background-image: linear-gradient(rgba(14,26,33,.62), rgba(14,26,33,.72)), url("/static/img/eibsee.jpg");
    background-size: cover; background-position: center; background-attachment: fixed;
}
/* „Unsere Haltung“ wie die kleine Schrift im Banner: Korallrot mit Schatten (3.11.26) */
.nm-haltung .eyebrow { color: var(--rot-hell); font-weight: 700; font-size: 12.5px; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 0 14px rgba(0,0,0,.45); }
.nm-zitat-quelle { margin: -18px 0 28px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.nm-zitat-quelle::before { content: "— "; }
.nm-haltung-inner { padding-top: 104px; padding-bottom: 104px; max-width: 900px; }
.nm-zitat p {
    font: 600 clamp(2rem, 5vw, 3.6rem)/1.05 var(--display);
    letter-spacing: -0.04em; color: #fff; margin: 0 0 32px;
}
.nm-zitat em { font-style: normal; color: var(--rot); }
.nm-haltung-inner > p:not(.eyebrow) { max-width: 560px; margin: 0 auto 32px; font-size: 16px; }

/* ---------- Newsletter ---------- */
.nm-newsletter { background: var(--lime); }
.nm-newsletter-inner { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; padding-top: 72px; padding-bottom: 72px; }
.nm-newsletter .eyebrow { color: var(--navy); }
.nm-newsletter h2 { margin: 0; }
.nm-newsletter-sub { margin: 12px 0 0; font-size: 15px; max-width: 460px; }
.newsletter-signup { margin: 0; }
.newsletter-signup h2, .newsletter-signup > p:not(:has(a)) { display: none; }
.newsletter-signup form { display: flex; align-items: flex-end; border-bottom: 1.5px solid var(--navy); }
.newsletter-signup .col-sm-8 { flex: 1; }
.newsletter-signup label.form-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.newsletter-signup input[type=email] {
    width: 100%; border: 0; background: none; padding: 14px 0;
    font: 400 16px var(--sans); color: var(--navy); outline: none;
}
.newsletter-signup input::placeholder { color: rgba(20,35,43,.6); }
.newsletter-signup button {
    background: none; border: 0; padding: 14px 0 14px 16px; cursor: pointer;
    font: 600 15px var(--sans); color: var(--navy); white-space: nowrap;
}
.newsletter-signup button::after { content: "  →"; }
.newsletter-signup .small { font-size: 12.5px; margin: 10px 0 0; color: rgba(20,35,43,.75); }

/* ---------- Textseiten und Formulare ---------- */
.nm-text { max-width: 820px; }
.nm-text h2 { font-size: 1.6rem; margin-top: 1.6em; }
.nm-text a { color: var(--rot); }
form label { display: block; font-weight: 500; font-size: 15px; margin: 18px 0 6px; }
.form-control, form input[type=text], form input[type=email], form textarea {
    width: 100%; padding: 12px 14px; font: 16px var(--sans);
    border: 1.5px solid var(--linie); border-radius: 2px; background: #fff; color: var(--navy);
}
form textarea { min-height: 170px; }
.form-control:focus, form input:focus, form textarea:focus { outline: 2px solid var(--rot); outline-offset: 1px; border-color: transparent; }
form button[type=submit], form .btn-primary {
    margin-top: 22px; background: var(--rot); color: #fff; border: 0;
    padding: 14px 24px; font: 600 15px var(--sans); cursor: pointer; border-radius: 2px;
}
.nm-newsletter form button[type=submit] { margin: 0; background: none; color: var(--navy); }
.alert { padding: 14px 18px; border-radius: 2px; margin: 18px 0; background: #fff; border-left: 3px solid var(--rot); }
.text-muted, .text-body-secondary, .small { color: var(--grau); }

/* ---------- Anmelden, Beitragsformular (Seiten aus ForgeCMS-Modulen) ---------- */
main > section.py-5 { max-width: 820px; margin: 0 auto; padding: 56px 28px 88px; }
.blog-write h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 6px; }
form button.btn-link[type=submit] { margin: 0; padding: 0; background: none; color: var(--rot); font: inherit; text-decoration: underline; }
.blog-write .fw-bold { font-weight: 600; }
.blog-write fieldset { border: 0; margin: 0; padding: 0; }
.blog-write legend { display: block; font-weight: 600; font-size: 15px; margin: 18px 0 6px; }
.blog-write .form-check { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.blog-write .form-check label { margin: 0; font-weight: 400; font-size: 16px; cursor: pointer; }
.blog-write .form-check-input { width: 20px; height: 20px; margin: 0; accent-color: var(--rot); }
.blog-write .form-text { font-size: 13.5px; color: var(--grau); margin-top: 6px; }
.blog-write .form-control-lg { font-size: 18px; }
.blog-write input[type=file] { padding: 10px; }
.blog-write textarea { min-height: 300px; line-height: 1.55; }
.blog-write .d-flex { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; }
.blog-write .d-flex button { margin-top: 0; }
.blog-write .btn-outline-secondary { background: #fff; color: var(--navy); border: 1.5px solid var(--navy); }
.blog-write .btn-outline-danger { background: none; color: var(--rot-dunkel); border: 1.5px solid currentColor; margin-left: auto; }
.blog-write .btn-outline-secondary::after, .blog-write .btn-outline-danger::after { content: none; }
.blog-write img { display: block; max-width: 100%; border-radius: var(--radius); }
.blog-write-pending { background: var(--creme-2); padding: 16px 20px; border-radius: var(--radius); margin-bottom: 28px; }
.blog-write-pending h2 { font-size: 1.05rem; margin: 0 0 8px; }
.blog-write-pending ul { list-style: none; margin: 0; padding: 0; }
.blog-write-pending li { padding: 4px 0; }
.blog-write-pending a { color: var(--navy); font-weight: 600; }
.alert-success { border-left-color: #5a8a3a; }
.alert-danger { border-left-color: var(--rot); color: var(--rot-dunkel); }
.alert a { color: var(--rot); word-break: break-all; }

/* ---------- Fuß ---------- */
.site-footer { border-top: 1px solid var(--linie); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; padding-bottom: 36px; font-size: 14px; }
.footer-logo img { width: 160px; }
.footer-text { margin: 0; color: var(--grau); }
.footer-links { margin: 0; display: flex; gap: 22px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--rot); }
.footer-inhalt { font-weight: 600; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    .nav-list a { padding: 8px 8px; font-size: 13.5px; }
    .nm-raster { grid-template-columns: repeat(2, 1fr); }
    .nm-fokus { display: none; }
}

/* ---------- Handy ---------- */
@media (max-width: 900px) {
    .wrap { padding: 0 18px; }
    .nav-toggle { display: block; width: 30px; height: 30px; cursor: pointer; }
    .nav-list {
        display: none;
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--creme); border-bottom: 1px solid var(--linie);
        padding: 8px 18px 20px;
    }
    .nav-open:checked ~ .nav-list { display: flex; }
    .nav-list a { padding: 14px 4px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--linie); }
    .nav-list a.nav-spenden { margin: 14px 0 0; text-align: center; border-radius: 999px; }
    .nav-list a.nav-suche { gap: 10px; padding: 14px 4px; }
    .nav-suche span { display: inline; }
    .site-logo img { width: 150px; }

    .nm-hero {
        background-image: linear-gradient(180deg, rgba(14,26,33,.35) 0, rgba(14,26,33,.82) 38%, var(--navy-2) 70%);
        background-size: 100% 100%;
    }
    .nm-hero-erde { height: auto; width: 79vw; right: -26.6vw; top: -14.4vw; transform: none; }
    .nm-hero-bild-3::before { right: auto; left: 50%; transform: translateX(-70%); -webkit-mask-image: none; mask-image: none; }
    .nm-hero-bilder::after { background: linear-gradient(180deg, rgba(14,26,33,.3) 0, rgba(14,26,33,.8) 40%, var(--navy-2) 75%); }
    .nm-hero-inner { min-height: 0; padding-top: 64px; padding-bottom: 64px; }

    .nm-section { padding-top: 60px; padding-bottom: 60px; }
    .nm-section-head { align-items: flex-start; flex-direction: column; gap: 14px; }
    .nm-reihe-wrap .nm-section-head { flex-direction: row; align-items: flex-end; padding-right: 18px; }

    .nm-bento { display: flex; flex-direction: column; height: auto; }
    .nm-bento .blog-card { aspect-ratio: 4/3; }
    .nm-bento .blog-card:first-child { aspect-ratio: 4/5; }
    .nm-bento .blog-card-body { padding: 20px; right: 64px; }
    .nm-bento .blog-play { right: 18px; bottom: 20px; }

    .nm-reihe { padding-right: 18px; }
    .nm-reihe .blog-card { flex-basis: 76vw; }

    .nm-raster { grid-template-columns: 1fr; gap: 36px; }

    .blog-post { padding: 36px 18px 72px; }
    .blog-video { margin: 0 -18px 32px; }
    .blog-body { font-size: 17px; }
    .blog-neighbours { grid-template-columns: 1fr; }
    .blog-next { text-align: left; }

    .nm-newsletter-inner { grid-template-columns: 1fr; gap: 24px; padding-top: 56px; padding-bottom: 56px; }
    .nm-haltung-inner { padding-top: 76px; padding-bottom: 76px; }

    .footer-inner { flex-direction: column; text-align: center; }
}

/* Videos fremder Plattformen im Text (z. B. Odysee) */
.blog-body .video-embed { position: relative; aspect-ratio: 16/9; }
.blog-body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-klick button {
    position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
    background: var(--navy); color: #fff; font: 600 20px/1.3 var(--sans);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.video-klick button:hover { background: var(--navy-2); }
.video-klick small { font-weight: 400; font-size: 13px; opacity: .75; max-width: 30em; padding: 0 16px; }

/* ---------- Untermenü (Weltenlage → Querperlen) ---------- */
.nav-sub { position: relative; }
.nav-sub > a::after { content: " ▾"; font-size: 10px; opacity: .6; }
.nav-sub ul {
    display: none; position: absolute; left: 0; top: 100%;
    min-width: 190px; list-style: none; margin: 0; padding: 8px;
    background: #fff; border: 1px solid var(--linie); border-radius: 6px;
    box-shadow: 0 12px 30px rgba(20,35,43,.12);
}
.nav-sub:hover ul, .nav-sub:focus-within ul { display: block; }
.nav-sub ul a { border-radius: 4px; padding: 10px 12px; }
.nav-sub ul a:hover { background: var(--creme); }
.nm-unterlink { display: inline-block; margin: -24px 0 44px; color: var(--rot); }
@media (max-width: 900px) {
    .nav-sub > a::after { content: ""; }
    .nav-sub ul { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; background: none; min-width: 0; }
    .nav-sub ul li:first-child { display: none; }
    .nav-sub ul a { font-size: 15px; color: var(--grau); }
}

/* Bei YouTube entfernte Videos: kein Abspielknopf über dem Hinweisbild */
img[src*="video-entfernt"] + .blog-play { display: none; }

/* Social-Links im Footer (gleiche Kanäle auf allen Seiten von Angela Mahr) */
.footer-social { display: flex; gap: 10px; --social-bg: var(--creme); }
.footer-social a { display: block; width: 28px; height: 28px; color: var(--navy); transition: color .2s, transform .2s; }
.footer-social a:hover { color: var(--rot); transform: translateY(-2px); }
.footer-social svg { display: block; width: 100%; height: 100%; }

/* Unterstützen (/unterstuetzen): Überweisung mit GiroCode, darunter Stripe-Zahlungslink */
.nm-support { display: grid; gap: 18px; margin: 1.6em 0; }
.nm-support-weg { border: 1.5px solid var(--navy); padding: 22px 24px; background: #fff; }
.nm-support-weg h2 { margin: 0 0 .4em; font-size: 1.35rem; }
.nm-support-weg .btn { margin: .4em 0; color: #fff; }
.nm-support-klein { font-size: .9rem; opacity: .75; margin: .4em 0 0; }
.nm-support summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.nm-support summary::-webkit-details-marker { display: none; }
.nm-support summary h2 { margin: 0; }
.nm-support summary span { color: var(--rot); font-weight: 600; }
.nm-support details[open] summary span { display: none; }
.nm-support dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 1em 0; }
.nm-support dt { font-weight: 600; }
.nm-support dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .nm-support dl { grid-template-columns: 1fr; } .nm-support dd { margin-bottom: 8px; } }

/* Kleiner Unterstützen-Kasten auf der Startseite */
.nm-support-teaser { background: var(--lime); color: var(--navy); }
.nm-support-teaser-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 44px; padding-bottom: 44px; }
.nm-support-teaser h2 { margin: 0 0 .3em; }
.nm-support-teaser p { margin: 0; max-width: 560px; }
.nm-support-qr { display: flex; align-items: center; gap: 18px; margin: 1em 0; }
.nm-support-qr img { flex: none; width: 150px; height: 150px; }
.nm-support-qr figcaption { font-size: .9rem; opacity: .8; }
@media (max-width: 560px) { .nm-support-qr { flex-direction: column; align-items: flex-start; } }

/* ---------- Danke-Seite (3.11.26) ---------- */
/* Ganzes Foto als Seite, Text rechts im freien Himmel; leichter Schleier von rechts für die Lesbarkeit */
.nm-danke {
    color: #fff;
    background-color: #3f6fc4;
    background-image: linear-gradient(270deg, rgba(14,26,33,.38) 0%, rgba(14,26,33,.12) 50%, rgba(14,26,33,0) 70%), url("/static/img/danke-blueten.jpg");
    background-size: cover; background-position: 30% center;
}
.nm-danke-inner { min-height: calc(100vh - 77px); min-height: calc(100svh - 77px); display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-top: 64px; padding-bottom: 64px; }
.nm-danke-box { max-width: 500px; text-shadow: 0 1px 14px rgba(14,26,33,.55); }
.nm-danke .eyebrow { color: var(--lime); }
.nm-danke h1 {
    color: #fff; margin: 0 0 24px;
    font: 600 clamp(2.2rem, 4.8vw, 3.6rem)/1.05 var(--display); letter-spacing: -0.03em;
}
.nm-danke p:not(.eyebrow) { font-size: 18px; color: #fff; }
.nm-danke .btn { margin-top: 12px; text-shadow: none; }
@media (max-width: 700px) {
    /* Handy: Text über die ganze Breite, deshalb gleichmäßigerer Schleier */
    .nm-danke { background-image: linear-gradient(180deg, rgba(14,26,33,.2), rgba(14,26,33,.5)), url("/static/img/danke-blueten.jpg"); background-position: 25% center; }
    .nm-danke-inner { align-items: stretch; justify-content: flex-end; }
}