/*
 * style.css — eigenes Design "oben drauf" auf Bootstrap 5.
 *
 * Die Farben oben als Variablen: wer nur die Farbe aendern will, muss NUR
 * hier oben etwas anpassen, nicht ueberall im Text suchen.
 * --brand-orange ist bewusst dieselbe Farbe wie im alten Kalender-Design
 * (alt: old/_kalender/ussis.conf.php, dort "#e57e2a") - kleine Bruecke
 * zwischen altem und neuem Auftritt, damit es sich noch nach "USSIS" anfuehlt.
 */
:root {
    --brand-orange: #e57e2a;
    --brand-orange-dark: #c8641a;
    --brand-navy: #1f2a37;
}

body {
    background-color: #f7f5f2;
}

/* Navigation oben: dunkel, damit sich Text/Logo in weiss klar abhebt */
.navbar {
    background-color: var(--brand-navy);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff !important;
}

.brand-sub {
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--brand-orange);
}

.navbar-nav .nav-link {
    color: #e7e7e7 !important;
}

.navbar-nav .nav-link:hover {
    color: var(--brand-orange) !important;
}

/* Hero-Bereich (grosser Aufmacher ganz oben auf der Startseite) */
.hero {
    background-color: var(--brand-navy);
    color: #fff;
    padding: 4rem 0;
}

.hero h1 {
    font-weight: 700;
}

.hero .lead {
    color: #d5d9dd;
}

.btn-brand {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    color: #fff;
}

.btn-brand:hover {
    background-color: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
    color: #fff;
}

/* Abschnitte der Startseite: etwas Luft zwischen den Bloecken */
.section {
    padding: 3.5rem 0;
}

.section-alt {
    background-color: #fff;
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: rgba(229, 126, 42, 0.12);
    color: var(--brand-orange);
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* Spamschutz-Feld in Formularen (siehe content/kontakt-termin.php): fuer
   Menschen unsichtbar, aber im HTML vorhanden - anders als "display:none",
   das manche Bots erkennen und ueberspringen. */
.hp-feld {
    position: absolute;
    left: -9999px;
}

footer {
    background-color: var(--brand-navy);
    color: #d5d9dd;
}

footer a {
    color: #fff;
}

footer h5 {
    color: var(--brand-orange);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}