/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

/* Self-hosted variable fonts (DSGVO-konform, keine externen CDN-Calls) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../../files/themes/bni/fonts/inter-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../../files/themes/bni/fonts/space-grotesk-wght.woff2") format("woff2");
}

/* =================================================================
   Unternehmer Donau-Ries – Theme (Revision: editorial/modern)
   Hauptmarke UDR, BNI als Co-Brand. Leitmotiv: Fünfeck/Landkreis.
   ================================================================= */

:root {
  --red: #C8102E;
  --red-dark: #A60D26;
  --ink: #15171A;
  --ink-600: #4A4F57;
  --paper: #ffffff;
  --bone: #F6F4F1;
  --mist: #ECEEF0;
  --ink-fill: #1C1F24;
  --line: #e6e3df;

  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1240px;
  --container-wide: 1480px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --s-3xs:.5rem; --s-2xs:.75rem; --s-xs:1rem; --s-s:1.5rem; --s-m:2rem; --s-l:3rem; --s-xl:4.5rem; --s-2xl:6.5rem;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 12px 40px -16px rgba(21,23,26,.18);
  --shadow-hover: 0 20px 50px -18px rgba(21,23,26,.28);
  --header-h: 84px;

  /* Fünfeck-Marker (rot) als Leitmotiv-Bullet */
  --pentagon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 22 9.6 18.2 21.5 5.8 21.5 2 9.6Z' fill='%23C8102E'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font-family: var(--sans); font-size: clamp(1rem, 1.05vw, 1.125rem); line-height: 1.65; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .5em; color: var(--ink); }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-bottom: .5em; }
.content-headline + .content-text, .content-headline + .ce_text { margin-top: .9rem; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; }
h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.25; }
h4 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 600; }

/* ---------- Container & Sections (Hintergrund full-bleed, Inhalt zentriert) ---------- */
.mod_article { width: 100%; }
.section { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; overflow: hidden; }
.section > * { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); position: relative; z-index: 1; }
.section--paper { background: var(--paper); }
.section--bone { background: var(--bone); }
.section--mist { background: var(--mist); }
.section--white { background: var(--paper); }
.section--ink { background: var(--ink-fill); color: #eef0f2; }

/* Dekorative Leitmotiv-Akzente auf hellen Sektionen (hinter dem Inhalt) */
.section--paper::before, .section--bone::before, .section--white::before {
  content: ""; position: absolute; z-index: 0; right: -130px; top: -100px;
  width: 520px; height: 500px; pointer-events: none; opacity: .1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96'%3E%3Cpath d='M50 3 95 36 78 91 22 91 5 36Z' fill='none' stroke='%23C8102E' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--paper::after, .section--bone::after, .section--white::after {
  content: ""; position: absolute; z-index: 0; left: -200px; bottom: -200px;
  width: 540px; height: 540px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(200,16,46,.11), transparent 68%);
}
/* abwechselnde Position für Rhythmus */
.section--bone::before { right: auto; left: -140px; top: auto; bottom: -120px; opacity: .08; }
.section--bone::after { left: auto; right: -200px; top: -200px; bottom: auto; }
/* dezenter heller Akzent auf dunklen Bändern */
.section--ink::after {
  content: ""; position: absolute; z-index: 0; right: -160px; top: -160px;
  width: 520px; height: 500px; pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96'%3E%3Cpath d='M50 3 95 36 78 91 22 91 5 36Z' fill='none' stroke='%23ff5d72' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }

.section-lead, p.section-lead { font-family: var(--sans); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.55; color: var(--ink-600); max-width: 40rem; }
.section--ink .section-lead { color: rgba(255,255,255,.82); }

/* Eyebrow mit Fünfeck-Marker */
.section-eyebrow, p.section-eyebrow, .content-text .section-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); margin: 0 0 .9rem;
}
.section-eyebrow::before { content: ""; width: .8rem; height: .8rem; background: var(--pentagon) center/contain no-repeat; flex: none; }
.section--ink .section-eyebrow { color: #ff5d72; }
/* Eyebrow als direktes Section-Kind: block-level, damit max-width/margin:auto (Container-Wrapper) greift –
   sonst klebt das inline-flex-Element am Viewport-Rand statt bündig zur Headline. */
.section > .section-eyebrow, .section > p.section-eyebrow { display: flex; margin-inline: auto; }

/* roter Akzentstrich unter H2 */
.accent-line::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--red); margin-top: 1rem; }

