/* ═══════════════════════════════════════════════════════════════════════
   NMMB Theme · Globale Tokens, Basis, Typografie, Sections, Footer
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --nmmb-green: #00913d;
    --nmmb-green-deep: #006b2c;
    --nmmb-green-bright: #2bb35f;
    --nmmb-lime: #c8dc28;
    --nmmb-paper: #f4ecdc;
    --nmmb-paper-soft: #fbf6ec;
    --nmmb-ink: #14241a;
    --nmmb-ink-soft: #2c3f33;
    --nmmb-rust: #c14b2b;

    --nmmb-display: "Plus Jakarta Sans", system-ui, sans-serif;
    --nmmb-body: "Plus Jakarta Sans", system-ui, sans-serif;
    --nmmb-mono: "JetBrains Mono", ui-monospace, monospace;

    --nmmb-rail: clamp(1.25rem, 5vw, 4rem);
    --nmmb-gutter: clamp(1rem, 3vw, 2rem);
    --nmmb-measure: 62ch;

    --nmmb-ease: cubic-bezier(.2, .8, .2, 1);
    --nmmb-ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
    --bs-gap-medium: 40px;
    --bs-gap-big: 60px;
    --bs-gap-xl: 100px;
    --bs-gap-xxl: 100px;
    --pac-12grid-gap: var(--bs-gap-medium, 1rem);
    --pac-12grid-gap-xs: var(--bs-gap-medium, 1rem);
    --pac-12grid-gap-sm: var(--bs-gap-medium, 1rem);
    --pac-12grid-gap-md: var(--bs-gap-big, 1rem);
    --pac-12grid-gap-lg: var(--bs-gap-xl, 1rem);
    --pac-12grid-gap-xl: var(--bs-gap-xl, 1rem);
    --pac-12grid-gap-xxl: var(--bs-gap-xl, 1rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--nmmb-body);
    font-size: clamp(1rem, calc(.65vw + .85rem), 1.18rem);
    line-height: 1.6;
    color: var(--nmmb-ink);
    background: var(--nmmb-paper);
    font-feature-settings: "ss01", "kern";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
p{
    margin-top: 0;
}
header{
    margin-bottom: 2em;
}
a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    text-underline-offset: .25em;
}
a:hover { text-decoration-color: currentColor; }

.pt-0{ padding-top: var(--gap-xl,0) !important;}
.pt-small{ padding-top: var(--gap-xl,10px) !important;}
.pt-default{ padding-top: var(--gap-xl,20px) !important;}
.pt-big{ padding-top: var(--gap-xl,40px) !important;}
.pt-large{ padding-top: var(--gap-xl,50px) !important;}
.pt-xlarge{ padding-top: var(--gap-xl,70px) !important;}
.pt-xxlarge{ padding-top: var(--gap-xl,100px) !important;}

.pb-0{ padding-bottom: var(--gap-xl,0) !important;}
.pb-small{ padding-bottom: var(--gap-xl,10px) !important;}
.pb-default{ padding-bottom: var(--gap-xl,20px) !important;}
.pb-big{ padding-bottom: var(--gap-xl,40px) !important;}
.pb-large{ padding-bottom: var(--gap-xl,50px) !important;}
.pb-xlarge{ padding-bottom: var(--gap-xl,70px) !important;}
.pb-xxlarge{ padding-bottom: var(--gap-xl,100px) !important;}

img, svg { display: block; max-width: 100%; height: auto; }
strong { font-weight: 800; }
em { font-style: italic; }
::selection { background: var(--nmmb-green); color: var(--nmmb-paper-soft); }

:focus-visible {
    outline: 3px solid var(--nmmb-lime);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ──────────────────────────────────────────────  TYPOGRAPHY  ────────────────────────────────────────────── */


