:root {
    --bj-sapphire: #0f2a6b;
    --bj-sapphire-light: #1d4ed8;
    --bj-silver: #cbd5e1;
    --bj-paper: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Times New Roman", Times, Georgia, serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bj-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    will-change: transform;
}

.bj-card:hover,
.bj-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 22px 45px -18px rgba(15, 42, 107, .45);
    border-color: var(--bj-sapphire-light);
}

/* dezente Trennlinie im Sapphire-Stil */
.bj-rule {
    height: 3px;
    width: 72px;
    background: linear-gradient(90deg, var(--bj-sapphire), var(--bj-silver));
}

/* Fokus-Sichtbarkeit für Tastaturnutzung */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mobile-Menü Animation */
.bj-mobile-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.bj-mobile-nav.is-open {
    max-height: 520px;
}

/* Einblenden beim Scrollen */
.bj-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}

.bj-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Formularfehler */
.bj-error {
    color: #b91c1c;
    font-size: .82rem;
    margin-top: .25rem;
    display: none;
}

.bj-error.is-shown {
    display: block;
}

.bj-invalid {
    border-color: #b91c1c !important;
    background-color: #fef2f2;
}

/* Akkordeon */
.bj-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.bj-acc-body.is-open {
    max-height: 400px;
}

@media (prefers-reduced-motion: reduce) {

    .bj-card,
    .bj-reveal,
    .bj-mobile-nav,
    .bj-acc-body {
        transition: none !important;
    }

    .bj-reveal {
        opacity: 1;
        transform: none;
    }
}

::selection {
    background: #0f2a6b;
    color: #fff;
}

@media (max-width: 768px) {

    h1 {
        font-size: 28px !important;
    }
}
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 5px;
  z-index: 1000;
}
.close-button{
  color: #ffffff;
  margin-left: auto;
  display: block;
  background-color: transparent;
}