/* zentrierte Intro-Sektionen */
.section.center > .content-headline, .section.center > .content-text, .section.center > .ce_html { text-align: center; }
.section.center .section-eyebrow { justify-content: center; }
.section.center > .content-text { margin-inline: auto; }
.section.center .accent-line::after { margin-inline: auto; }
.section.center .btn-row { justify-content: center; }

/* mehr Luft in der Mitte bei Bild-Zweispaltern */
.split > .grid_start, .hero-grid > .grid_start { grid-gap: clamp(2.5rem, 5vw, 4.5rem); }

/* content-text bleibt container-breit + zentriert (wie H1); Lesebreite links im .rte */
.content-text .rte { max-width: 40rem; }
.section.center .content-text .rte { margin-inline: auto; }
.content-text a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.content-text ul { list-style: none; padding: 0; }
.content-text ul li { position: relative; padding-left: 1.6rem; margin-bottom: .6rem; }
.content-text ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: .7rem; height: .7rem; background: var(--pentagon) center/contain no-repeat; }
blockquote { margin: 1.5rem 0; padding: .5rem 0 .5rem 1.5rem; border-left: 3px solid var(--red); font-family: var(--display); font-weight: 360; font-size: 1.4rem; font-style: italic; line-height: 1.3; }

.rounded-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.rounded-img img { width: 100%; }

