/* RIDA Formulare: Modernes Theme */

:root {
            --rida-bg: #d8dee9;
            --rida-header: #1f2933;
            --rida-text: #333333;
            --rida-muted: #666666;
            --rida-border: #d0d0d0;
            --rida-primary: #4a90e2;
            --rida-primary-dark: #346ca8;
}


/* Hintergrund der Seite (Default hell) */
html, body{
   height: 100%;
   margin: 0;
   padding: 0;
   background: var(--rida-bg);
   color: var(--rida-text);
   font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

p {
  margin-top: 3px;
  margin-bottom: 3px;
}

.form-page {
    padding-bottom: 30px;
}

.form-page-header {
    padding-left: clamp(16px, 5vw, 52px);
    padding-right: clamp(16px, 5vw, 52px);
    padding-bottom: 40px;
    border-bottom: 2px solid var(--rida-bg);

    /* gleicht das Padding von #RION2ANGEBOT.R1 aus */
    margin-left: calc(-1 * clamp(16px, 5vw, 52px));
    margin-right: calc(-1 * clamp(16px, 5vw, 52px));
    margin-bottom: 35px;
    box-sizing: border-box;
}


/* Logo + H2 in einer Reihe */
.form-header-top {
    display: flex;
    align-items: center;
    gap: 0px;              /* Abstand zwischen Logo und H2 */
}


/* Logo-Container: gleiche Breite + Zentrierung wie das Formular */
.form-logo {
    width: 160px;
    margin-top: 40px;
    margin-left:-8px;
    padding-bottom: 23px;        /* Abstand zum Formular */
    box-sizing: border-box;
    text-align: left;            /* Logo linksbündig innerhalb des Containers */
}

/* Bildgröße im Logo */
.form-logo img {
    height: 35px;                /* nach Geschmack anpassen */
    width: auto;
    display: block;
}

/* H2 direkt neben dem Logo */
.form-header-top h2 {
    margin: 0;
    margin-bottom: -5px;
    margin-top: 24px;
    font-weight: 600;
    line-height: 1.4;
    font-size: 30px;
    color: #2C3345;  
}

/* H4 unterhalb von allem */
.form-subtitle {
    margin: 8px 0 0;        /* etwas Abstand nach oben */
    font-weight:500;
    line-height: 1.4;
    font-size: 16px;
    color: #57647E;         /* wie bisher */
}

h2,
h4 {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.form-container {
  width: 100%;
  text-align: left;
  margin-bottom: 0px;
  padding-left: clamp(16px, 5vw, 52px);
  padding-right: clamp(16px, 5vw, 52px);
  padding-bottom: 20px;
  padding-top: 20px;
}

.form-label-top {
   width: 100%;
   margin-left: 2px;
   margin-bottom: 14px;
   font-weight: 500;
   color: #2c3345;
}

.form-required {
    color: #dc2626;
}

.form-label-below {
    color: #57647e;
    font-size: 12px;
    margin-top: 3px;
    margin-left: 2px;
    display: block;
    word-break: break-word;
}


.A5CWLayout.form-checkbox {
    padding-top: 0px;
    padding-bottom: 0px;
}


.form-kommentar {
    font-size: 15px;
    padding-top: 1px;
}

.form-page-footer {
  width: 110%;
  text-align: left;
   border-top: 2px solid;
  border-color: var(--rida-bg);
  padding-left: clamp(16px, 5vw, 52px);
  padding-right: clamp(16px, 5vw, 52px);
  padding-bottom: 40px;
  padding-top: 40px;
}



.form-submit-button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 3em;
    min-width: 180px;
    padding: 0 1.25rem;

    font-size: 1em;
    font-weight: 500;
    font-family: inherit;

    color: #ffffff;
    background-color: #3B4252;        /* Grundfarbe */
    border: 1px solid #3B4252;
    border-radius: 999px;             /* schöne „Pillenform“ */

    margin: 24px auto 0;
    cursor: pointer;
    transition:
        background-color 0.15s ease-out,
        border-color 0.15s ease-out,
        box-shadow 0.15s ease-out,
        transform 0.08s ease-out;
    box-shadow: 0 4px 10px rgba(59, 66, 82, 0.3);
}

.form-submit-button:hover {
    background-color: #4C566A;        /* etwas heller beim Hover */
    border-color: #4C566A;
    box-shadow: 0 6px 14px rgba(76, 86, 106, 0.4);
    transform: translateY(-1px);
}

.form-submit-button:active {
    background-color: #2E3440;        /* minimal dunkler beim Klick */
    border-color: #2E3440;
    box-shadow: 0 3px 8px rgba(46, 52, 64, 0.4);
    transform: translateY(0);
}

.form-submit-button:disabled,
.form-submit-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}