.nmmb-main h1,
.nmmb-main h2,
.nmmb-main h3,
.nmmb-main .h1,
.nmmb-main .h2,
.nmmb-main .h3 {
    font-family: var(--nmmb-display);
    letter-spacing: -.02em;
    line-height: .98;
}
.nmmb-main h1 em,
.nmmb-main h2 em,
.nmmb-main h3 em {
    font-style: italic;
    font-weight: 800;
    color: var(--nmmb-green);
}
.nmmb-main h2 {
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    margin: 0 0 1.5rem;
}

/* Größen-Klassen für header_class / subheader_class / preheader_class — überschreiben
   die Default-Größe des semantischen Tags (z.B. <h2 class="h1"> rendert als H1).
   Specificity (0,2,0) gewinnt gegen .nmmb-main h2 (0,1,1). */
.nmmb-main h1,.nmmb-main .h1 { font-size: clamp(2.5rem, 6.5vw, 7rem);   font-weight: 800; line-height: .95; margin: 0 0 1.5rem; }
.nmmb-main h2,.nmmb-main .h2 { font-size: clamp(2rem,   5vw,   4rem);   font-weight: 700; line-height: .98; margin: 0 0 1.5rem; }
.nmmb-main h3,.nmmb-main .h3 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.05; margin: 0 0 1.25rem; }
.nmmb-main h4,.nmmb-main .h4 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; line-height: 1.1;  margin: 0 0 1rem; }
.nmmb-main h5,.nmmb-main .h5 { font-size: 1.15rem; font-weight: 700; line-height: 1.2;  margin: 0 0 .75rem; }

/* "-underlined"-Modifier aus header_class/subheader_class/preheader_class:
   Akzent-Unterstrich in Lime unter der Headline. */
.nmmb-main .-underlined {
    position: relative;
    padding-bottom: .35em;
    margin-bottom: 1.25rem;
}
.nmmb-main .-underlined::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 2.5em;
    height: 4px;
    background: var(--nmmb-lime);
    border-radius: 2px;
}

/* Base editorial typography for every text-type content element inside <main class="nmmb-main">.
   Applies regardless of container nesting, so editors don't need to add a class for readable paragraphs.
   Styles the standard rte_ckeditor / bootstrap_package markup (.lead, blockquote, …) so the editor's
   default tooling produces the NMMB editorial look without custom classes. */
.nmmb-main .frame-type-text,
.nmmb-main .ce-bodytext,
.nmmb-story {
    font-size: 1.1em;
}
.nmmb-main .frame-type-text p,
.nmmb-main .ce-bodytext p,
.nmmb-story p {
    margin: 0 0 1.2em;
    max-width: var(--nmmb-measure);
}

/* Editor "Lead"-Style (bootstrap_package adds class="lead") → NMMB-Lead-Absatz */
.nmmb-main .frame-type-text .lead,
.nmmb-story__lead {
    font-family: var(--nmmb-display);
    font-size: 1.45em;
    line-height: 1.35;
    font-weight: 500;
}

/* Drop-Cap: erstes Zeichen des Lead-Absatzes. Editor kann optional ein <strong>S</strong>
   davorsetzen — das stört das ::first-letter-Rendering nicht. */
.nmmb-main .frame-type-text .lead::first-letter,
.nmmb-story__lead::first-letter,
.nmmb-story__cap {
    float: left;
    font-family: var(--nmmb-display);
    font-weight: 800;
    font-style: italic;
    font-size: 3.4em;
    line-height: .82;
    color: var(--nmmb-green);
    padding: .05em .12em 0 0;
}

/* Editor-Blockquote (CKEditor Standard) → NMMB Pull-Quote */
.nmmb-main .frame-type-text blockquote,
.nmmb-story__pull {
    margin: 0 0 1.2em;
    padding-left: 1em;
    border-left: 4px solid var(--nmmb-lime);
    font-family: var(--nmmb-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.8em;
    line-height: 1.15;
    color: var(--nmmb-green-deep);
}
.nmmb-main .frame-type-text blockquote p {
    margin: 0;
    max-width: none;
}

/* ──────────────────────────────────────────────  KICKER  ────────────────────────────────────────────── */

.nmmb-kicker,
.kicker {
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--nmmb-green-deep);
    margin: 0 0 1.5rem;
    display: inline-block;
}
.nmmb-kicker--dark { color: var(--nmmb-ink); }
.nmmb-kicker--light { color: color-mix(in srgb, var(--nmmb-paper-soft) 80%, transparent); }
.nmmb-kicker--lime { color: var(--nmmb-lime); }