/* ---------- Buttons ---------- */
.btn, .btn--ghost { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; padding: .9rem 1.7rem; border-radius: var(--radius); min-height: 50px; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s, color .15s, border-color .15s; border: 1.5px solid transparent; }
.btn { background: var(--red); color: #fff; }
.btn:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.section--ink .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.section--ink .btn--ghost:hover { border-color: #fff; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* =================================================================
   HEADER + Co-Branding
   ================================================================= */
#header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.93); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line); }
#header .inside { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: var(--header-h); }
.brand-lockup { display: flex; align-items: center; gap: .9rem; }
.brand-lockup .header-logo img { height: 46px; width: auto; display: block; object-fit: contain; }
.cobrand { display: flex; flex-direction: column; line-height: 1.1; padding-left: .9rem; border-left: 1px solid var(--line); }
.cobrand__label { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-600); }
.cobrand img { height: 22px; width: auto; margin-top: 3px; opacity: .85; filter: grayscale(1); object-fit: contain; }
#header .nav-cta { margin-left: auto; }

#header nav.mod_navigation { margin-left: auto; }
#header nav.mod_navigation ul { list-style: none; display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; }
#header nav.mod_navigation a, #header nav.mod_navigation strong.active { display: block; padding: .55rem .8rem; font-weight: 500; font-size: .98rem; border-radius: 8px; color: var(--ink); position: relative; }
#header nav.mod_navigation a:hover, #header nav.mod_navigation a.active, #header nav.mod_navigation a.trail, #header nav.mod_navigation strong.active { color: var(--red); }
#header nav.mod_navigation strong.active { font-weight: 600; }
#header nav.mod_navigation a.active::after, #header nav.mod_navigation a.trail::after, #header nav.mod_navigation strong.active::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .25rem; height: 2px; background: var(--red); border-radius: 2px; }
#header nav.mod_navigation li { position: relative; }
#header nav.mod_navigation ul.level_2 { position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: .4rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: none; flex-direction: column; z-index: 120; }
#header nav.mod_navigation li:hover > ul.level_2, #header nav.mod_navigation li:focus-within > ul.level_2 { display: flex; }
#header nav.mod_navigation ul.level_2 a { white-space: nowrap; padding: .6rem .8rem; }
#header nav.mod_navigation li.submenu > a::after { content: ""; display: inline-block; margin-left: .35rem; width: .38em; height: .38em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); }

.nav-toggle, .nav-close { display: none; background: none; border: 0; color: var(--ink); cursor: pointer; padding: .4rem; }

@media (max-width: 991px) {
  /* backdrop-filter macht #header zum Containing-Block für position:fixed-Kinder –
     dadurch würde das Off-Canvas-Menü relativ zum schmalen Header statt zum Viewport sitzen.
     Auf Mobile daher solider Header ohne backdrop-filter. */
  #header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  #header nav.mod_navigation { margin-left: 0; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-close { display: inline-flex; position: absolute; top: 1rem; right: 1.2rem; }
  #header nav.mod_navigation { position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px); background: #fff; transform: translateX(100%); transition: transform .28s ease; box-shadow: -8px 0 30px rgba(0,0,0,.18); padding: 4.5rem 1.5rem 2rem; z-index: 200; overflow-y: auto; }
  body.nav-open #header nav.mod_navigation { transform: translateX(0); }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; }
  #header nav.mod_navigation ul { flex-direction: column; align-items: stretch; gap: .15rem; }
  #header nav.mod_navigation a, #header nav.mod_navigation strong.active { padding: .85rem 1rem; font-size: 1.1rem; }
  #header nav.mod_navigation a.active::after, #header nav.mod_navigation a.trail::after, #header nav.mod_navigation strong.active::after { display: none; }
  #header nav.mod_navigation ul.level_2 { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0; }
  #header nav.mod_navigation li.submenu > a::after { display: none; }
}

/* =================================================================
   Fünfeck-Rahmen-Klammer (Leitmotiv für Schlüsselbilder)
   ================================================================= */
.framed { position: relative; }
.framed > .rounded-img, .framed .content-image { position: relative; z-index: 1; }
.framed::before {
  content: ""; position: absolute; z-index: 0; right: -18px; bottom: -18px; width: 62%; height: 62%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96' preserveAspectRatio='none'%3E%3Cpath d='M50 3 95 36 78 91 22 91 5 36Z' fill='none' stroke='%23C8102E' stroke-width='2'/%3E%3C/svg%3E") right bottom/contain no-repeat;
  pointer-events: none;
}

/* =================================================================
   HERO (55/45 asymmetrisch)
   ================================================================= */
#hero { background: var(--paper); padding-block: clamp(3rem, 6vw, 5.5rem); }
.hero-lead { font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--ink-600); max-width: 34rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.hero-trust .stat__num { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.hero-trust .stat__label { font-size: .85rem; }

/* =================================================================
   STATS (auf dunklem Band)
   ================================================================= */
.stat { text-align: center; }
.stat__num { font-family: var(--display); font-weight: 380; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: #fff; letter-spacing: -.02em; white-space: nowrap; }
/* Geldbetrag (mit €) kompakter, damit das € nicht umbricht */
.stat__num--money { font-size: clamp(1.7rem, 3.2vw, 2.8rem); }
.hero-trust .stat__num--money { font-size: clamp(1.3rem, 2vw, 1.7rem); }
.nowrap { white-space: nowrap; }
.stat__num em { color: var(--red); font-style: normal; }
.stat__label { display: block; margin-top: .6rem; font-size: .98rem; color: rgba(255,255,255,.78); }
.section--paper .stat__num { color: var(--ink); }
.section--paper .stat__label { color: var(--ink-600); }

/* =================================================================
   VIDEO
   ================================================================= */
.hero-video, .video-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: #000; }
.hero-video video, .video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Hero-Video ist hochkant (9:16) – prominent rechts, mobil zentriert gestapelt */
.hero-video { aspect-ratio: 9/16; max-width: 440px; margin-inline: auto 0; }
.video-frame { aspect-ratio: 9/16; max-width: 440px; margin-inline: auto; }
@media (max-width: 991px) { .hero-video { margin-inline: auto; } }

/* =================================================================
   Karten (Nutzen / Schritte)
   ================================================================= */
.nutzen-card, .step-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem,2.5vw,2.2rem); height: 100%; transition: transform .18s, box-shadow .18s; }
.nutzen-card:hover, .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.section--bone .nutzen-card, .section--bone .step-card { background: #fff; }
.nutzen-card h3, .step-card h3 { display: flex; align-items: center; gap: .6rem; }
.nutzen-card .bi { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(200,16,46,.09); color: var(--red); font-size: 1.5rem; }
/* versetzte Schritt-Karten (Desktop) */
.step-grid > .cp_column:nth-child(even) .step-card, .step-grid .cp_column:nth-child(2n) { }
.step-num { font-family: var(--display); font-size: 2.2rem; color: var(--red); line-height: 1; display: block; margin-bottom: .4rem; }

/* =================================================================
   MITGLIEDER (Logo-Karten + Filter)
   ================================================================= */
.bni-members { max-width: var(--container); margin-inline: auto; }
.bni-intro { margin-bottom: 2.5rem; max-width: 46rem; }
.bni-intro h1 { margin: .3rem 0 .6rem; }
.bni-members__bar { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 2rem; }
.bni-members__count { margin: 0; color: var(--ink-600); }
.bni-members__count strong { color: var(--ink); }
.bni-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bni-chip { border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: .9rem; padding: .55rem 1.05rem; border-radius: 999px; cursor: pointer; min-height: 44px; transition: all .15s; }
.bni-chip:hover { border-color: var(--red); color: var(--red); }
.bni-chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }

.bni-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); }
.bni-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .18s, box-shadow .18s; height: 100%; }
.bni-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.bni-card[hidden] { display: none !important; }
/* Logo-Box: feste, einheitliche Höhe. Logo wird eingepasst (contain), nie beschnitten;
   zu hohe Logos werden über die einheitliche Max-Höhe (und damit proportional in der Breite) begrenzt. */
