/* --- OLTEX TRADING STYLE FÜR LISTMONK --- */

/* 1. Grundlegende Schriftart & Farbe */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    color: #000000;
}

/* 2. Container (Das Formular in der Mitte) */
.container {
    max-width: 600px !important;
    margin-top: 50px;
}

/* Überschriften clean und schwarz */
h1, h2, h3, .title {
    color: #000000 !important;
    font-weight: 700 !important;
    text-transform: uppercase; /* Alles GROSSBUCHSTABEN wie im Logo */
    letter-spacing: 1px;
    font-size: 24px !important;
}

/* Untertitel / Beschreibung */
.subtitle, p {
    color: #333333 !important;
    font-weight: 300;
}

/* 3. Eingabefelder (Input) - Eckig & Minimalistisch */
input.input, textarea.textarea, select.select {
    border: 1px solid #e0e0e0 !important;
    border-radius: 0px !important; /* Eckig, typisch Fashion */
    box-shadow: none !important;
    background-color: #f9f9f9;
    padding: 12px !important;
    height: auto !important;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* Wenn man ins Feld klickt: Schwarzer Rahmen */
input.input:focus, textarea.textarea:focus {
    border-color: #000000 !important;
    background-color: #ffffff;
}

/* 4. Der "Abonnieren" Button - Schwarz & Fett */
button.button.is-primary {
    background-color: #000000 !important; /* Schwarz */
    color: #ffffff !important; /* Weiß */
    border: 1px solid #000000 !important;
    border-radius: 0px !important; /* Eckig */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 30px;
    padding-right: 30px;
    height: 45px;
    transition: all 0.3s ease;
}

/* Button Hover-Effekt (Invertiert: Weiß mit schwarzem Rand) */
button.button.is-primary:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    cursor: pointer;
}

/* 5. Logo einbinden (Optional) */
/* Damit das Logo mittig und sauber sitzt */
.logo {
    display: block;
    margin: 0 auto 30px auto;
    max-width: 200px; /* Breite anpassen */
}

/* Links (Datenschutz etc.) */
a {
    color: #000000 !important;
    text-decoration: underline;
}
a:hover {
    color: #555555 !important;
    text-decoration: none;
}