/* Subheader (TYPO3 default) als Kicker stylen, wenn es im content kommt */
.nmmb-main .ce-subheader,
.nmmb-main .subheader,
.nmmb-main h2 + .subheader {
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--nmmb-green-deep);
    margin: 0 0 1rem;
}

/* Preheader (tt_content.preheader, eigenes TCA-Feld, gerendert via Header/PreHeader.html)
   wird ÜBER dem Titel angezeigt als „02 · So funktioniert's"-Vor-Titel.
   Default = kleiner Mono-Caps-Kicker; preheader_class = h1..h5 schaltet auf Display-Heading
   in der jeweiligen Größe um. */
.nmmb-main .frame-preheader {
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--nmmb-green-deep);
    margin: 0 0 1rem;
    display: block;
}
/* Sobald preheader_class = h1..h5 → Mono-Caps-Default ausschalten, Display-Heading übernehmen.
   Größe wird hier explizit gesetzt, damit Specificity (0,3,0) gegen .nmmb-main .frame-preheader (0,2,0) gewinnt
   (Cascade-Reihenfolge wäre sonst gegen uns, da .frame-preheader nach .h1..h5 im File kommt). */
.nmmb-main .frame-preheader.h1,
.nmmb-main .frame-preheader.h2,
.nmmb-main .frame-preheader.h3,
.nmmb-main .frame-preheader.h4,
.nmmb-main .frame-preheader.h5 {
    font-family: var(--nmmb-display);
    letter-spacing: -.02em;
    text-transform: none;
    color: inherit;
}
.nmmb-main .frame-preheader.h1 { font-size: clamp(2.5rem, 6.5vw, 5rem);   font-weight: 800; line-height: .95; margin: 0 0 1.5rem; }
.nmmb-main .frame-preheader.h2 { font-size: clamp(2rem,   5vw,   4rem);   font-weight: 700; line-height: .98; margin: 0 0 1.5rem; }
.nmmb-main .frame-preheader.h3 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); font-weight: 700; line-height: 1.05; margin: 0 0 1.25rem; }
.nmmb-main .frame-preheader.h4 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: 700; line-height: 1.1;  margin: 0 0 1rem; }
.nmmb-main .frame-preheader.h5 { font-size: 1.15rem;                      font-weight: 700; line-height: 1.2;  margin: 0 0 .75rem; }
/* Kontext: auf dunklem Hintergrund (bg-dark / bg-primary / bg-primaryextra) → Lime */
.nmmb-main > .frame.bg-dark .frame-preheader,
.nmmb-main > .frame.bg-primary .frame-preheader,
.nmmb-main > .frame.bg-primaryextra .frame-preheader {
    color: var(--nmmb-lime);
}
/* Kontext: auf hellem Hintergrund → ink-soft */
.nmmb-main > .frame.bg-light .frame-preheader,
.nmmb-main > .frame.bg-white .frame-preheader,
.nmmb-main > .frame.bg-white a {
    color: var(--nmmb-green-deep);
}

/* ──────────────────────────────────────────────  STANDARD CE WRAPPER  ────────────────────────────────────────────── */

.nmmb-main > .frame,
.nmmb-main > .ce {
    padding: clamp(2.5rem, 6vw, 5rem) var(--nmmb-rail);
}
.nmmb-main > .frame > *,
.nmmb-main > .ce > * {
    max-width: 1280px;
    margin-inline: auto;
}

/* Ein paar Sektionen färben sich kontextuell — heuristisch via :has() */
.nmmb-main > .frame:has(h2 em),
.nmmb-main > .ce:has(h2 em) {
    background: var(--nmmb-paper-soft);
}