.bni-card__photo { height: 150px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--line); }
.bni-card__photo img { max-width: 100%; max-height: 84px; width: auto; height: auto; object-fit: contain; transition: transform .25s; }
.bni-card:hover .bni-card__photo img { transform: scale(1.04); }
.bni-card__initial { font-family: var(--display); font-size: 2.8rem; font-weight: 400; color: #d8d8d8; }
.bni-card__body { padding: 1.2rem 1.3rem 1.4rem; flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.bni-card__branche { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.bni-card__firma { margin: 0; font-size: 1.18rem; }
.bni-card__person { color: var(--ink-600); font-size: .92rem; }
.bni-card__arrow { padding: 0 1.3rem 1.2rem; color: var(--red); opacity: 0; transform: translateX(-4px); transition: all .18s; }
.bni-card:hover .bni-card__arrow { opacity: 1; transform: translateX(0); }
.bni-members__empty { text-align: center; color: var(--ink-600); padding: 2rem 0; }

/* Mitglieder-Detail */
.bni-detail { max-width: 880px; margin-inline: auto; }
.bni-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--red); font-weight: 600; margin-bottom: 1.8rem; }
.bni-detail__head { display: flex; gap: 1.8rem; align-items: center; flex-wrap: wrap; }
.bni-detail__photo { width: 200px; height: 130px; flex: none; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.bni-detail__photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bni-detail__initial { font-family: var(--display); font-size: 3.5rem; color: #d8d8d8; }
.bni-detail__branche { font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--red); }
.bni-detail__firma { margin: .3rem 0 .2rem; font-size: clamp(1.8rem,3vw,2.6rem); }
.bni-detail__person { color: var(--ink-600); margin: 0; }
.bni-detail__text { margin: 1.8rem 0; max-width: 40rem; }
.bni-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.8rem 0; }
.bni-detail__item { background: var(--bone); border-radius: var(--radius); padding: 1rem 1.2rem; }
.bni-detail__label { display: block; font-size: .85rem; color: var(--ink-600); margin-bottom: .25rem; }
.bni-detail__value { font-weight: 600; color: var(--ink); }
.bni-detail__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* =================================================================
   TERMINE
   ================================================================= */
.termin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
/* Termin-Liste: einzeilig, übersichtlich, blätterbar */
.mod_eventlist { display: block; border-top: 1px solid var(--line); }
.mod_eventlist .header { display: none; } /* keine Tages-Zwischenüberschriften */
.termin-ort { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem auto 2.5rem; }
.termin-ort .bni-detail__item { flex: 1 1 240px; margin: 0; }
.termin__meta { margin: .2rem 0 0; color: var(--ink-600); font-size: .92rem; }
.termin { display: flex; gap: 1.2rem; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .18s, box-shadow .18s; }
.termin:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.termin__date { flex: none; width: 96px; background: var(--ink-fill); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem .5rem; }
.termin__date .d { font-family: var(--display); font-size: 2.2rem; line-height: 1; }
.termin__date .m { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .25rem; opacity: .85; }
.termin--highlight .termin__date { background: var(--red); }
.termin__body { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; }
.termin__tag { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--red); margin-bottom: .25rem; }
.termin__body h3 { margin: 0; font-size: 1.12rem; }
.termin__body p { margin: .2rem 0 0; color: var(--ink-600); font-size: .92rem; }
.termin-note { color: var(--ink-600); font-size: .95rem; margin-top: 1rem; }
@media (max-width: 700px) { .termin-grid { grid-template-columns: 1fr; } }

