/************************************************************************************/ 
/* 6KA Softwareentwicklung und Digitalisierung                                      */
/* https://6ka-digital.com                                                          */
/*                                                                                  */
/* forms.css v1.0.1 - 03.05.2026                                                    */
/************************************************************************************/

@layer forms {

    .form-group                                     {   margin: 0 0 2rem 0;
                                                        display: flex;
                                                        flex-direction: column; }

    .form-group-button                              {   display: flex;
                                                        gap: .5rem;
                                                        max-width: 40rem; }

    .form-group-button > button                     {   flex: 1 1 0; }                                                        

    .form-label                                     {   display: block;
                                                        font-weight: 500; 
                                                        margin-bottom:.4rem; }

    .form-label .label-info                         {   margin-left: .25rem;
                                                        font-size: .75rem;
                                                        font-weight: 300; }
                                                        
    .form-control-error,                                                         
    .form-control                                   {   max-width: 40rem; 
                                                        border-bottom: 1px var(--primary-green) solid; 
                                                        border-left: 1px var(--primary-green) solid;
                                                        border-right: 1px var(--primary-green) solid; 
                                                        color: var(--primary-black);
                                                        padding: .5rem;
                                                        line-height: 1.2;
                                                        font-weight: 500; } 
                                                        
    .contact-accent                                 {   max-width: 40rem; }

    .form-help                                      {   max-width: 40rem;
                                                        margin-top: .5rem; } 

    .formbutton-save,
    .formbutton-break,                                                        
    .formbutton                                     {   display: inline-flex;
                                                        align-items: center;
                                                        justify-content: center;
                                                        padding: .6rem 1rem;
                                                        border-radius: 6px;
                                                        border: 1px solid transparent;
                                                        font-weight: 500;
                                                        cursor: pointer;
                                                        text-align: center;
                                                        max-width: 40rem;
                                                        color: var(--primary-white); }
                                                        
    .formbutton-save                                {   background-color: var(--primary-green); }                                                        
    .formbutton-break                               {   background-color: var(--primary-grey1); }

    .form-confirmation-msg                          {   max-width: 40rem; }

    /** Fehlerbehandlung **/
    .form-errmsg-error, 
    .form-errmsg                                    {   display: none;
                                                        margin-top: 0rem;
                                                        max-width: 40rem;
                                                        background-color: var(--primary-red2);
                                                        padding: .5rem;
                                                        color: var(--primary-red);
                                                        border-bottom: 1px var(--primary-red) solid; 
                                                        border-left: 1px var(--primary-red) solid;
                                                        border-right: 1px var(--primary-red) solid;
                                                        border-radius: 0 0 8px 8px;
                                                        font-weight: 500;
                                                        font-size: 1rem; }    
                                                        
    .form-errmsg-error                              {   display: block; }

    .form-control-error                             {   display: block;
                                                        border-bottom: 1px var(--primary-red) solid; 
                                                        border-left: 1px var(--primary-red) solid;
                                                        border-right: 1px var(--primary-red) solid; }

    .form-head-errmsg0, 
    .form-head-errmsg1                              {   display: none;
                                                        margin: 0 0 1rem 0;
                                                        max-width: 40rem;
                                                        border: 1px solid var(--primary-red);
                                                        background-color: var(--primary-red);
                                                        color: var(--primary-white);
                                                        border-radius: 8px;
                                                        padding: 1rem; }

    .form-head-errmsg1                              {   display: flex; 
                                                        align-items: center;}                                                        

    .form-head-errmsg1::before                      {   content: '';
                                                        width: 2rem;
                                                        height: 2rem;
                                                        margin-right: .5rem;
                                                        background-size: contain;
                                                        background-repeat: no-repeat;
                                                        background-position: center; 
                                                        background-image: url(icons/symb_ffffff_stop.svg); }                                                                                                                   

    /* 1. Die Standard-Checkbox (selbst gebaut) */
    /* globale Checkbox einrichten */
    .global-checkbox,
    .global-checkbox-error                          {   appearance: none; 
                                                        -webkit-appearance: none; 
                                                        width: 20px;
                                                        height: 20px;
                                                        margin: .2rem 0 0 0; /* Das Margin aus der gelöschten Regel hierher gerettet */
                                                        flex-shrink: 0; /* Verhindert, dass das Grid die Box quetscht */
                                                        border: 1px solid var(--primary-grey2); 
                                                        border-radius: 4px; 
                                                        background-color: var(--primary-white);
                                                        cursor: pointer;
                                                        position: relative;
                                                        display: inline-block;
                                                        vertical-align: middle; }

    /* 2. Der angehakte Zustand (Das Häkchen) */
    .global-checkbox:checked,
    .global-checkbox-error:checked                  {   background-color: var(--primary-green); }

    /* 3. DER PROFI-HAKEN (Gezeichnet aus CSS-Linien, niemals ein Emoji!) */
    .global-checkbox:checked::after,
    .global-checkbox-error:checked::after           {   content: ""; /* Kein Text mehr! */
                                                        position: absolute;
                                                        left: 6px;
                                                        top: 2px;
                                                        width: 6px;
                                                        height: 12px;
                                                        border: solid var(--primary-white); /* Hier ist das Weiß! */
                                                        border-width: 0 2px 2px 0; /* Nur unten und rechts eine Linie malen */
                                                        transform: rotate(45deg); /* Das L-Stück um 45 Grad kippen = Haken! */ }


    /* 3. IHR FEHLERFALL (Der rote Rahmen aus dem Controller!) */
    .global-checkbox-error                          {   border: 1px solid var(--primary-red3) !important; }                                                        
}