/* ──────────────────────────────────────────────  STORY (1. Text-CE nach Hero)  ────────────────────────────────────────────── */

.nmmb-main > .nmmb-hero + .frame.frame-type-text {
    background: var(--nmmb-paper-soft);
}

/* Drop-Cap auf erstem Absatz */
.nmmb-main > .nmmb-hero + .frame.frame-type-text > p:first-of-type::first-letter {
    float: left;
    font-family: var(--nmmb-display);
    font-weight: 800;
    font-style: italic;
    font-size: 4.4em;
    line-height: .82;
    color: var(--nmmb-green);
    padding: .05em .15em 0 0;
}
/* Pull-Quote (Absatz mit nur einem em) */
.nmmb-main > .nmmb-hero + .frame.frame-type-text p > em:only-child {
    display: block;
    font-family: var(--nmmb-display);
    font-style: italic;
    font-weight: 700;
    font-size: 1.6em;
    line-height: 1.15;
    color: var(--nmmb-green-deep);
    padding-left: 1em;
    margin: 1.2em 0;
    border-left: 4px solid var(--nmmb-lime);
}

/* ──────────────────────────────────────────────  STEPS-SEKTION (Konvention) ────────────────────────────────────────────── */
/* Konvention statt fragiler Sibling-Chain:
     • Steps = container_3_columns mit background_color_class=dark
       → <div class="frame frame-type-container_3_columns bg-dark">
     • Optionale Heading-CE davor mit derselben background_color_class
     • Bg/Heading/Text-Akzente werden vom generischen bg-*-Block unten gesetzt
     • Bg/Heading/Text-Akzentespace- werden vom generischen bg-*-Block unten gesetzt
     • 3-Spalten-Layout liefert b13/container über .contentcontainer.ac-12grid.-cols3
   So gilt das gleiche Pattern für jeden farbigen Block — nicht nur "Steps". */

