/* =========================================================================
   EXT:form (TYPO3 v13) – Styling fuer das Standard-Markup
   Ablage: EXT:dn_sitepackage/Resources/Public/Css/form-extform.css
   Einbinden in Part2CssFileInclusion.typoscript, z. B.:
       file11 = EXT:dn_sitepackage/Resources/Public/Css/form-extform.css
   Die alte, Powermail-spezifische form.css kann entfallen.
   Markenfarbe: #C8A008
   ========================================================================= */

/* ---- Feld-Grundgeruest ------------------------------------------------- */
.form-group{
    margin-bottom:1.1rem;
}
.form-label{
    display:block;
    font-weight:600;
    margin-bottom:.3rem;
}
.form-label .required,
.form-check .required{
    color:#C8A008;
    margin-left:.15rem;
}

/* ---- Eingabefelder (Text, E-Mail, Textarea, Select, Date ...) ---------- */
.form-control,
.form-select,
.form-group select,
.form-group textarea,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="number"],
.form-group input[type="date"]{
    display:block;
    width:100%;
    padding:.55rem .75rem;
    font:inherit;
    line-height:1.4;
    color:#222;
    background-color:#fff;
    border:1px solid #c4c4c4;
    border-radius:4px;
    box-sizing:border-box;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.form-group textarea,
textarea.form-control{
    min-height:8rem;
    resize:vertical;
}
.form-control:focus,
.form-select:focus,
.form-group select:focus,
.form-group textarea:focus,
.form-group input:focus{
    outline:none;
    border-color:#C8A008;
    box-shadow:0 0 0 2px rgba(200,160,8,.2);
}

/* ---- Checkboxen / Radios ---------------------------------------------- */
.form-check{
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    margin-bottom:.4rem;
}
.form-check input{
    margin-top:.25rem;
    flex:0 0 auto;
}
.form-check-label{
    font-weight:400;
    margin:0;
}

/* ---- Beschreibungen & Fehler ------------------------------------------ */
.form-text{
    font-size:.88em;
    color:#666;
    margin-top:.25rem;
}
.form-group.has-error .form-control,
.form-group.has-error .form-select,
.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select{
    border-color:#c0392b;
}
.error,
.error.form-text{
    color:#c0392b;
    font-size:.9em;
}

/* ---- Aktionen / Buttons ------------------------------------------------ */
.actions{
    margin-top:1.4rem;
}
.form-navigation .btn-toolbar{
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
}
.form-navigation .btn-group{
    display:inline-flex;
    gap:.6rem;
}
.form-navigation .btn{
    display:inline-block;
    cursor:pointer;
    font:inherit;
    line-height:1.2;
    border:0;
    border-radius:4px;
    padding:.65rem 1.6rem;
    transition:background-color .15s ease;
}
.form-navigation .btn-primary{
    background-color:#C8A008;
    color:#fff;
}
.form-navigation .btn-primary:hover,
.form-navigation .btn-primary:focus{
    background-color:#a8860a;
}
.form-navigation .btn-cancel{
    background-color:#e2e2e2;
    color:#222;
}
.form-navigation .btn-cancel:hover{
    background-color:#d2d2d2;
}

/* ---- Honeypot (Spamschutz) sicher verstecken -------------------------- */
.form-group.hidden,
.hidden > .form-group{
    display:none !important;
}

/* ---- Feldgruppen (Fieldset/Legend) ------------------------------------ */
.tx-form fieldset,
form[id^="BerggasthofAnfrage"] fieldset,
.form-group ~ fieldset,
fieldset{
    border:0;
    margin:0 0 1.75rem;
    padding:0;
    min-width:0;
}
fieldset > legend,
legend{
    display:block;
    width:100%;
    float:none;
    font-weight:700;
    font-size:1.15em;
    margin:0 0 .9rem;
    padding:0 0 .3rem;
    border-bottom:2px solid #C8A008;
}
