/* ============================================================
   grid.css — Ersatz für Bootstrap 5.3.2
   Angelegt 05.09.2026. Enthält genau die Klassen, die die
   11 betroffenen Seiten tatsächlich verwenden, mit denselben
   Werten wie Bootstrap 5.3. Kein Framework, keine CDN-Abhängigkeit.
   Breakpoints: md = 768px, lg = 992px (wie Bootstrap).
   ============================================================ */

/* ---------- Reboot ----------
   Bootstrap bringt diese Normalisierungen global mit; die Seiten sind
   darauf gebaut. Ohne box-sizing addiert sich jedes padding auf die
   Breiten, ohne body{margin:0} ist alles 16px schmaler, und ohne die
   Typografie-Resets fallen Browser auf em-basierte Standardabstaende
   zurueck (sichtbar vor allem auf textlastigen Seiten). */
*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; line-height: 1.5; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
/* Groessen kamen bisher aus Bootstrap; site.css setzt nur font-weight. */
h1, .h1 { font-size: calc(1.375rem + 1.5vw); }
h2, .h2 { font-size: calc(1.325rem + .9vw); }
h3, .h3 { font-size: calc(1.3rem + .6vw); }
h4, .h4 { font-size: calc(1.275rem + .3vw); }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1rem; }
@media (min-width: 1200px) {
    h1, .h1 { font-size: 2.5rem; }
    h2, .h2 { font-size: 2rem; }
    h3, .h3 { font-size: 1.75rem; }
    h4, .h4 { font-size: 1.5rem; }
}
p { margin-top: 0; margin-bottom: 1rem; }
ul, ol { padding-left: 2rem; margin-top: 0; margin-bottom: 1rem; }
ul ul, ol ul, ul ol, ol ol { margin-bottom: 0; }
dl { margin-top: 0; margin-bottom: 1rem; }
dd { margin-bottom: .5rem; margin-left: 0; }
blockquote { margin: 0 0 1rem; }
hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }
figure { margin: 0 0 1rem; }
table { border-collapse: collapse; caption-side: bottom; }
caption { padding-top: .5rem; padding-bottom: .5rem; color: rgba(33, 37, 41, .75); text-align: left; }
th { text-align: inherit; }
label { display: inline-block; }
button { border-radius: 0; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
button, select { text-transform: none; }
button, [type="button"], [type="submit"] { -webkit-appearance: button; }
img, svg { vertical-align: middle; }
a { text-decoration: underline; }
strong, b { font-weight: bolder; }
small { font-size: .875em; }

/* ---------- Display-Ueberschriften ----------
   Die Schriftgroessen kamen bisher ausschliesslich aus Bootstrap;
   site.css setzt fuer diese Klassen nur font-weight. Werte 1:1 aus
   Bootstrap 5.3 uebernommen (fluid bis 1200px, darueber fix). */
.display-1 { font-size: calc(1.625rem + 4.5vw); font-weight: 300; line-height: 1.2; }
.display-2 { font-size: calc(1.575rem + 3.9vw); font-weight: 300; line-height: 1.2; }
.display-3 { font-size: calc(1.525rem + 3.3vw); font-weight: 300; line-height: 1.2; }
.display-4 { font-size: calc(1.475rem + 2.7vw); font-weight: 300; line-height: 1.2; }
.display-5 { font-size: calc(1.425rem + 2.1vw); font-weight: 300; line-height: 1.2; }
.display-6 { font-size: calc(1.375rem + 1.5vw); font-weight: 300; line-height: 1.2; }
@media (min-width: 1200px) {
    .display-1 { font-size: 5rem; }
    .display-2 { font-size: 4.5rem; }
    .display-3 { font-size: 4rem; }
    .display-4 { font-size: 3.5rem; }
    .display-5 { font-size: 3rem; }
    .display-6 { font-size: 2.5rem; }
}

/* ---------- Buttons ----------
   site.css definiert Farben, Padding und Form der Buttons, die
   Zeilenhoehe kam aber aus Bootstraps .btn-Komponente. */
.btn { line-height: 1.5; }

/* ---------- Container ---------- */
.container {
    width: 100%;
    padding-right: .75rem;
    padding-left: .75rem;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

/* ---------- Grid ---------- */
.row {
    --gx: 1.5rem;
    --gy: 0rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--gy));
    margin-right: calc(-.5 * var(--gx));
    margin-left: calc(-.5 * var(--gx));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--gx) * .5);
    padding-left: calc(var(--gx) * .5);
    margin-top: var(--gy);
}
.g-4 { --gx: 1.5rem; --gy: 1.5rem; }
.g-5 { --gx: 3rem;   --gy: 3rem;   }

@media (min-width: 768px) {
    .col-md-6 { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) {
    .col-lg-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .col-lg-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-lg-9  { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; }
}

/* ---------- Display & Flex ---------- */
.d-flex        { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.flex-grow-1   { flex-grow: 1 !important; }
.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .justify-content-lg-end { justify-content: flex-end !important; }
}

/* ---------- Abstände (Bootstrap-Skala: 1=.25 2=.5 3=1 4=1.5 5=3 rem) ---------- */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.p-3  { padding: 1rem !important; }
.p-4  { padding: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
@media (min-width: 992px) {
    .mb-lg-5 { margin-bottom: 3rem !important; }
    .mt-lg-5 { margin-top: 3rem !important; }
    .p-lg-4  { padding: 1.5rem !important; }
    .p-lg-5  { padding: 3rem !important; }
}

/* ---------- Größen & Text ---------- */
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.text-center { text-align: center !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-semibold { font-weight: 600 !important; }
.rounded-pill { border-radius: 50rem !important; }
.border-top { border-top: 1px solid #dee2e6 !important; }
.list-unstyled { padding-left: 0; list-style: none; }
@media (min-width: 992px) {
    .text-lg-end { text-align: right !important; }
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
    position: absolute !important;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Tabellen ---------- */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table {
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-collapse: collapse;
}
.table > :not(caption) > * > * {
    padding: .5rem;
    border-bottom: 1px solid #dee2e6;
}
.align-middle, .align-middle > :not(caption) > * > * { vertical-align: middle !important; }

/* ---------- Accordion (Grundgerüst; Optik kommt aus dem Seiten-CSS) ---------- */
.accordion { --border: 1px solid #dee2e6; }
.accordion-flush { --border: 0; }
.accordion-header { margin-bottom: 0; }
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    color: inherit;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    cursor: pointer;
}
.accordion-button::after { margin-left: auto; }

/* Auf-/Zuklappen: geschlossene Panels sind display:none wie bei Bootstrap;
   waehrend der Animation setzt faq-accordion.js .is-animating und die Hoehe. */
.collapse:not(.show):not(.is-animating) { display: none; }
.collapse.is-animating { overflow: hidden; transition: height .3s ease; }
@media (prefers-reduced-motion: reduce) {
    .collapse.is-animating { transition: none; }
}