/* ──────────────────────────────────────────────  bg-* COLOR CLASSES (für background_color_class) ────────────────────────────────────────────── */
/* Mapping: bootstrap-package liefert .bg-primary etc. Hier eigene Implementation, da Theme standalone. */
.nmmb-main > .frame.bg-primary       { background: var(--nmmb-green); color: var(--nmmb-paper-soft); }
.nmmb-main > .frame.bg-primaryextra  { background: var(--nmmb-green-deep); color: var(--nmmb-paper-soft); }
.nmmb-main > .frame.bg-secondary     { background: var(--nmmb-green-bright); color: var(--nmmb-ink); }
.nmmb-main > .frame.bg-tertiary      { background: var(--nmmb-lime); color: var(--nmmb-ink); }
.nmmb-main > .frame.bg-quaternary    { background: var(--nmmb-rust); color: var(--nmmb-paper-soft); }
.nmmb-main > .frame.bg-light         { background: var(--nmmb-paper-soft); color: var(--nmmb-ink); }
.nmmb-main > .frame.bg-dark          { background: var(--nmmb-ink); color: var(--nmmb-paper-soft); }
.nmmb-main > .frame.bg-black         { background: #000; color: var(--nmmb-paper-soft); }
.nmmb-main > .frame.bg-white         { background: #fff; color: var(--nmmb-ink); }
.nmmb-main > .frame.bg-success       { background: #4ca34c; color: #fff; }
.nmmb-main > .frame.bg-info          { background: #2b87a8; color: #fff; }
.nmmb-main > .frame.bg-warning       { background: #d8a23a; color: var(--nmmb-ink); }
.nmmb-main > .frame.bg-danger        { background: #c14b2b; color: #fff; }

/* ── Heading-Typografie per BG-Color ── */
/* Generelle Heading-Größe für CEs mit BG-Color-Klasse */
.nmmb-main > .frame[class*="bg-"] h2,
.nmmb-main > .frame.frame-type-text:has(h3) h2 {
    font-family: var(--nmmb-display);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.02em;
    margin: 0;
    max-width: 28ch;
}

/* Akzentfarben: GRÜN (bg-primary / bg-primaryextra / bg-dark) → Lime */
.nmmb-main > .frame.bg-primary,
.nmmb-main > .frame.bg-primaryextra,
.nmmb-main > .frame.bg-dark { color: var(--nmmb-paper-soft); }
.nmmb-main > .frame.bg-primary h2 em,
.nmmb-main > .frame.bg-primaryextra h2 em,
.nmmb-main > .frame.bg-dark h2 em {
    color: var(--nmmb-lime);
    font-style: italic;
    font-weight: 800;
}
.nmmb-main > .frame.bg-primary h3,
.nmmb-main > .frame.bg-primaryextra h3,
.nmmb-main > .frame.bg-dark h3 {
    color: var(--nmmb-lime);
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}
.nmmb-main > .frame.bg-primary a,
.nmmb-main > .frame.bg-primaryextra a,
.nmmb-main > .frame.bg-dark a { color: var(--nmmb-lime); }
.nmmb-main > .frame.bg-primary strong,
.nmmb-main > .frame.bg-primaryextra strong,
.nmmb-main > .frame.bg-dark strong { color: var(--nmmb-lime); }

/* Akzentfarben: HELL (bg-white / bg-light) → Grün */
.nmmb-main > .frame.bg-white h2 em,
.nmmb-main > .frame.bg-light h2 em {
    color: var(--nmmb-green);
    font-style: italic;
    font-weight: 800;
}
.nmmb-main > .frame.bg-white h3,
.nmmb-main > .frame.bg-light h3 {
    color: var(--nmmb-green-deep);
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0;
    font-weight: 400;
}
/* Akzent-Nummern für Step-Karten innerhalb eines dunklen 3-Spalten-Containers:
   Editor wählt container_3_columns + background_color_class=dark|primary|primaryextra.
   Innerhalb dieses Containers wird das h3 (Subheader) im Text-CE zur großen italic-Lime-Zahl,
   das h2 zum kleinen Karten-Titel und der Body etwas leiser. */
.nmmb-main > .frame.frame-type-container_3_columns.bg-dark .frame-type-text h3,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primary .frame-type-text h3,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primaryextra .frame-type-text h3 {
    font-family: var(--nmmb-display);
    font-style: italic;
    font-weight: 800;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--nmmb-lime);
    margin: 0 0 1rem;
    text-transform: none;
    letter-spacing: -.02em;
}
.nmmb-main > .frame.frame-type-container_3_columns.bg-dark .frame-type-text h2,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primary .frame-type-text h2,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primaryextra .frame-type-text h2 {
    font-size: 1.4rem;
    margin: 0 0 .75rem;
}
.nmmb-main > .frame.frame-type-container_3_columns.bg-dark .frame-type-text p,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primary .frame-type-text p,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primaryextra .frame-type-text p {
    font-size: .95rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--nmmb-paper-soft) 88%, transparent);
}
.nmmb-main > .frame.frame-type-container_3_columns.bg-dark .frame-type-text p em,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primary .frame-type-text p em,
.nmmb-main > .frame.frame-type-container_3_columns.bg-primaryextra .frame-type-text p em {
    color: var(--nmmb-lime);
    font-style: italic;
}

/* ──────────────────────────────────────────────  GENERIC HEADING-LAYOUT FÜR TEXT-CEs MIT KICKER  ────────────────────────────────────────────── */
/* Wenn ein Text-CE einen Subheader hat: kicker oben, große Heading unten */
.nmmb-main > .frame.frame-type-text:has(h3) > header {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1rem;
    max-width: 1280px;
    margin-inline: auto;
}

/* ──────────────────────────────────────────────  FRAME-SPACE-BEFORE/AFTER (bootstrap_package convention) ────────────────────────────────────────────── */
/* TYPO3 space_before_class / space_after_class TCA-Werte werden vom CE-Layout zu Klassen
   wie .frame-space-before-large / .frame-space-after-extra-large.
   Bootstrap-Package-Skala: extra-small, small, medium, large, extra-large, none.
   Werte hier als margin (statt padding), damit bg-Farben den CE-eigenen Bereich nicht „leer" einfärben. */
.nmmb-main .frame{
    margin-bottom: 0rem;
    /* `overflow: clip` clips without establishing a scroll container, so
       `position: sticky` descendants (e.g. nmmb-stickykicker) keep the
       viewport as their scrollport. `overflow: hidden` would silently kill
       stickiness. */
    overflow: clip;
}
.nmmb-main .frame.frame-space-before-extra-small { margin-top: .5rem; }
.nmmb-main .frame.frame-space-before-small       { margin-top: 1rem; }
.nmmb-main .frame.frame-space-before-medium      { margin-top: 2rem; }
.nmmb-main .frame.frame-space-before-large       { margin-top: clamp(2rem, 4vw, 3.5rem); }
.nmmb-main .frame.frame-space-before-extra-large { margin-top: clamp(3rem, 6vw, 5rem); }
.nmmb-main .frame.frame-space-before-no-space    { margin-top: 0; }

.nmmb-main .frame.frame-space-after-extra-small  { margin-bottom: .5rem; }
.nmmb-main .frame.frame-space-after-small        { margin-bottom: 1rem; }
.nmmb-main .frame.frame-space-after-medium       { margin-bottom: 2rem; }
.nmmb-main .frame.frame-space-after-large        { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.nmmb-main .frame.frame-space-after-extra-large  { margin-bottom: clamp(3rem, 6vw, 5rem); }
.nmmb-main .frame.frame-space-after-no-space     { margin-bottom: 0; }

/* Pills-Frame: angeschlossen an vorherige Sektion (kein Padding-top) */
.nmmb-main > .frame.frame-type-atomicplan_pills {
    padding-top: 1rem;
}

/* ──── Website-Sponsoren-Block (am Ende der Pills-Sektion) ──── */
.nmmb-websitesponsors {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid color-mix(in srgb, var(--nmmb-paper-soft) 18%, transparent);
}
.nmmb-websitesponsors__kicker {
    color: var(--nmmb-lime);
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}
.nmmb-websitesponsors__logos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.nmmb-websitesponsors__logo {
    display: inline-grid;
    place-items: center;
    background: var(--nmmb-paper-soft);
    padding: 1rem 1.5rem;
    border-radius: 14px;
    min-width: 120px;
    min-height: 80px;
    transition: transform .25s var(--nmmb-ease);
}
.nmmb-websitesponsors__logo:hover { transform: translateY(-3px); }
.nmmb-websitesponsors__logo img {
    height: 56px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* ──────────────────────────────────────────────  FOOTER  ────────────────────────────────────────────── */

.nmmb-foot {
    background: var(--nmmb-ink);
    color: var(--nmmb-paper-soft);
    padding: clamp(3rem, 6vw, 5rem) var(--nmmb-rail) 1.5rem;
}
.nmmb-foot a {
    color: var(--nmmb-paper-soft);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--nmmb-paper-soft) 35%, transparent);
    padding-bottom: 1px;
    transition: border-color .2s;
}
.nmmb-foot a:hover { border-color: var(--nmmb-lime); }

.nmmb-foot__inner {
    max-width: 1280px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 700px) {
    .nmmb-foot__inner { grid-template-columns: 1.2fr 1.3fr 1fr; align-items: start; }
}

.nmmb-foot__address { margin: 0; line-height: 1.5; font-size: .95rem; }

.nmmb-foot__brand { display: flex; flex-direction: column; gap: .85rem; }
.nmmb-foot__thumb {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
}
.nmmb-foot__thumb svg { width: 24px; height: 24px; color: var(--nmmb-paper-soft); }
.nmmb-foot__brand-name {
    margin: 0;
    font-family: var(--nmmb-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
}
.nmmb-foot__brand-name em { font-style: italic; font-weight: 800; }

.nmmb-foot__carriers-row { display: flex; gap: 1.25rem; align-items: stretch; flex-wrap: wrap; }
.nmmb-foot__carrier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    padding: .75rem 1rem;
    background: rgba(255, 255, 255, .04);
    border-radius: 12px;
    text-decoration: none;
    border-bottom: none !important;
}
.nmmb-foot__carrier img {
    height: 56px;
    width: auto;
    min-width: 80px;
    object-fit: contain;
    display: block;
}
.nmmb-foot__carrier--town {
    flex-direction: column;
    gap: .1rem;
    text-align: center;
    line-height: 1.05;
    color: var(--nmmb-paper-soft);
}
.nmmb-foot__carrier-kicker {
    font-family: var(--nmmb-mono);
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}
.nmmb-foot__carrier-name {
    font-family: var(--nmmb-display);
    font-size: 1.05rem;
    font-weight: 700;
}
.nmmb-foot__carrier-sub {
    font-family: var(--nmmb-display);
    font-size: .7rem;
    font-style: italic;
    opacity: .85;
}

.nmmb-foot__legal-kicker { margin-top: 1.25rem; }
.nmmb-foot__legal-list { list-style: none; padding: 0; margin: 0; }

.nmmb-foot__copy {
    max-width: 1280px;
    margin: 1.4rem auto 0;
    font-family: var(--nmmb-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
    line-height: 1.6;
}

/* ───────────────────────────────────────────────────────────────────────
   Bootstrap-Text-Color-Utilities auf NMMB-Palette
   Der RTE (plate_bootstrap RTE-Default) bietet diese Klassen im
   Style-Dropdown an — NMMB rendert standalone ohne Bootstrap-CSS, daher
   hier eigene Mappings auf die Design-Tokens.
   ─────────────────────────────────────────────────────────────────────── */
.text-primary   { color: var(--nmmb-green); }
.text-secondary { color: var(--nmmb-ink-soft); }
.text-success   { color: var(--nmmb-green-bright); }
.text-info      { color: var(--nmmb-green-deep); }
.text-tertiary   { color: var(--nmmb-lime); }
.text-warning   { color: var(--nmmb-lime); }
.text-danger    { color: var(--nmmb-rust); }

/* ───────────────────────────────────────────────────────────────────────
   NMMB Sheet — slide-up bottom panel (Impressum/Datenschutz via HTMX)
   ─────────────────────────────────────────────────────────────────────── */
.nmmb-sheet {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: end stretch;
    pointer-events: none;
}
.nmmb-sheet[data-open="true"] { pointer-events: auto; }

.nmmb-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 36, 26, .55);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .35s var(--nmmb-ease);
}
.nmmb-sheet[data-open="true"] .nmmb-sheet__backdrop { opacity: 1; }

.nmmb-sheet__panel {
    position: relative;
    width: min(900px, 100%);
    margin-inline: auto;
    max-height: 92vh;
    background: var(--nmmb-paper-soft);
    color: var(--nmmb-ink);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, .35);
    transform: translateY(100%);
    transition: transform .45s var(--nmmb-ease);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.nmmb-sheet[data-open="true"] .nmmb-sheet__panel { transform: none; }

.nmmb-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem .25rem;
    flex-shrink: 0;
}
.nmmb-sheet__handle {
    width: 50px;
    height: 5px;
    background: color-mix(in srgb, var(--nmmb-ink) 18%, transparent);
    border-radius: 99px;
    margin-inline: auto;
}
.nmmb-sheet__close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: var(--nmmb-ink);
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s;
}
.nmmb-sheet__close:hover {
    background: color-mix(in srgb, var(--nmmb-ink) 8%, transparent);
}

.nmmb-sheet__body {
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 3rem) 3rem;
    overflow-y: auto;
}

/* Legal-Wrapper innerhalb der Sheet bekommt eigene Padding-Defaults */
.nmmb-sheet__body .nmmb-sheet-content {
    padding: 0;
    max-width: 68ch;
    margin-inline: auto;
}