/* kompakte Jahres-Terminliste (Monatsgruppen) – Desktop zweispaltig */
.termin-list { max-width: 100%; }
@media (min-width: 760px) {
  .termin-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; align-items: start; }
  .termin-list .termin-month:nth-child(-n+2) { margin-top: 0; }
}
.termin-month { margin-top: 2.2rem; }
.termin-month > h3 { font-family: var(--display); font-size: 1.15rem; color: var(--red); margin: 0 0 .4rem; padding-bottom: .45rem; border-bottom: 2px solid var(--line); }
.termin-row { display: flex; align-items: center; gap: 1rem; padding: .85rem .6rem; border-bottom: 1px solid var(--line); transition: background .15s; }
.termin-row:hover { background: var(--bone); }
.termin-row__date { flex: none; width: 96px; font-family: var(--display); font-weight: 700; color: var(--ink); }
.termin-row__title { flex: 1; font-weight: 500; }
.termin-row__time { color: var(--ink-600); font-weight: 400; font-size: .92em; }
.termin-row__tag { flex: none; margin-left: auto; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-600); background: var(--mist); padding: .2rem .6rem; border-radius: 999px; }
.termin-row--hl { background: rgba(200,16,46,.05); }
.termin-row--link { text-decoration: none; color: inherit; cursor: pointer; }
.termin-row--link:hover { background: var(--bone); }
.termin-row--hl.termin-row--link:hover { background: rgba(200,16,46,.1); }
.termin-row__cta { flex: none; color: var(--red); font-weight: 600; font-size: .82rem; white-space: nowrap; opacity: .55; transition: opacity .15s; }
.termin-row--link:hover .termin-row__cta { opacity: 1; }
.termin-row--hl .termin-row__date { color: var(--red); }
.termin-row--hl .termin-row__tag { background: var(--red); color: #fff; }
@media (max-width: 560px) { .termin-row { flex-wrap: wrap; gap: .3rem .8rem; } .termin-row__title { flex-basis: 100%; order: 3; } .termin-row__tag { margin-left: 0; order: 2; } }
/* Blättern (Pagination) */
.mod_eventlist .pagination { margin-top: 1.8rem; }
.mod_eventlist .pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; justify-content: center; }
.mod_eventlist .pagination li a, .mod_eventlist .pagination li strong { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 42px; padding: 0 .6rem; border: 1.5px solid var(--line); border-radius: var(--radius); font-weight: 600; }
.mod_eventlist .pagination li a:hover { border-color: var(--red); color: var(--red); }
.mod_eventlist .pagination li strong { background: var(--red); border-color: var(--red); color: #fff; }

/* =================================================================
   FAQ
   ================================================================= */
.pm-faq { max-width: 820px; }
.pm-faq__item { border-bottom: 1px solid var(--line); }
.pm-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: 1.2rem 0; font-weight: 600; font-size: 1.12rem; list-style: none; }
.pm-faq__question::-webkit-details-marker { display: none; }
.pm-faq__icon { color: var(--red); transition: transform .2s; flex: none; }
.pm-faq__item[open] .pm-faq__question { color: var(--red); }
.pm-faq__item[open] .pm-faq__icon { transform: rotate(180deg); }
.pm-faq__answer { padding: 0 0 1.3rem; color: var(--ink-600); }

