/* Fallback-Schriften, falls Typekit (brandon-grotesque / kepler-std-display)
   nicht geladen werden kann (Domain-Bindung des Adobe-Fonts-Kits).
   "Brandon Grotesque" ist eine geometrische Sans, daher Futura/Avenir/Montserrat.
   "Kepler Std Display" ist eine moderne Serif, daher Georgia/Cambria. */
:root {
    --bs-root-font-size: 8px;
    --bs-body-font-family: "brandon-grotesque", "Futura", "Avenir Next", "Avenir",
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 88px 0 0 0;
    font-family: "brandon-grotesque", "Futura", "Avenir Next", "Avenir",
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "kepler-std-display", "Playfair Display", Georgia, Cambria,
        "Times New Roman", Times, serif;
    font-weight: 300;
}

.header {
    box-shadow: 0 32px 24px rgba(4, 26, 50, 0.15);
    position: fixed;
    height: 88px;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 2;
}

.header img {
    width: auto;
    height: 48px;
}

.content-area {
    padding: 96px 0 96px 0;
}

/* Einheitliche Abstände zwischen Kapiteln/Absätzen:
   ohne Override sind Bootstraps Listen-Margins kleiner als die der Absätze,
   sodass Abschnitte, die mit einer Liste enden, optisch näher am nächsten
   Überschrift-Block sitzen als Abschnitte, die mit einem Absatz enden. */
.content-area ul,
.content-area ol {
    margin-bottom: 4rem;
}

.sub-header h1 {
    color: #024693;
}

.form-control,
.form-select {
    border-color: rgba(2, 70, 147, 0.35);
    background-color: #fff;
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(2, 70, 147, 0.55);
}

.form-control:focus,
.form-select:focus {
    border-color: #024693;
    background-color: #fff;
}

/* File-Upload-Feld: das Browser-Button-Element des <input type="file">
   füllt mit unseren Theme-Paddings nicht die volle Eingabefeld-Höhe.
   Wir setzen das linke Container-Padding auf 0, sodass der Button bündig
   an die Innenkante anschließt, und binden Button-Höhe + Line-Height
   explizit an die Container-Höhe — ohne negative Margins (die einen
   1px-Versatz erzeugen würden). */
.form-control-lg[type="file"] {
    padding: 0 3rem 0 0;
    line-height: calc(6rem - 2px);
}

.form-control-lg[type="file"]::file-selector-button {
    margin: 0 1.5rem 0 0;
    padding: 0 2rem;
    height: calc(6rem - 2px);
    line-height: calc(6rem - 2px);
    vertical-align: top;
    background-color: rgba(2, 70, 147, 0.08);
    color: #024693;
    border: 0;
    border-right: 1px solid rgba(2, 70, 147, 0.35);
    font-family: inherit;
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.form-control-lg[type="file"]::file-selector-button:hover {
    background-color: rgba(2, 70, 147, 0.15);
}

.form-label {
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.form-label.optional::after {
    content: "optional";
    font-size: 1.8rem;
    text-transform: lowercase;
    font-weight: 300;
    color: #8e9195;
    margin-left: 8px;
    font-style: italic;
    letter-spacing: 0;
}

.form-check-label {
    font-weight: 300;
    cursor: pointer;
}

.form-text {
    font-size: 1.6rem;
    color: #8e9195;
    font-weight: 300;
    margin-top: 0.5rem;
}

.btn {
    height: 52px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.btn svg {
    width: 1.6em;
    height: 1.6em;
    flex-shrink: 0;
}

/* Bootstrap-Danger-Variante (rot) bewusst nicht im Theme — hier definieren. */
.btn-danger {
    background-color: #a1242a;
    color: #fff;
    border-color: #a1242a;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #871f24;
    color: #fff;
    border-color: #871f24;
}

.btn-link {
    height: auto;
    text-transform: none;
    padding: 0;
    font-weight: 400;
    text-decoration: underline;
}

.footer {
    background-color: #024693;
    color: #fff;
    padding: 80px 0;
}

.footer h4 {
    font-family: "brandon-grotesque", "Futura", "Avenir Next", "Avenir",
        "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: calc(26 / 16);
    text-transform: uppercase;
}

.footer-bottom {
    background-color: #041a32;
    color: #fff;
    height: 112px;
}

.footer-bottom a {
    color: #fff;
}

.logout-form {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px dashed rgba(2, 70, 147, 0.1);
}

/* --------------------------- Admin-Oberfläche --------------------------- */

.admin-table {
    font-size: 1.6rem;
    margin-bottom: 3rem;
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid rgba(2, 70, 147, 0.15);
    text-align: left;
    vertical-align: top;
}

.admin-table thead th {
    background-color: rgba(2, 70, 147, 0.08);
    color: #024693;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.3rem;
    font-weight: 700;
}

.admin-table tbody tr:hover {
    background-color: rgba(2, 70, 147, 0.04);
}

.admin-table code {
    font-size: 1.4rem;
    color: #024693;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.pagination .page-link {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: 1px solid rgba(2, 70, 147, 0.35);
    color: #024693;
    text-decoration: none;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.pagination .page-item.disabled .page-link {
    color: #8e9195;
    border-color: rgba(2, 70, 147, 0.15);
    pointer-events: none;
}

.pagination .page-item:not(.disabled) .page-link:hover {
    background-color: #024693;
    color: #fff;
}

/* Kompakte Buttons innerhalb der Admin-Tabelle (Aktionen-Spalte). */
.admin-table .btn {
    height: auto;
    padding: 0.5rem 1.2rem;
    font-size: 1.1rem;
    margin-right: 0.4rem;
}

.admin-table .admin-actions .btn {
    margin-bottom: 0.4rem;
}

/* Große, klare Darstellung einer einmalig gezeigten PIN. */
.pin-display {
    font-family: "Courier New", Courier, monospace;
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.6rem;
    color: #024693;
    background-color: rgba(2, 70, 147, 0.08);
    padding: 2rem;
    text-align: center;
    margin: 2rem 0 3rem;
    border: 1px dashed rgba(2, 70, 147, 0.35);
}