/* =========================================================================
   base.css – Design-Tokens, Reset, Typografie, Buttons, Formularfelder,
   Utilities. Ersetzt die Basis-Teile von Bootstrap. Marke Offenbach/ESO:
   rot-orange #D93D00, Source Sans Pro.
   ========================================================================= */

/* ---- Design-Tokens ---------------------------------------------------- */
:root {
    --lightGray: #F9FCFF;
    --darkGray: #333333;
    --white: #ffffff;
    --ofColor: #D93D00;
    --darkOrange: #f39200;
    --borderColor: #DDE2E5;
    --fieldBorderColor: #9AA6AE;
    --buttonDisabled: #E6E6E6;
    --rowAlt: #EEEEEE;
    --navbarIdle: #333333;
    --navbarComplete: #A1CF21;
    --footerBg: #2D2D2D;
    --textInputFocusShadow: 0px 10px 20px rgba(0, 81, 158, 0.1);
    --radius: 8px;
    --field-height: 40px;
}

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

body, html {
    margin: 0;
    padding: 0;
    background-color: var(--white);
    color: var(--darkGray);
    font-family: "Source Sans Pro", Arial, sans-serif;
}

img {
    max-width: 100%;
}

/* ---- Typografie ------------------------------------------------------- */
h1 { font-size: 40pt; }
h2 { font-size: 32pt; }
h3 { font-size: 24pt; }
h4 { font-size: 18pt; }
h5 { font-size: 16pt; text-transform: uppercase; }
h6 { font-size: 14pt; text-transform: uppercase; }

.Heading1 {
    margin-right: 1em;
    width: 10em;
}

.Heading2 {
    margin-right: 1em;
    width: auto;
}

.SubHeading {
    font-size: 16pt;
    margin-right: 1em;
    width: 10em;
}

.ofColor { color: var(--ofColor) !important; }

a { color: var(--ofColor); }
a:hover { color: var(--darkOrange); }

/* ---- Buttons (Ersatz für .btn/.btn-default aus Bootstrap) ------------- */
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
}

/* Offenbach: solide rot-orange Buttons (kein Gradient). */
input[type="submit"], input[type="button"], button {
    background: var(--ofColor);
    border: none;
    border-radius: 100px;
    color: var(--white) !important;
    font-weight: bold !important;
}

    input[type="submit"]:hover, input[type="button"]:hover, button:hover {
        background: var(--ofColor);
        border: none;
        color: var(--white);
    }

    input[type="submit"]:disabled, input[type="button"]:disabled, button:disabled {
        background: var(--buttonDisabled);
        border: none;
        color: var(--white);
        cursor: not-allowed;
    }

/* ---- Formularfelder --------------------------------------------------- */
input {
    font-size: 16px;
}

input[type="text"], input[type="number"], input[type="email"] {
    border: 1px solid var(--fieldBorderColor);
    border-radius: var(--radius);
    height: var(--field-height);
    margin: 0.25em 0 0.5em;
}

    input[type="text"]:hover, input[type="number"]:hover, input[type="email"]:hover {
        border: 1px solid var(--darkOrange);
    }

    input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus {
        border: 1px solid var(--darkOrange);
        box-shadow: var(--textInputFocusShadow);
    }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form-control {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    background-color: var(--white);
    border: 1px solid var(--fieldBorderColor);
    border-radius: var(--radius);
}

textarea.form-control {
    height: auto;
    min-height: 120px;
    resize: vertical;
}

select.form-control {
    height: var(--field-height);
}

/* ---- Utility-Klassen (Ersatz für Bootstrap-Utilities) ----------------- */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.text-center { text-align: center; }

.emailBorder { border-bottom: 1px solid black; }
.aListElement { padding-left: 1em; padding-right: 1em; }
.bottstrapLeftAdjust { padding-left: 0 !important; }