/* =================================================================
   FORMULAR
   ================================================================= */
.invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ce_form, .content-form { max-width: 640px; }
.widget { margin-bottom: 1.1rem; }
.widget label { display: block; font-weight: 600; margin-bottom: .4rem; }
.widget input[type=text], .widget input[type=email], .widget input[type=tel], .widget textarea { width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); font: inherit; min-height: 50px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.widget textarea { min-height: 150px; resize: vertical; }
.widget select { width: 100%; padding: .85rem 2.8rem .85rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); font: inherit; min-height: 50px; background-color: #fff; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .15s, box-shadow .15s; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4F57' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; }
.widget input:focus, .widget textarea:focus, .widget select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(200,16,46,.12); }
.widget select:hover { border-color: var(--ink-600); }
/* Checkbox: Label rechts neben der Box (Contao rendert fieldset.checkbox_container > span > input+label) */
.checkbox_container { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.checkbox_container > legend { display: none; } /* "Datenschutz*"-Legende ausblenden – Platz sparen, Label genügt */
.checkbox_container > span { display: flex; align-items: flex-start; gap: .6rem; }
.checkbox_container input.checkbox { flex: none; margin-top: .3rem; width: auto; min-height: 0; }
.checkbox_container label { display: inline; font-weight: 400; margin: 0; }
.widget-submit button { background: var(--red); color: #fff; border: 0; padding: .95rem 2rem; border-radius: var(--radius); font-weight: 600; font-size: 1rem; min-height: 52px; cursor: pointer; transition: background .15s, transform .15s; }
.widget-submit button:hover { background: var(--red-dark); transform: translateY(-2px); }
.confirmation, .contact-form__success { background: #eafaf0; border: 1px solid #b7e6c9; color: #1c7a43; padding: 1rem 1.2rem; border-radius: var(--radius); }

/* =================================================================
   CTA-Band (dunkel, mit Bild-Overlay)
   ================================================================= */
.cta-band { position: relative; }
.cta-text { align-self: center; }

/* Kontaktformular in hellgrauer Karte */
.form-card { background: #f7f7f8; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); }
.form-card .widget input, .form-card .widget textarea { background: #fff; }

/* =================================================================
   FOOTER
   ================================================================= */
#footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: 4rem 1.5rem; }
#footer .inside { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
#footer h4 { color: #fff; margin-bottom: .9rem; }
#footer a { color: rgba(255,255,255,.72); }
#footer a:hover { color: #fff; }
.footer-logo img { height: 50px; width: auto; margin-bottom: 1.1rem; }
.footer-cobrand { display: inline-flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .8rem; color: rgba(255,255,255,.6); }
.footer-cobrand img { height: 24px; filter: grayscale(1) brightness(1.6); opacity: .8; }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { margin-bottom: .55rem; display: flex; gap: .5rem; padding-left: 0; }
.footer-contact li::before { content: none !important; display: none !important; }
#footer .mod_customnav ul { list-style: none; padding: 0; margin: 0; }
#footer .mod_customnav a { display: block; padding: .25rem 0; }
.footer-bottom { max-width: none; width: 100%; border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 991px) {
  .bni-grid { grid-template-columns: repeat(2, 1fr); }
  .framed::before { display: none; }
  .cobrand { display: none; }
}
@media (max-width: 600px) {
  .bni-grid { grid-template-columns: 1fr; }
  .bni-members__bar { flex-direction: column; align-items: flex-start; }
  .bni-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
  .bni-chip { flex: none; }
  .footer-bottom { flex-direction: column; }
  .hero-trust { gap: 1rem; }
}

/* =================================================================
   Reduced Motion (Cookiebar-sicher)
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .contao-cookiebar.cc-active:not(.cc-saved) .cc-inner { transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .contao-cookiebar.cc-saved .cc-inner { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}