/*-----------------------------------------------------------
 * Grundlagen: Raster, Navigation, Formulare, Hilfsklassen.
 *
 * Ersetzt bootstrap.min.css (156,6 KB) durch die Regeln, die diese Seite
 * tatsaechlich braucht. Die Werte stammen aus Bootstrap 4.5.3 und wurden aus
 * der Originaldatei ausgelesen, nicht geschaetzt - dadurch bleibt die Optik
 * unveraendert. Nur die Bruchpunkte der Navigation sind vereinheitlicht.
 *------------------------------------------------------------*/

/* ===== Farbwerte ===== */

/* Jede Farbe der Seite steht genau einmal hier und wird ueber ihre Rolle
   angesprochen, nicht ueber ihren Wert. Nur so laesst sich weiter unten eine
   dunkle Fassung hinterlegen, ohne jede Regel zu verdoppeln.
   Die hellen Werte sind unveraendert die bisherigen. */
:root {
    color-scheme: light dark;

    /* Flaechen */
    --grund: #fff;              /* Seite und Abschnitte */
    --grund-abgesetzt: #f8f9fa; /* .bg-light, hebt die Dienstleistungen ab */
    --grund-erhoben: #fff;      /* Karten, Formularfelder, aufgescrollte Leiste */

    /* Text */
    --text: #212529;
    --text-stark: #000;         /* dort, wo bisher reines Schwarz stand */
    --text-gedaempft: #6c757d;
    /* Bootstraps #6c757d verfehlt auf .bg-light den AA-Kontrast, deshalb ist
       der Fliesstext eine Stufe dunkler. */
    --text-gedaempft-aa: #545b62;
    --text-formular: #495057;
    /* Menuepunkte auf der aufgeklappten Leiste im Mobilformat */
    --text-leiste-gedaempft: rgba(0, 0, 0, 0.6);

    /* Linien */
    --linie: #dee2e6;
    --linie-karte: #e8e8e8;
    --linie-formular: #e0e0e0;
    --linie-sozial: #d4d4d4;

    /* Fusszeile - in beiden Fassungen dunkel, daher ohne Gegenstueck */
    --fusszeile-grund: #242424;
    --fusszeile-text: #9aa0a6;
    --fusszeile-knopf: rgba(241, 241, 241, 0.08);

    --schatten-leiste: rgba(0, 0, 0, 0.050980392156862744);
    --auswahl: rgba(166, 175, 189, 0.3);
}

@media (prefers-color-scheme: dark) {
    :root {
        --grund: #15181b;
        --grund-abgesetzt: #1b1f23;
        --grund-erhoben: #1e2328;

        --text: #e6e8ea;
        --text-stark: #f2f4f6;
        --text-gedaempft: #a9b1b9;
        --text-gedaempft-aa: #a9b1b9;
        --text-formular: #e6e8ea;
        --text-leiste-gedaempft: rgba(230, 232, 234, 0.75);

        --linie: #333a41;
        --linie-karte: #2d343a;
        --linie-formular: #3c444c;
        --linie-sozial: #3c444c;

        --schatten-leiste: rgba(0, 0, 0, 0.5);
        --auswahl: rgba(120, 152, 184, 0.35);
    }
}

/* ===== Grundeinstellungen ===== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    text-align: left;
    background-color: var(--grund);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Groessenklassen, mit denen echte Ueberschriften kleiner gesetzt werden */
.h2 { font-size: 2rem; }
.h4 { font-size: 1.5rem; }
.h5 { font-size: 1.25rem; }

.h2, .h4, .h5 {
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul ul {
    margin-bottom: 0;
}

blockquote {
    margin: 0 0 1rem;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

img {
    vertical-align: middle;
    border-style: none;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

/* Ohne diese Regel ist <small> groesser als zuvor - der Browser-Standard
   "smaller" liegt ueber 80 % - und die Technologiezeile in den Referenzen
   bricht eine Zeile mehr um. */
small {
    font-size: 80%;
    font-weight: 400;
}

button,
input,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    text-transform: none;
    -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="submit"]:not(:disabled) {
    cursor: pointer;
}

textarea {
    overflow: auto;
    resize: vertical;
}

/* ===== Raster ===== */

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    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; }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-lg-4,
.col-lg-6,
.col-lg-8,
.col-lg-10,
.col-lg-12,
.col-md-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

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

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

@media (min-width: 768px) {
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 992px) {
    .col-lg-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-lg-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Nur von der Antwortseite in php/contact.php benutzt, nicht von
       index.html - deshalb ist das Fehlen dieser Spalte beim Ersetzen von
       Bootstrap lange niemandem aufgefallen. */
    .col-lg-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-lg-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
    }

    .col-lg-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== Navigation ===== */

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

/* Ohne diese Regel bleibt der Container ein Block, Logo und Menue stapeln sich
   untereinander und die Leiste wird 40px hoeher. */
.navbar > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.collapse:not(.show) {
    display: none;
}

.ml-auto {
    margin-left: auto !important;
}

/* Die Navigation klappt ab 992px auf. Bis dahin gilt die Mobilfassung -
   frueher endete die eigene Media Query schon bei 768px, wodurch zwischen
   769 und 991px weder das eine noch das andere vollstaendig griff. */
@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .navbar-expand-lg > .container {
        padding-right: 0;
        padding-left: 0;
    }
}

/* ===== Schaltflaechen ===== */

.btn {
    display: inline-block;
    font-weight: 400;
    color: var(--text);
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
}

.btn:hover {
    text-decoration: none;
}

.btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ===== Formulare ===== */

.form-group {
    margin-bottom: 1rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-formular);
    background-color: var(--grund-erhoben);
    background-clip: padding-box;
    border: 1px solid var(--linie-formular);
    border-radius: 0.25rem;
}

.form-control:focus {
    color: var(--text-formular);
    background-color: var(--grund-erhoben);
    outline: 0;
}

textarea.form-control {
    height: auto;
}

/* ===== Hilfsklassen ===== */

.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-white { color: #fff !important; }
.text-muted { color: var(--text-gedaempft) !important; }
.text-capitalize { text-transform: capitalize !important; }
.text-uppercase { text-transform: uppercase !important; }

.font-weight-bold { font-weight: 700 !important; }
.font-italic { font-style: italic !important; }

.d-block { display: block !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }

.bg-light { background-color: var(--grund-abgesetzt) !important; }
.border-top { border-top: 1px solid var(--linie) !important; }

.rounded { border-radius: 0.25rem !important; }
.rounded-circle { border-radius: 50% !important; }

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-thumbnail {
    padding: 0.25rem;
    background-color: var(--grund-erhoben);
    border: 1px solid var(--linie);
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
}

.list-unstyled,
.list-inline {
    padding-left: 0;
    list-style: none;
}

.list-inline-item {
    display: inline-block;
}

.list-inline-item:not(:last-child) {
    margin-right: 0.5rem;
}

.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.blockquote-footer {
    display: block;
    font-size: 80%;
    color: var(--text-gedaempft);
}

.blockquote-footer::before {
    content: "\2014\00A0";
}

/* Abstaende. Bootstrap-Stufen: 1 = .25rem, 2 = .5rem, 3 = 1rem,
   4 = 1.5rem, 5 = 3rem. */
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-2 { padding-top: 0.5rem !important; }

.p-4 { padding: 1.5rem !important; }