/* --- Custom Freshdesk Widget Styling */

/* Schriftart und -größe ändern */
#freshworks-container *,
.fw-widget-wrapper * {
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
}


/* --- Custom Freshdesk Form Styling */

.custom-freshdesk-form-wrapper {
    background-color: #fff;
    padding: 30px 35px;
    max-width: 650px;
    margin: 30px auto;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border: 1px solid var(--ast-border-color, #ddd);
    box-sizing: border-box;
    font-family: var(--ast-body-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
}

.custom-freshdesk-form-wrapper h2 {
    font-family: var(--ast-heading-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
    font-size: 1.8em;
    color: var(--ast-global-color-0, #000000);
    margin-bottom: 25px;
    margin-top: 0;
    text-align: center;
    font-weight: var(--ast-heading-font-weight, 600);
}

/* Einleitender Text */
.custom-freshdesk-form-wrapper > p:first-of-type {
    text-align: center;
    margin-bottom: 30px;
    color: #666;
}

/* --- Styling für spezielle Info-Blöcke (vereinfacht) --- */
.custom-freshdesk-form .form-info-block {
    /* background-color: transparent; */ /* Kein extra Hintergrund */
    /* border: none; */ /* Keinen normalen Rahmen */
    border-left: 3px solid var(--ast-global-color-1, #DE1A1A); /* <<< DEINE Akzentfarbe hier (oder Variable nutzen) */
    padding: 10px 15px;      /* Weniger Innenabstand */
    margin-bottom: 20px;     /* Weniger Abstand nach unten */
    border-radius: 0 4px 4px 0; /* Ecken nur rechts runden */
    font-size: 0.9em;        /* Leicht kleiner */
    color: #555;
}
/* Spezielles Styling für die "Angemeldet als..." Info */
.custom-freshdesk-form .logged-in-info {
    border: none; /* Keinen Rahmen für diese spezielle Info */
    padding: 0 0 10px 0; /* Nur Abstand nach unten, kein seitliches Padding */
    margin-bottom: 15px;
    font-style: italic;
    background: none; /* Sicherstellen, dass kein Hintergrund da ist */
    color: #666; /* Etwas dezenter */
}

.custom-freshdesk-form .form-info-block h4 {
   margin-top: 0;
   margin-bottom: 5px;
   font-size: 1em; /* Kleinere Überschrift im Info-Block */
   font-weight: bold;
   color: var(--ast-global-color-1, #DE1A1A); /* <<< DEINE Akzentfarbe für Titel */
}
.custom-freshdesk-form .form-info-block ul {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
}
.custom-freshdesk-form .form-info-block li {
    margin-bottom: 4px;
    font-size: 0.95em; /* Ggf. Listenelemente etwas kleiner */
}
/* --- Ende Info-Blöcke --- */


/* Fieldsets zur Gruppierung */
.custom-freshdesk-form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.custom-freshdesk-form .visually-hidden {
  position: absolute !important; height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}


.custom-freshdesk-form .form-group {
    margin-bottom: 20px;
}

.custom-freshdesk-form .form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9em;
    color: var(--ast-global-color-2, #54595F);
}

.custom-freshdesk-form .required-mark {
    /* Passe die Fallback-Farbe (#FF0000) oder die Variable an deine Akzentfarbe für Hinweise/Fehler an */
    color: var(--ast-global-color-4, #FF0000);
    margin-left: 4px;
    font-weight: bold;
}

.custom-freshdesk-form .form-input,
.custom-freshdesk-form .form-select,
.custom-freshdesk-form .form-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--ast-border-color, #ccc);
    border-radius: 5px; /* Einheitliche Eckenrundung */
    font-size: 1em;
    color: var(--ast-global-color-3, #333);
    background-color: var(--ast-comment-inputs-background, #f9f9f9);
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Fokus-Styles mit DEINER Akzentfarbe */
.custom-freshdesk-form .form-input:focus,
.custom-freshdesk-form .form-select:focus,
.custom-freshdesk-form .form-textarea:focus {
    /* Passe die Fallback-Farbe (#DE1A1A) oder die Variable an deine Akzentfarbe an */
    border-color: var(--ast-global-color-1, #DE1A1A); /* <<< DEINE Akzentfarbe */
    outline: none;
    /* Passe die RGBA Farbe an Ihre Akzentfarbe an! (Hier Beispiel für Rot) */
    box-shadow: 0 0 0 3px rgba(222, 26, 26, 0.15); /* <<< RGBA DEINER Akzentfarbe */
    background-color: #fff;
}

/* Readonly Felder */
.custom-freshdesk-form .form-input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
    opacity: 0.8;
}


.custom-freshdesk-form .form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* Beschreibungstexte unter Feldern */
.custom-freshdesk-form .form-field-description {
    display: block;
    margin-top: 6px;
    font-size: 0.85em;
    color: #777;
    font-style: italic;
}

.custom-freshdesk-form .form-button-wrapper {
    text-align: center;
    margin-top: 30px;
}

/* --- Button an DEINE Seite anpassen --- */
.custom-freshdesk-form .form-submit-button {
    /* background-color: var(--ast-global-color-1, #DE1A1A); */ /* Alternative mit Variable */
    background-color: #DE1A1A; /* <<< Beispiel: Roter Button - BITTE ERSETZEN! */
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 5px; /* Anpassen an deine Buttons */
    font-size: 1.05em;  /* Anpassen an deine Buttons */
    font-weight: 600;   /* Anpassen an deine Buttons */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: inline-block;
    text-decoration: none;
    line-height: normal;
}

/* Hover & Fokus Effekt für den Button - AUCH ANPASSEN */
.custom-freshdesk-form .form-submit-button:hover,
.custom-freshdesk-form .form-submit-button:focus {
    background-color: #B71616; /* <<< Beispiel: Dunkleres Rot - BITTE ERSETZEN! */
    color: #fff;
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15);
}
.custom-freshdesk-form .form-submit-button:active {
   transform: translateY(0px);
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* --- Ende Button Anpassung --- */


/* Styles für AJAX-Nachrichten */
.freshdesk-ajax-message {
    padding: 15px 20px;
    margin-bottom: 25px;
    border-radius: 5px;
    text-align: center;
    font-weight: 600;
    border: 1px solid transparent;
    display: none;
}
.freshdesk-ajax-message.loading {
    display: block; background-color: #e2e3e5; color: #41464b; border-color: #d3d6d8;
}
.freshdesk-ajax-message.success {
    display: block; background-color: #d1e7dd; color: #0f5132; border-color: #badbcc;
}
.freshdesk-ajax-message.error {
    display: block; background-color: #f8d7da; color: #842029; border-color: #f5c2c7;
}

/* Optionales mehrspaltiges Layout bleibt auskommentiert */

@media (min-width: 768px) {
  .form-row-name-email {
    display: flex;
    gap: 25px;
  }
  .form-row-name-email .form-group {
    flex: 1;
    margin-bottom: 20px;
  }
}

/* Spezielles Styling NUR für die "Angemeldet als..." Info */
.custom-freshdesk-form .logged-in-info {
    border: none; /* Keinen Rahmen */
    padding: 0 0 10px 0; /* Nur Abstand nach unten, kein seitliches/oberes Padding */
    margin-bottom: 15px; /* Abstand zum nächsten Element */
    font-style: italic; /* Kursiv, um es abzuheben */
    background: none; /* Keinen Hintergrund */
    color: #666; /* Etwas dezenter als normaler Text */
    font-size: 0.9em; /* Leicht kleiner */
}
/* Stelle sicher, dass das P-Tag darin keinen extra oberen Margin hat */
.custom-freshdesk-form .logged-in-info p {
    margin-top: 0;
    margin-bottom: 0;
}

.custom-freshdesk-form .form-select {
    height: 45px; /* <<< Passe diesen Wert an die Höhe deiner Inputs an! */
    line-height: normal; /* Stellt sicher, dass der Text vertikal zentriert ist (oft) */
    /* padding-right muss evtl. angepasst werden, um Platz für den Pfeil zu lassen */
    padding-right: 30px;
}

/* --- Ende Custom Freshdesk Form Styling --- */