/* BGNU Bewerbungstool — minimal plain CSS (Tailwind-Build kommt in späterer Iteration). */
[x-cloak] { display: none !important; }

/* ===== Plugin-scoped Button-Reset =====
   Hello-Elementor + Elementor Pro rendern native <button>-Elemente mit
   pinkem/rotem Akzent. Wir resetten alle Buttons innerhalb der Plugin-
   Container auf neutrale Werte; spezifischere bgnu-Klassen darunter
   setzen dann die Endfarben. */
.bgnu-form button,
.bgnu-widerruf button,
.bgnu-portal button,
.bgnu-chat button,
.bgnu-demo button,
.bgnu-lightbox button {
    background-color: transparent;
    color: inherit;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: none;
}
.bgnu-form button:hover,
.bgnu-widerruf button:hover,
.bgnu-portal button:hover,
.bgnu-chat button:hover,
.bgnu-demo button:hover,
.bgnu-lightbox button:hover {
    color: inherit;
}
.bgnu-form input[type="submit"],
.bgnu-form input[type="reset"],
.bgnu-form input[type="button"] {
    background-color: transparent;
    color: inherit;
    border: 1px solid transparent;
}

/* === Demo-Panel (Flyover links, nur für Kundenpräsentation) === */
.bgnu-demo {
    position: fixed;
    top: 20%;
    left: 0;
    z-index: 9998;
    display: flex;
    align-items: stretch;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.4;
    pointer-events: none; /* Handle + Body setzen pointer-events auf auto */
}
.bgnu-demo .bgnu-demo__handle {
    pointer-events: auto;
    background-color: #0a2540;
    color: #fff;
    border: 1px solid #0a2540;
    padding: 1.25rem 0.6rem;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.25);
    transition: background-color 0.15s;
    align-self: flex-start;
}
.bgnu-demo .bgnu-demo__handle:hover { background-color: #11345c; border-color: #11345c; color: #fff; }
.bgnu-demo__handle-icon { writing-mode: horizontal-tb; transform: rotate(180deg); font-size: 1.1rem; }
.bgnu-demo--open .bgnu-demo__handle { border-radius: 0; }

.bgnu-demo__body {
    pointer-events: auto;
    width: 320px;
    max-height: 80vh;
    overflow-y: auto;
    background: #0f2a47;
    color: #e7eef7;
    padding: 1.25rem;
    box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.4);
    border-radius: 0 8px 8px 0;
    margin-left: -1px;
}
.bgnu-demo__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.bgnu-demo__head strong { font-size: 1.05rem; }
.bgnu-demo .bgnu-demo__close {
    background-color: transparent;
    border: 1px solid transparent;
    color: #a9c2db;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
}
.bgnu-demo .bgnu-demo__close:hover { color: #fff; background-color: rgba(255,255,255,0.08); border-color: transparent; }
.bgnu-demo__note { font-size: 0.8rem; color: #a9c2db; margin: 0 0 1rem; }

.bgnu-demo__group {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 0.75rem 0.85rem;
    margin-bottom: 0.75rem;
}
.bgnu-demo__group-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8fb0cc;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.bgnu-demo__toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    cursor: pointer;
    user-select: none;
}
.bgnu-demo__toggle + .bgnu-demo__toggle { border-top: 1px solid rgba(255,255,255,0.06); }
.bgnu-demo__toggle input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.bgnu-demo__switch {
    flex-shrink: 0;
    width: 34px;
    height: 20px;
    background: #3a5b7f;
    border-radius: 999px;
    position: relative;
    transition: background-color 0.2s;
}
.bgnu-demo__switch::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.bgnu-demo__toggle input:checked + .bgnu-demo__switch { background: var(--bgnu-primary); }
.bgnu-demo__toggle input:checked + .bgnu-demo__switch::after { transform: translateX(14px); }
.bgnu-demo__toggle-text { display: flex; flex-direction: column; font-size: 0.88rem; }
.bgnu-demo__toggle-text strong { color: #fff; font-weight: 500; }
.bgnu-demo__toggle-text small { color: #a9c2db; font-size: 0.75rem; margin-top: 0.05rem; }

.bgnu-demo__info p { margin: 0 0 0.6rem; font-size: 0.85rem; }
.bgnu-demo__info p:last-child { margin-bottom: 0; }
.bgnu-demo__info strong { color: #fff; }
.bgnu-demo__info small { color: #a9c2db; font-size: 0.78rem; }
.bgnu-demo__info a { color: var(--bgnu-primary); text-decoration: underline; }

.bgnu-demo__actions { margin-top: 0.75rem; }
.bgnu-demo .bgnu-demo__reset {
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: #e7eef7;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s, border-color 0.15s;
}
.bgnu-demo .bgnu-demo__reset:hover { background-color: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); color: #fff; }

@media (max-width: 960px) {
    .bgnu-demo__body { width: 280px; max-height: 70vh; }
}
@media (max-width: 640px) {
    .bgnu-demo { top: auto; bottom: 0.5rem; }
    .bgnu-demo__body { width: calc(100vw - 3rem); max-height: 60vh; }
}

/* Feature-Hide-Klassen (gesteuert vom Demo-Panel) */
.bgnu-form--hide-lang  .bgnu-form__lang-bar { display: none !important; }
.bgnu-form--hide-logo  .bgnu-form__logo { display: none !important; }
.bgnu-form--hide-logo  .bgnu-form__header { border-bottom-color: #e0e0e0; }

:root {
    --bgnu-primary:        #1EA6E0; /* Logo-Blau (Akzent) */
    --bgnu-primary-dark:   #005b8f; /* Dunkelblau (Buttons, H-Tags) */
    --bgnu-primary-darker: #004a75; /* Hover-Zustand */
    --bgnu-primary-soft:   #e8f4fb; /* Hellblau-Hintergrund */
    --bgnu-primary-soft-b: #c8ddeb; /* Hellblau-Rand */
}

.bgnu-form { max-width: 1140px; margin: 2rem auto; padding: 0 1rem; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1a1a; line-height: 1.5; box-sizing: border-box; }

.bgnu-form__header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--bgnu-primary); }
.bgnu-form__logo { flex: 0 0 auto; }
.bgnu-form__logo img { display: block; height: 64px; width: auto; }
.bgnu-form__header-text { flex: 1 1 auto; min-width: 0; }
.bgnu-form__title { font-size: 1.65rem; margin: 0 0 0.35rem; color: var(--bgnu-primary-dark); }
.bgnu-form__subtitle { font-size: 0.95rem; color: #444; margin: 0; }
@media (max-width: 640px) {
    .bgnu-form__header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .bgnu-form__logo img { height: 48px; }
    .bgnu-form__title { font-size: 1.35rem; }
}
.bgnu-form__lang-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.85rem; color: #555; }
.bgnu-form__lang-label { font-weight: 500; }
.bgnu-form__lang-select { width: auto; min-width: 110px; max-width: 160px; padding: 0.3rem 1.75rem 0.3rem 0.6rem; border: 1px solid #bdbdbd; border-radius: 4px; font-size: 0.85rem; background: #fff; font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23555' d='M6 8 0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 0.55rem center; }

/* Stepper: kompakt als Nummern-Kreise, aktiver + gehoverter Schritt klappt den Text auf */
.bgnu-form__stepper { margin: 1.5rem 0; }
.bgnu-form__steps { list-style: none; padding: 0; margin: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.bgnu-form__step { flex: 0 0 auto; padding: 0.35rem 0.5rem; border-radius: 999px; background: #f0f3f5; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: #4a4a4a; transition: background-color 0.2s, color 0.2s; cursor: default; }
.bgnu-form__step-num { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #b0bec5; color: #fff; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; flex-shrink: 0; transition: background-color 0.2s; }
.bgnu-form__step-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.3s ease, opacity 0.2s ease, margin 0.3s ease, padding 0.3s ease; padding: 0; margin: 0; }
.bgnu-form__step:hover,
.bgnu-form__step--active { background: #e6f0f7; color: var(--bgnu-primary-dark); }
.bgnu-form__step:hover .bgnu-form__step-label,
.bgnu-form__step--active .bgnu-form__step-label { max-width: 240px; opacity: 1; padding-right: 0.35rem; }
.bgnu-form__step--active { font-weight: 600; background: #d4ecf7; }
.bgnu-form__step--active .bgnu-form__step-num { background: var(--bgnu-primary-dark); }
.bgnu-form__step--done { color: var(--bgnu-primary-dark); }
.bgnu-form__step--done .bgnu-form__step-num { background: var(--bgnu-primary); }

.bgnu-form__section { padding: 1.5rem; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; }
.bgnu-form__section-title { margin-top: 0; font-size: 1.25rem; }

.bgnu-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.25rem; }
@media (max-width: 960px) { .bgnu-form__grid { grid-template-columns: repeat(2, 1fr); } }
.bgnu-field { display: flex; flex-direction: column; }
.bgnu-field--full { grid-column: 1 / -1; }
.bgnu-field label { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.25rem; }
.bgnu-field input, .bgnu-field select, .bgnu-field textarea { padding: 0.5rem 0.75rem; border: 1px solid #bdbdbd; border-radius: 4px; font-size: 1rem; font-family: inherit; background: #fff; }
.bgnu-field input:focus, .bgnu-field select:focus, .bgnu-field textarea:focus { outline: 2px solid #005b8f; outline-offset: 1px; border-color: #005b8f; }
.bgnu-field__row { display: flex; gap: 0.5rem; }
.bgnu-field__row > input { flex: 1; }
.bgnu-field__small { flex: 0 0 80px !important; }
.bgnu-field__error { color: #b00020; font-size: 0.85rem; margin: 0.25rem 0 0; }
.bgnu-field__hint  { color: #555; font-size: 0.82rem; margin: 0.25rem 0 0; }
.bgnu-field input[aria-invalid="true"] { border-color: #b00020; }

.bgnu-fieldset { border: 1px solid #d0d0d0; border-radius: 4px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.bgnu-fieldset legend { padding: 0 0.5rem; font-weight: 500; }
.bgnu-fieldset legend small { font-weight: 400; color: #666; }

.bgnu-radio-group, .bgnu-checkbox-group { display: flex; gap: 0.75rem 1.25rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.bgnu-radio-group label, .bgnu-checkbox-group label { font-weight: normal; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.bgnu-checkbox-single { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: normal !important; cursor: pointer; }
.bgnu-checkbox-single input { margin-top: 0.25rem; }

.bgnu-form__honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bgnu-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.bgnu-form__nav { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; }
/* Button-Basis (Spezifität erhöht, damit Theme-CSS — z. B. Elementor — nicht überschreibt) */
.bgnu-form .bgnu-btn,
.bgnu-widerruf .bgnu-btn,
.bgnu-portal .bgnu-btn { padding: 0.625rem 1.25rem; border-radius: 4px; font-size: 1rem; font-weight: 500; cursor: pointer; border: 1px solid transparent; font-family: inherit; line-height: 1.2; text-decoration: none; display: inline-block; }
.bgnu-form .bgnu-btn:disabled,
.bgnu-widerruf .bgnu-btn:disabled,
.bgnu-portal .bgnu-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.bgnu-form .bgnu-btn--primary,
.bgnu-widerruf .bgnu-btn--primary,
.bgnu-portal .bgnu-btn--primary { background-color: var(--bgnu-primary-dark); color: #fff; border-color: var(--bgnu-primary-dark); }
.bgnu-form .bgnu-btn--primary:hover:not(:disabled),
.bgnu-widerruf .bgnu-btn--primary:hover:not(:disabled),
.bgnu-portal .bgnu-btn--primary:hover:not(:disabled) { background-color: var(--bgnu-primary-darker); color: #fff; border-color: var(--bgnu-primary-darker); }
.bgnu-form .bgnu-btn--secondary,
.bgnu-widerruf .bgnu-btn--secondary,
.bgnu-portal .bgnu-btn--secondary { background-color: #fff; color: var(--bgnu-primary-dark); border-color: var(--bgnu-primary-dark); }
.bgnu-form .bgnu-btn--secondary:hover:not(:disabled),
.bgnu-widerruf .bgnu-btn--secondary:hover:not(:disabled),
.bgnu-portal .bgnu-btn--secondary:hover:not(:disabled) { background-color: var(--bgnu-primary-soft); color: var(--bgnu-primary-dark); }
.bgnu-form .bgnu-btn--ghost,
.bgnu-widerruf .bgnu-btn--ghost,
.bgnu-portal .bgnu-btn--ghost { background-color: transparent; color: #b00020; border-color: transparent; padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.bgnu-form .bgnu-btn--ghost:hover,
.bgnu-widerruf .bgnu-btn--ghost:hover,
.bgnu-portal .bgnu-btn--ghost:hover { text-decoration: underline; }
.bgnu-form .bgnu-btn--danger,
.bgnu-widerruf .bgnu-btn--danger,
.bgnu-portal .bgnu-btn--danger { background-color: #b00020; color: #fff; border-color: #b00020; }
.bgnu-form .bgnu-btn--danger:hover:not(:disabled),
.bgnu-widerruf .bgnu-btn--danger:hover:not(:disabled),
.bgnu-portal .bgnu-btn--danger:hover:not(:disabled) { background-color: #8c001a; color: #fff; border-color: #8c001a; }

.bgnu-form__status { margin-top: 1rem; padding: 0.75rem 1rem; background: #eef5fb; border-radius: 4px; font-size: 0.95rem; }

.bgnu-haushalt__person { border: 1px dashed #bfbfbf; border-radius: 4px; padding: 1rem; margin: 0.75rem 0; background: #fafafa; }
.bgnu-haushalt__head   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }

.bgnu-summary { background: #fafafa; border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.bgnu-summary h4 { margin: 1rem 0 0.5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: #444; }
.bgnu-summary h4:first-child { margin-top: 0; }
.bgnu-summary dl { display: grid; grid-template-columns: 180px 1fr; gap: 0.35rem 1rem; margin: 0; font-size: 0.9rem; }
.bgnu-summary dt { color: #555; }
.bgnu-summary dd { margin: 0; }

.bgnu-widerruf,
.bgnu-portal { max-width: 1140px; margin: 2rem auto; padding: 1.5rem; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1a1a; line-height: 1.55; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; box-sizing: border-box; }
.bgnu-widerruf h2,
.bgnu-portal h2 { margin-top: 0; }
.bgnu-widerruf__form { margin-top: 1rem; }
.bgnu-widerruf__done,
.bgnu-portal__done { background: #e8f4fb; padding: 1rem; border-radius: 4px; border-left: 4px solid #0e86b8; }
.bgnu-widerruf__done h3,
.bgnu-portal__done h3 { margin-top: 0; color: #005b8f; }

.bgnu-portal__login { max-width: 520px; margin: 1rem auto; }
.bgnu-portal__login label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
.bgnu-portal__login input[type="email"] { width: 100%; padding: 0.6rem 0.8rem; font-size: 1rem; border: 1px solid #bdbdbd; border-radius: 4px; box-sizing: border-box; }
.bgnu-portal__info { padding: 0.75rem 1rem; background: #eef5fb; border-left: 4px solid #005b8f; border-radius: 0 4px 4px 0; margin: 1rem 0; }
.bgnu-portal__item { border: 1px solid #e0e0e0; border-radius: 6px; padding: 1.25rem; margin: 1rem 0; background: #fafafa; }
.bgnu-portal__item h3 { margin-top: 0; }
.bgnu-portal__item dl { display: grid; grid-template-columns: 200px 1fr; gap: 0.35rem 1rem; margin: 0.5rem 0; font-size: 0.95rem; }
.bgnu-portal__item dt { color: #555; font-weight: 500; }
.bgnu-portal__item dd { margin: 0; }
.bgnu-portal__status { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 3px; font-size: 0.85rem; font-weight: 500; }
.bgnu-portal__status--neu           { background: #e6f0f7; color: #024a75; }
.bgnu-portal__status--gesichtet     { background: #fef2e0; color: #8a5a00; }
.bgnu-portal__status--angebot       { background: #d4ecf7; color: #005b8f; }
.bgnu-portal__status--abgeschlossen { background: #e9e9e9; color: #444; }
.bgnu-portal__actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) { .bgnu-portal__item dl { grid-template-columns: 1fr; gap: 0 1rem; } .bgnu-portal__item dt { font-weight: 500; margin-top: 0.4rem; } }

@media (max-width: 640px) {
    .bgnu-form__grid { grid-template-columns: 1fr; }
    .bgnu-summary dl { grid-template-columns: 1fr; gap: 0 1rem; }
    .bgnu-summary dt { font-weight: 500; margin-top: 0.4rem; }
}

/* === Intro-Schritte (Willkommen, Ablauf) === */

.bgnu-form__section--intro {
    padding: 1.75rem 2rem;
}
@media (max-width: 640px) {
    .bgnu-form__section--intro { padding: 1.25rem 1.25rem; }
}

.bgnu-form__section-title {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    color: #005b8f;
    line-height: 1.25;
}

.bgnu-form__lead {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0 0 1.25rem;
}

.bgnu-form__intro-heading {
    margin: 1.25rem 0 0.5rem;
    font-size: 1.1rem;
    color: #1a1a1a;
}

.bgnu-form__intro-bullets {
    margin: 0.5rem 0 1rem;
    padding-left: 1.2rem;
    line-height: 1.55;
}

.bgnu-form__intro-bullets li { margin-bottom: 0.3rem; }

.bgnu-form__intro-bullets--check {
    list-style: none;
    padding-left: 0;
}

.bgnu-form__intro-bullets--check li {
    position: relative;
    padding-left: 1.8rem;
    margin-bottom: 0.5rem;
}

.bgnu-form__intro-bullets--check li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35rem;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--bgnu-primary);
    border-radius: 50%;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.173 11.414 2.758 8l1.414-1.414 2.001 2.001 4.242-4.243 1.415 1.414z'/></svg>") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M6.173 11.414 2.758 8l1.414-1.414 2.001 2.001 4.242-4.243 1.415 1.414z'/></svg>") center/contain no-repeat;
}

.bgnu-form__intro-note {
    font-style: italic;
    color: #555;
    margin: 1rem 0 0;
}

.bgnu-form__intro--2col {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2rem;
    align-items: start;
}

.bgnu-form__intro-aside {
    position: sticky;
    top: 1rem;
}

.bgnu-form__intro-image {
    background: #f0f7fc;
    border: 1px solid #c8ddeb;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.bgnu-form__intro-image svg {
    width: 100%;
    height: auto;
    max-width: 360px;
    display: block;
    margin: 0 auto;
    border-radius: 4px;
}

.bgnu-form__intro-caption {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    color: #666;
    font-style: italic;
}

/* Ablauf-Schritte */

.bgnu-form__flow {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    counter-reset: flow;
}

.bgnu-form__flow-item {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1rem;
    padding: 1rem 1rem 1rem 0;
    border-bottom: 1px solid #dfeaf1;
    align-items: start;
}

.bgnu-form__flow-item:last-child { border-bottom: none; }

.bgnu-form__flow-num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--bgnu-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bgnu-form__flow-title {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    color: #1a1a1a;
}

.bgnu-form__flow-text {
    margin: 0;
    color: #3a3a3a;
    line-height: 1.55;
}

.bgnu-form__transparency {
    background: #f0f7fc;
    border-left: 4px solid var(--bgnu-primary);
    border-radius: 0 6px 6px 0;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.bgnu-form__transparency .bgnu-form__intro-heading {
    margin-top: 0;
    color: #005b8f;
}

.bgnu-btn--cta {
    font-weight: 600;
    padding-inline: 1.5rem;
}

/* === Wohnungswahl-Schritt === */
.bgnu-form__notice {
    padding: 1rem 1.25rem;
    border-radius: 6px;
    border-left: 4px solid var(--bgnu-primary);
    background: var(--bgnu-primary-soft);
    margin: 0.75rem 0 1rem;
}
.bgnu-form__loading {
    padding: 1.25rem;
    color: #555;
    font-style: italic;
    text-align: center;
}
.bgnu-form__wahl-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    font-weight: normal;
}
.bgnu-form__wahl-option:hover { background: #f7fbfd; border-color: var(--bgnu-primary-soft-b); }
.bgnu-form__wahl-option input[type="radio"] { margin-top: 0.25rem; flex-shrink: 0; }
.bgnu-form__wahl-sub { font-size: 0.88rem; color: #555; margin-top: 0.15rem; }
.bgnu-form__wahl-hint { color: #b00020; font-size: 0.9rem; margin: 0.5rem 0 0; }
.bgnu-form__wohnungen { margin-top: 1rem; }
.bgnu-form__wohnungen-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.bgnu-form__wohnung-card {
    border: 1.5px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.bgnu-form__wohnung-card:hover {
    border-color: var(--bgnu-primary);
    background: #f7fbfd;
    box-shadow: 0 1px 4px rgba(30, 166, 224, 0.1);
}
.bgnu-form__wohnung-card--selected {
    border-color: var(--bgnu-primary-dark);
    background: var(--bgnu-primary-soft);
    box-shadow: 0 0 0 1px var(--bgnu-primary-dark) inset;
}
.bgnu-form__wohnung-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-weight: normal;
    margin: 0;
}
.bgnu-form__wohnung-label input[type="radio"] { margin-top: 0.35rem; flex-shrink: 0; }
.bgnu-form__wohnung-body { flex: 1 1 auto; min-width: 0; }
.bgnu-form__wohnung-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.bgnu-form__wohnung-head strong { font-size: 1rem; color: var(--bgnu-primary-dark); }
.bgnu-form__wohnung-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: var(--bgnu-primary);
    color: #fff;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.bgnu-form__wohnung-meta {
    font-size: 0.88rem;
    color: #555;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    line-height: 1.45;
}
.bgnu-form__wohnung-meta span { white-space: nowrap; }

/* "Details"-Button auf der Wohnungskarte */
.bgnu-form .bgnu-form__wohnung-details {
    flex-shrink: 0;
    align-self: center;
    margin-right: 0.5rem;
    background-color: transparent;
    border: 1px solid var(--bgnu-primary-soft-b);
    color: var(--bgnu-primary-dark);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.2;
}
.bgnu-form .bgnu-form__wohnung-details:hover {
    background-color: var(--bgnu-primary);
    border-color: var(--bgnu-primary);
    color: #fff;
}

/* === Lightbox === */
.bgnu-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 50, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    animation: bgnu-fadein 0.15s ease-out;
}
@keyframes bgnu-fadein { from { opacity: 0; } to { opacity: 1; } }
.bgnu-lightbox__dialog {
    background: #fff;
    border-radius: 10px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: bgnu-slideup 0.2s ease-out;
}
@keyframes bgnu-slideup { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.bgnu-lightbox .bgnu-lightbox__close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background-color: transparent;
    border: 1px solid transparent;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.75rem;
    line-height: 1;
    color: #555;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
    z-index: 2;
}
.bgnu-lightbox .bgnu-lightbox__close:hover { background-color: #f0f0f0; color: #000; }
.bgnu-lightbox__content { padding: 1.5rem 1.75rem 1.25rem; }
.bgnu-lightbox__header { margin-bottom: 1rem; padding-right: 2.5rem; }
.bgnu-lightbox__title { margin: 0 0 0.25rem; font-size: 1.4rem; color: var(--bgnu-primary-dark); line-height: 1.25; }
.bgnu-lightbox__sub { color: #555; font-size: 0.92rem; }

.bgnu-lightbox__gallery {
    margin: 0 0 1.25rem;
    border-radius: 6px;
    overflow: hidden;
    background: #f2f5f7;
    position: relative;
}
.bgnu-lightbox__image-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    max-height: 360px;
    background: #000;
}
.bgnu-lightbox__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.bgnu-lightbox .bgnu-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid transparent;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.5rem;
    font-family: inherit;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background-color 0.15s;
}
.bgnu-lightbox .bgnu-lightbox__nav:hover { background-color: rgba(0, 0, 0, 0.75); color: #fff; }
.bgnu-lightbox__nav--prev { left: 0.5rem; }
.bgnu-lightbox__nav--next { right: 0.5rem; }
.bgnu-lightbox__image-counter {
    position: absolute;
    bottom: 0.5rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 0.15rem 0.6rem;
    border-radius: 3px;
    font-size: 0.8rem;
}

.bgnu-lightbox__facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1.5rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--bgnu-primary-soft);
    border-radius: 6px;
}
.bgnu-lightbox__facts > div { display: flex; flex-direction: column; }
.bgnu-lightbox__facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #666; margin-bottom: 0.1rem; }
.bgnu-lightbox__facts dd { margin: 0; font-size: 1rem; color: #1a1a1a; }
.bgnu-lightbox__facts dd strong { color: var(--bgnu-primary-dark); font-size: 1.15rem; }

.bgnu-lightbox__features { margin: 0 0 1rem; }
.bgnu-lightbox__features h4 { margin: 0 0 0.5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: #555; }
.bgnu-lightbox__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bgnu-lightbox__tag { background: #f0f3f5; border: 1px solid #dfeaf1; color: #333; padding: 0.25rem 0.65rem; border-radius: 3px; font-size: 0.85rem; }

.bgnu-lightbox__description { margin: 0 0 1.25rem; }
.bgnu-lightbox__description h4 { margin: 0 0 0.5rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: #555; }
.bgnu-lightbox__description p { margin: 0; line-height: 1.55; white-space: pre-line; }

.bgnu-lightbox__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid #eaeef0;
    flex-wrap: wrap;
}
.bgnu-lightbox__selected-hint {
    color: var(--bgnu-primary-dark);
    font-weight: 600;
    font-size: 0.92rem;
}

@media (max-width: 640px) {
    .bgnu-lightbox__content { padding: 1.25rem 1.25rem 1rem; }
    .bgnu-lightbox__facts { grid-template-columns: 1fr; gap: 0.6rem; padding: 0.85rem 1rem; }
    .bgnu-form__wohnung-label { flex-wrap: wrap; }
    .bgnu-form__wohnung-details { margin: 0.5rem 0 0.25rem auto; }
}

@media (max-width: 720px) {
    .bgnu-form__intro--2col {
        grid-template-columns: 1fr;
    }
    .bgnu-form__intro-aside {
        position: static;
        order: -1;
    }
    .bgnu-form__intro-image svg { max-width: 260px; }
    .bgnu-form__flow-item { grid-template-columns: 2.25rem 1fr; }
    .bgnu-form__flow-num { width: 2rem; height: 2rem; font-size: 0.95rem; }
    .bgnu-form__wohnung-meta { font-size: 0.82rem; }
}

/* === Chatbot-Widget (floating rechts unten, Demo) === */
.bgnu-chat {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 9997;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.4;
}

/* Floating Action Button */
.bgnu-chat .bgnu-chat__fab {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--bgnu-primary);
    color: #fff;
    border: 1px solid var(--bgnu-primary);
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(30, 166, 224, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s;
}
.bgnu-chat .bgnu-chat__fab:hover { background-color: var(--bgnu-primary-dark); border-color: var(--bgnu-primary-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,91,143,0.5); }
.bgnu-chat__fab:active { transform: translateY(0); }
.bgnu-chat__fab-icon { display: flex; align-items: center; justify-content: center; }
.bgnu-chat__fab-pulse {
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 50%;
    border: 2px solid var(--bgnu-primary);
    animation: bgnu-chat-pulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes bgnu-chat-pulse {
    0%   { opacity: 0.7; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.35); }
    100% { opacity: 0;   transform: scale(1.35); }
}

/* Panel (geöffnet) */
.bgnu-chat__panel {
    width: 360px;
    max-width: calc(100vw - 2.5rem);
    height: 520px;
    max-height: calc(100vh - 2.5rem);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.bgnu-chat__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, var(--bgnu-primary-dark) 0%, var(--bgnu-primary) 100%);
    color: #fff;
}
.bgnu-chat__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.bgnu-chat__avatar img { width: 100%; height: auto; display: block; }
.bgnu-chat__title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bgnu-chat__title strong { font-size: 0.98rem; color: #fff; }
.bgnu-chat__title small { font-size: 0.78rem; opacity: 0.9; display: flex; align-items: center; gap: 0.35rem; }
.bgnu-chat__status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #47d16c;
    box-shadow: 0 0 0 2px rgba(71, 209, 108, 0.35);
}
.bgnu-chat .bgnu-chat__close {
    background-color: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid transparent;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background-color 0.15s;
}
.bgnu-chat .bgnu-chat__close:hover { background-color: rgba(255,255,255,0.28); color: #fff; }

.bgnu-chat__messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem;
    background: #f7fafc;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    scroll-behavior: smooth;
}
.bgnu-chat__msg { display: flex; }
.bgnu-chat__msg--bot  { justify-content: flex-start; }
.bgnu-chat__msg--user { justify-content: flex-end; }
.bgnu-chat__bubble {
    max-width: 82%;
    padding: 0.6rem 0.85rem;
    border-radius: 14px;
    font-size: 0.92rem;
    line-height: 1.45;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    animation: bgnu-chat-msgin 0.18s ease-out;
    word-wrap: break-word;
}
@keyframes bgnu-chat-msgin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.bgnu-chat__msg--bot  .bgnu-chat__bubble { background: #fff; color: #1a2b3a; border-bottom-left-radius: 4px; }
.bgnu-chat__msg--user .bgnu-chat__bubble { background: var(--bgnu-primary-dark); color: #fff; border-bottom-right-radius: 4px; }
.bgnu-chat__msg--bot .bgnu-chat__bubble strong { color: var(--bgnu-primary-dark); }
.bgnu-chat__msg--user .bgnu-chat__bubble strong { color: #fff; }

.bgnu-chat__bubble--typing { display: inline-flex; gap: 4px; padding: 0.75rem 0.95rem; }
.bgnu-chat__bubble--typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9fb0bf;
    animation: bgnu-chat-typing 1.2s infinite;
}
.bgnu-chat__bubble--typing span:nth-child(2) { animation-delay: 0.18s; }
.bgnu-chat__bubble--typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bgnu-chat-typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

.bgnu-chat__quick {
    padding: 0.5rem 0.75rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    background: #f7fafc;
    border-top: 1px solid #e4eaef;
}
.bgnu-chat .bgnu-chat__quick-btn {
    background-color: #fff;
    border: 1px solid var(--bgnu-primary-soft-b);
    color: var(--bgnu-primary-dark);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.bgnu-chat .bgnu-chat__quick-btn:hover { background-color: var(--bgnu-primary); border-color: var(--bgnu-primary); color: #fff; }

.bgnu-chat__input {
    display: flex;
    gap: 0.4rem;
    padding: 0.75rem;
    background: #fff;
    border-top: 1px solid #e4eaef;
    align-items: center;
}
.bgnu-chat__input input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    border: 1px solid #c8d0d7;
    border-radius: 999px;
    font-size: 0.92rem;
    font-family: inherit;
    background: #f7fafc;
    outline: none;
    transition: border-color 0.15s, background-color 0.15s;
}
.bgnu-chat__input input:focus { border-color: var(--bgnu-primary); background: #fff; }
.bgnu-chat__input input:disabled { opacity: 0.7; cursor: not-allowed; }
.bgnu-chat .bgnu-chat__send {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--bgnu-primary);
    color: #fff;
    border: 1px solid var(--bgnu-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background-color 0.15s, border-color 0.15s;
}
.bgnu-chat .bgnu-chat__send:hover:not(:disabled) { background-color: var(--bgnu-primary-dark); border-color: var(--bgnu-primary-dark); color: #fff; }
.bgnu-chat .bgnu-chat__send:disabled { background-color: #b0bec5; border-color: #b0bec5; color: #fff; cursor: not-allowed; }

.bgnu-chat__footer {
    padding: 0.45rem 1rem;
    font-size: 0.72rem;
    color: #8fa3b5;
    background: #f0f3f5;
    text-align: center;
    border-top: 1px solid #e4eaef;
}

@media (max-width: 640px) {
    .bgnu-chat { bottom: 0.75rem; right: 0.75rem; }
    .bgnu-chat__panel { width: calc(100vw - 1.5rem); height: calc(100vh - 5rem); }
    .bgnu-chat__fab { width: 54px; height: 54px; }
}

/* ===== [bgnu_wohnungen] — Öffentliche Wohnungsliste mit Filter und Grid ===== */

.bgnu-wohnungen {
    max-width: 1180px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #1a1a1a;
    line-height: 1.5;
    box-sizing: border-box;
}

.bgnu-wohnungen__head { margin-bottom: 1rem; }
.bgnu-wohnungen__title {
    margin: 0 0 0.25rem;
    font-size: 1.8rem;
    color: var(--bgnu-primary-dark);
    line-height: 1.2;
}
.bgnu-wohnungen__subtitle { margin: 0; color: #555; font-size: 0.95rem; }

/* Filter-Bar */
.bgnu-wohnungen__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
    background: #f0f7fc;
    border: 1px solid var(--bgnu-primary-soft-b);
    border-radius: 8px;
}
.bgnu-wohnungen__filter { display: flex; flex-direction: column; }
.bgnu-wohnungen__filter label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
    margin-bottom: 0.25rem;
    font-weight: 600;
}
.bgnu-wohnungen__filter input,
.bgnu-wohnungen__filter select {
    padding: 0.5rem 0.65rem;
    border: 1px solid #c8d0d7;
    border-radius: 4px;
    font-size: 0.92rem;
    font-family: inherit;
    background: #fff;
    min-width: 0;
}
.bgnu-wohnungen__filter input:focus,
.bgnu-wohnungen__filter select:focus {
    outline: 2px solid var(--bgnu-primary);
    outline-offset: 1px;
    border-color: var(--bgnu-primary);
}

.bgnu-wohnungen .bgnu-wohnungen__reset {
    align-self: end;
    background-color: transparent;
    color: var(--bgnu-primary-dark);
    border: 1px solid var(--bgnu-primary-dark);
    border-radius: 4px;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1.2;
    white-space: nowrap;
}
.bgnu-wohnungen .bgnu-wohnungen__reset:hover {
    background-color: var(--bgnu-primary-dark);
    color: #fff;
}

/* Leer-/Ladezustände */
.bgnu-wohnungen__state {
    padding: 2rem 1rem;
    text-align: center;
    color: #555;
    background: #f7fafc;
    border-radius: 8px;
    font-size: 0.95rem;
}
.bgnu-wohnungen__state--empty { background: var(--bgnu-primary-soft); color: #1a1a1a; }
.bgnu-wohnungen__state--empty a { color: var(--bgnu-primary-dark); font-weight: 500; }
.bgnu-wohnungen__state--nohits { font-style: italic; }
.bgnu-wohnungen .bgnu-wohnungen__inline-btn {
    background-color: transparent;
    color: var(--bgnu-primary-dark);
    border: none;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    padding: 0 0.2rem;
}

/* Grid */
.bgnu-wohnungen__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.25rem;
}
.bgnu-wohnungen--cols-2 .bgnu-wohnungen__grid { grid-template-columns: repeat(2, 1fr); }
.bgnu-wohnungen--cols-3 .bgnu-wohnungen__grid { grid-template-columns: repeat(3, 1fr); }
.bgnu-wohnungen--cols-4 .bgnu-wohnungen__grid { grid-template-columns: repeat(4, 1fr); }

.bgnu-wohnungen__card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.bgnu-wohnungen__card:hover {
    transform: translateY(-2px);
    border-color: var(--bgnu-primary);
    box-shadow: 0 6px 20px rgba(30, 166, 224, 0.15);
}

.bgnu-wohnungen__img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #e8f4fb;
    overflow: hidden;
}
.bgnu-wohnungen__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bgnu-wohnungen__img-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bgnu-primary-soft-b);
    background: linear-gradient(135deg, #e8f4fb 0%, #d4ecf7 100%);
}
.bgnu-wohnungen__badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: var(--bgnu-primary);
    color: #fff;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.bgnu-wohnungen__body {
    padding: 0.9rem 1rem 0.5rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.bgnu-wohnungen__name {
    margin: 0;
    font-size: 1.02rem;
    color: var(--bgnu-primary-dark);
    line-height: 1.3;
}
.bgnu-wohnungen__loc { font-size: 0.85rem; color: #666; }

.bgnu-wohnungen__meta {
    list-style: none;
    padding: 0;
    margin: 0.25rem 0;
    display: flex;
    gap: 0.85rem;
    font-size: 0.88rem;
    color: #444;
    flex-wrap: wrap;
}
.bgnu-wohnungen__meta strong { color: #1a1a1a; }

.bgnu-wohnungen__price {
    margin-top: auto;
    padding-top: 0.5rem;
}
.bgnu-wohnungen__price strong {
    font-size: 1.2rem;
    color: var(--bgnu-primary-dark);
    display: block;
    line-height: 1.2;
}
.bgnu-wohnungen__price small { font-size: 0.78rem; color: #666; }

.bgnu-wohnungen__card-footer {
    padding: 0.55rem 1rem 0.75rem;
    border-top: 1px solid #f0f3f5;
    background: #fafcfe;
    font-size: 0.85rem;
    color: var(--bgnu-primary-dark);
    font-weight: 500;
    text-align: right;
}
.bgnu-wohnungen__card:hover .bgnu-wohnungen__cta-hint {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 960px) {
    .bgnu-wohnungen--cols-4 .bgnu-wohnungen__grid { grid-template-columns: repeat(3, 1fr); }
    .bgnu-wohnungen--cols-3 .bgnu-wohnungen__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .bgnu-wohnungen__grid,
    .bgnu-wohnungen--cols-2 .bgnu-wohnungen__grid,
    .bgnu-wohnungen--cols-3 .bgnu-wohnungen__grid,
    .bgnu-wohnungen--cols-4 .bgnu-wohnungen__grid { grid-template-columns: 1fr; }
    .bgnu-wohnungen__filters { grid-template-columns: 1fr 1fr; }
    .bgnu-wohnungen__title { font-size: 1.45rem; }
}

/* Top-Hinweisleiste im Bewerbungsformular (Link zu /wohnungen/) */
.bgnu-form__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    margin-bottom: 0.75rem;
    background: var(--bgnu-primary-soft);
    border: 1px solid var(--bgnu-primary-soft-b);
    border-left: 4px solid var(--bgnu-primary);
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    color: #1a2b3a;
    flex-wrap: wrap;
}
.bgnu-form__topbar-text { flex: 1 1 auto; min-width: 220px; }
.bgnu-form__topbar-text strong { color: var(--bgnu-primary-dark); }
.bgnu-form .bgnu-form__topbar-link {
    flex-shrink: 0;
    background-color: var(--bgnu-primary-dark);
    color: #fff;
    text-decoration: none;
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background-color 0.15s;
    white-space: nowrap;
}
.bgnu-form .bgnu-form__topbar-link:hover {
    background-color: var(--bgnu-primary-darker);
    color: #fff;
}
@media (max-width: 640px) {
    .bgnu-form__topbar { padding: 0.6rem 0.85rem; font-size: 0.88rem; }
    .bgnu-form__topbar-text { min-width: 100%; }
}

/* ===== Karten-Sektion (Leaflet + Consent-Gate) ===== */

.bgnu-map {
    margin: 1rem 0 1.25rem;
}
.bgnu-map h4 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #555;
}

/* Consent-Gate — Placeholder, bevor die Karte geladen wird */
.bgnu-map__consent {
    background: linear-gradient(135deg, var(--bgnu-primary-soft) 0%, #d4ecf7 100%);
    border: 1px dashed var(--bgnu-primary-soft-b);
    border-radius: 8px;
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bgnu-map__consent:hover { border-color: var(--bgnu-primary); background: var(--bgnu-primary-soft); }
.bgnu-map__consent-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 520px;
}
.bgnu-map__consent-icon {
    flex-shrink: 0;
    color: var(--bgnu-primary-dark);
}
.bgnu-map__consent-text { flex: 1 1 200px; min-width: 0; }
.bgnu-map__consent-text strong { display: block; font-size: 1rem; color: var(--bgnu-primary-dark); margin-bottom: 0.2rem; }
.bgnu-map__consent-text p { margin: 0; font-size: 0.85rem; color: #3a3a3a; line-height: 1.45; }

/* Karte selbst */
.bgnu-map__canvas {
    width: 100%;
    height: 260px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bgnu-primary-soft-b);
    z-index: 0;                  /* gegen Lightbox / Alpine-Transitions */
}
.bgnu-map__attrib {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: #888;
}
.bgnu-map__attrib a { color: inherit; text-decoration: underline; }

/* Leaflet-Marker: pulsierender Punkt in Logo-Blau */
.bgnu-map__marker {
    display: block;
    width: 18px;
    height: 18px;
}
.bgnu-map__marker-dot {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bgnu-primary);
    border: 3px solid #fff;
    box-shadow: 0 0 0 0 rgba(30, 166, 224, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3);
    animation: bgnu-map-pulse 2s infinite;
}
@keyframes bgnu-map-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(30, 166, 224, 0.75), 0 2px 6px rgba(0, 0, 0, 0.3); }
    70%  { box-shadow: 0 0 0 22px rgba(30, 166, 224, 0),   0 2px 6px rgba(0, 0, 0, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(30, 166, 224, 0),      0 2px 6px rgba(0, 0, 0, 0.3); }
}

/* Leaflet-Controls in unsere CI zwingen */
.bgnu-map__canvas .leaflet-control-zoom a {
    color: var(--bgnu-primary-dark) !important;
    border-color: var(--bgnu-primary-soft-b) !important;
    background-color: #fff !important;
}
.bgnu-map__canvas .leaflet-control-zoom a:hover {
    background-color: var(--bgnu-primary-soft) !important;
    color: var(--bgnu-primary-dark) !important;
}

@media (max-width: 640px) {
    .bgnu-map__canvas { height: 220px; }
    .bgnu-map__consent { padding: 1rem; min-height: 110px; }
}

/* ===== Wohnungen-Uebersichtskarte ===== */
.bgnu-wohnungen__overview-map {
    margin: 0 0 1.5rem;
}
.bgnu-wohnungen__overview-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.bgnu-wohnungen__overview-head h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--bgnu-primary-dark);
    text-transform: none;
    letter-spacing: 0;
}
.bgnu-wohnungen__overview-head small { color: #666; font-size: 0.85rem; }
.bgnu-wohnungen__overview-head small strong { color: var(--bgnu-primary-dark); }

.bgnu-map__canvas--overview {
    height: 380px;
}
@media (max-width: 640px) {
    .bgnu-map__canvas--overview { height: 280px; }
}

/* Leaflet-Popup in CI-Style */
.bgnu-map__popup .leaflet-popup-content-wrapper {
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.bgnu-map__popup .leaflet-popup-content {
    margin: 0;
    padding: 0.85rem 1rem;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    line-height: 1.4;
}
.bgnu-map__popup .leaflet-popup-tip {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.bgnu-map__popup .leaflet-popup-close-button {
    color: #555 !important;
    font-size: 18px !important;
    padding: 6px 8px 0 0 !important;
}
.bgnu-map__popup-body { min-width: 180px; }
.bgnu-map__popup-body strong {
    display: block;
    color: var(--bgnu-primary-dark);
    font-size: 0.95rem;
    margin-bottom: 0.1rem;
    padding-right: 1.25rem; /* Platz fuer Close-X */
}
.bgnu-map__popup-badge {
    display: inline-block;
    background: var(--bgnu-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.35rem;
    vertical-align: 2px;
}
.bgnu-map__popup-meta {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.6rem;
}

/* Popup-Button (spezifische Selektoren, damit Theme-CSS nicht durchrutscht) */
.bgnu-map__popup .bgnu-btn--sm {
    padding: 0.35rem 0.7rem !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    cursor: pointer;
    font-family: inherit !important;
    background-color: var(--bgnu-primary-dark) !important;
    color: #fff !important;
    border: 1px solid var(--bgnu-primary-dark) !important;
    display: inline-block !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
}
.bgnu-map__popup .bgnu-btn--sm:hover {
    background-color: var(--bgnu-primary-darker) !important;
    border-color: var(--bgnu-primary-darker) !important;
    color: #fff !important;
}

/* ===== Avatar-Video auf der Willkommens-Seite ===== */
.bgnu-form__intro-video {
    background: #f3f7f4;
    border: 1px solid #c8ddeb;
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
}
.bgnu-form__video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    max-width: 340px;
    margin: 0 auto 0.5rem;
    border-radius: 6px;
    background: #000;
    aspect-ratio: 9 / 16;
    object-fit: contain;
}
@media (max-width: 720px) {
    .bgnu-form__video { max-width: 260px; max-height: 460px; }
}

/* ===== Stepper klickbar (Cursor + Hover-Feedback) ===== */
.bgnu-form__step {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s, transform 0.1s;
}
.bgnu-form__step:hover:not(.bgnu-form__step--active) {
    background: #e0eef6;
}
.bgnu-form__step:active {
    transform: scale(0.97);
}
.bgnu-form__step:focus-visible {
    outline: 2px solid var(--bgnu-primary);
    outline-offset: 2px;
}

/* ===== Erfolgs-Block nach Submit (Kunden-Anpassung 2026-05-09) ===== */
.bgnu-form__success {
    background: linear-gradient(135deg, #e8f5e9 0%, #d4ecf7 100%);
    border: 2px solid #1f8a3a;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    text-align: center;
    margin: 2rem 0;
    box-shadow: 0 4px 20px rgba(31, 138, 58, 0.15);
    animation: bgnu-success-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes bgnu-success-pop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.bgnu-form__success-icon {
    color: #1f8a3a;
    margin-bottom: 1rem;
    display: inline-block;
    animation: bgnu-success-check 0.6s ease-out 0.2s both;
}
@keyframes bgnu-success-check {
    from { transform: scale(0) rotate(-45deg); }
    to   { transform: scale(1) rotate(0); }
}
.bgnu-form__success-title {
    margin: 0 0 0.75rem;
    font-size: 2rem;
    color: #1f8a3a;
    font-weight: 700;
    line-height: 1.2;
}
.bgnu-form__success-text {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    color: #1a2b3a;
    line-height: 1.5;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.bgnu-form__success-hint {
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
    color: #444;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.bgnu-form__success-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.bgnu-form .bgnu-form__success-actions .bgnu-btn {
    padding: 0.7rem 1.4rem;
    font-size: 1rem;
    text-decoration: none;
}
@media (max-width: 640px) {
    .bgnu-form__success { padding: 1.75rem 1.25rem; }
    .bgnu-form__success-title { font-size: 1.5rem; }
    .bgnu-form__success-text { font-size: 1rem; }
    .bgnu-form__success-icon svg { width: 64px; height: 64px; }
}

/* ===== M2: Validierungs-Härtung (Kunden-Anpassung 2026-05-09) ===== */

/* Sichtbarerer roter Rahmen + leichter Background auf Eingabefeldern mit aria-invalid */
.bgnu-form .bgnu-field input[aria-invalid="true"],
.bgnu-form .bgnu-field select[aria-invalid="true"],
.bgnu-form .bgnu-field textarea[aria-invalid="true"] {
    border: 2px solid #b00020 !important;
    background-color: #fff5f6 !important;
    box-shadow: 0 0 0 3px rgba(176, 0, 32, 0.08);
}

/* Wrapper-Klasse für Felder/Fieldsets mit Fehler (auch ohne aria-invalid) */
.bgnu-form .bgnu-field--invalid label,
.bgnu-form .bgnu-fieldset--invalid legend {
    color: #b00020;
}
.bgnu-form .bgnu-fieldset--invalid {
    border: 2px solid #b00020 !important;
    background-color: #fff5f6;
}

/* Error-Hinweis prominenter */
.bgnu-form .bgnu-field__error {
    color: #b00020;
    font-weight: 600;
    font-size: 0.88rem;
    margin-top: 0.4rem;
    padding-left: 0.5rem;
    border-left: 3px solid #b00020;
    line-height: 1.4;
}

/* Top-Banner mit Gesamt-Fehleranzahl */
.bgnu-form__error-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fdecee;
    border: 2px solid #b00020;
    border-left-width: 6px;
    border-radius: 6px;
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    color: #5a0010;
    font-size: 0.95rem;
    animation: bgnu-shake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    position: sticky;
    top: 0.5rem;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(176, 0, 32, 0.15);
}
.bgnu-form__error-banner strong {
    color: #b00020;
    display: block;
    font-size: 1rem;
    line-height: 1.3;
}
.bgnu-form__error-banner-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    color: #b00020;
}

@keyframes bgnu-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-6px); }
    40%      { transform: translateX(5px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(2px); }
}

/* ===== M4: Wohnungs-Bezug (Kunden-Anpassung 2026-05-09) ===== */

/* Bewerber-Portal: Box pro Bewerbung */
.bgnu-portal__wohnungsbezug {
    margin: 0.5rem 0 0.85rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.95rem;
    line-height: 1.45;
}
.bgnu-portal__wohnungsbezug--konkret {
    background: #e8f4fb;
    border-left: 4px solid #1EA6E0;
    color: #1a2b3a;
}
.bgnu-portal__wohnungsbezug--konkret strong { color: #005b8f; }
.bgnu-portal__wohnungsbezug--pool {
    background: #f0f3f5;
    border-left: 4px solid #999;
    color: #444;
    font-size: 0.88rem;
    font-style: italic;
}

/* ===== M5: Portal — Wohnung-belegt-Hinweis (Kunden-Anpassung 2026-05-09) ===== */
.bgnu-portal__wohnungsbezug--belegt {
    background: #fef2e0;
    border-left: 4px solid #c87a00;
    color: #5a3a00;
    font-size: 0.9rem;
    margin-top: -0.6rem;  /* enger an den konkret-Block ankoppeln */
}

/* ===== M6: Bewerber-Portal Detail/Edit (Kunden-Anpassung 2026-05-09) ===== */
.bgnu-portal__edit-locked {
    display: inline-block;
    padding: 0.4rem 0.7rem;
    background: #f0f3f5;
    color: #777;
    border-radius: 4px;
    font-size: 0.85rem;
    font-style: italic;
}
.bgnu-portal__info--success {
    background: #ebf5ee;
    border-left: 4px solid #1f5a33;
    color: #1f5a33;
}
.bgnu-portal__edit-form .bgnu-fieldset {
    margin-bottom: 1rem;
    background: #fafbfc;
}
.bgnu-portal__edit-form .bgnu-fieldset legend {
    font-weight: 600;
    color: #005b8f;
    padding: 0 0.5rem;
}
.bgnu-portal__edit-form input:disabled,
.bgnu-portal__edit-form .bgnu-field input[disabled] {
    background: #f0f3f5;
    color: #888;
    cursor: not-allowed;
}
.bgnu-portal__haushalt-list {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.9rem;
}
.bgnu-portal__haushalt-list li { margin-bottom: 0.25rem; }