/* =========================================================================
   base.css – Design-Tokens, Reset, Typografie, Buttons, Formularfelder,
   Utility-Klassen. Ersetzt die Basis-Teile von Bootstrap (kein externes CSS).
   Marke Moers/ENNI: grüne Button-Pille, blauer Akzent, Myriad Pro.
   ========================================================================= */

/* ---- Design-Tokens ---------------------------------------------------- */
:root {
    /* Hintergrund */
    --lightGray: #F9FCFF;
    /* Textfarben */
    --darkGray: #333333;
    --white: #ffffff;
    --darkBlue: #004F9F;
    --green: #A1CF21;
    /* Weitere Farben */
    --darkBlueHover: #3FC0F0;
    --borderColor: #DDE2E5;
    --fieldBorderColor: #9AA6AE;
    --buttonDisabled: #E6E6E6;
    --rowAlt: #EEEEEE;
    --navbarIdle: #C0C0C0;
    /* Buttons */
    --greenButtonGradient: linear-gradient(to right, #96C11F, #BFE553);
    --greenButtonGradientHover: linear-gradient(to right, #BFE553, #96C11F);
    /* Schatten */
    --greenButtonShadow: 0px 10px 20px rgba(149, 193, 31, 0.25);
    --greenButtonHoverShadow: 0px 15px 30px rgba(149, 193, 31, 0.6);
    --textInputFocusShadow: 0px 10px 20px rgba(0, 81, 158, 0.1);
    /* Rahmen */
    --otherButtonBorder: 1px solid rgba(0, 79, 159, 0.25);
    --otherButtonBorderHover: 1px solid #3FC0F0;
    /* Verläufe */
    --deepBlueGradient: linear-gradient(to right, #004F9F, #3F87D1);
    /* Maße */
    --radius: 8px;
    --field-height: 40px;
}

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

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

img {
    max-width: 100%;
}

/* ---- Typografie ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: "Myriad Pro Semibold", Arial, sans-serif;
    margin: 0.4em 0;
}

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; }

/* Überschriften-Rollen (spezifischer als h1..h6 → gewinnen ohne !important) */
.Heading1 {
    font-family: "Myriad Pro Bold", Arial, sans-serif;
    font-size: 24pt;
    margin: 0;
}

.Heading2 {
    font-family: "Myriad Pro Bold", Arial, sans-serif;
    font-size: 20pt;
    margin: 0;
}

.SubHeading {
    font-family: "Myriad Pro Bold", Arial, sans-serif;
    font-size: 16pt;
    margin: 0;
}

/* Hervorgehobenes Formular-Label (fett, normale Schriftgröße) */
.field-label {
    display: block;
    margin-top: 0.5em;
    font-family: "Myriad Pro Bold", Arial, sans-serif;
}

a {
    color: var(--darkBlue);
}

    a:hover {
        color: var(--darkBlueHover);
    }

/* ---- 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;
}

/* Erscheinungsbild aller Schaltflächen: grüne Gradient-Pille. */
input[type="submit"], input[type="button"], button {
    background: var(--greenButtonGradient);
    border: none;
    border-radius: 100px;
    box-shadow: var(--greenButtonShadow);
    color: var(--white) !important;
    font-weight: bold !important;
}

    input[type="submit"]:hover, input[type="button"]:hover, button:hover {
        background: var(--greenButtonGradientHover);
        border: none;
        box-shadow: var(--greenButtonHoverShadow);
        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 --------------------------------------------------- */
label {
    display: block;
    margin-top: 0.75em;
}

    .checkbox label {
        display: inline;
        margin-top: 0;
    }

input {
    font-size: 16px; /* verhindert Auto-Zoom auf iOS */
}

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(--darkBlue);
    }

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

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

/* Block-Formularfelder (Ersatz für .form-control aus Bootstrap). */
.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; }
.text-underline { text-decoration: underline; }
.is-hidden { display: none; }

.field-full { width: 100%; }

.emailBorder { border-bottom: 1px solid black; }