/* Hintergrundfarben übernehmen die normalen Farbwerte */

.color_cb_u_design { background-color: var(--unit_design) !important; }
.color_cb_u_digital { background-color: var(--unit_digital) !important; }
.color_cb_u_media { background-color: var(--unit_media) !important; }
.color_cb_u_marketing { background-color: var(--unit_marketing) !important; }


h3 {
    font-family: 'Unageo';
    font-weight: 300;
    font-size: 90px;
    line-height: 110%;
    letter-spacing: 0.2em; 
    color: var(--infinite_gray_dark);
	margin-top: 0;
    margin-bottom: 24px;
}

h4 {
    font-family: 'Unageo';
    font-weight: bold;
    font-size: 30px;
    line-height: 110%;
    color: var(--infinite_gray_dark);
	margin-top: 0;
    margin-bottom: 40px;
}

h5 {
    font-family: 'Unageo';
    font-weight: 800;
    font-size: 38px;
    letter-spacing: normal; 
    color: white;
}

/* ------------------------------------------------------------------------------------ 
   ______ ____  ____   ______ ____   ___     __  ___ ______ 
  /_  __// __ \/ __ \ / ____// __ \ /   |   /  |/  // ____/ 
   / /  / / / / /_/ // /_   / /_/ // /| |  / /|_/ // __/    
  / /  / /_/ / ____// __/  / _, _// ___ | / /  / // /___    
 /_/   \____/_/    /_/    /_/ |_|/_/  |_|/_/  /_//_____/    
                                                            
/* ------------------------------------------------------------------------------------ */




/* ------------------------------------------------------------------------------------ 
   __________  _   _______________   ________
  / ____/ __ \/ | / /_  __/ ____/ | / /_  __/
 / /   / / / /  |/ / / / / __/ /  |/ / / /   
/ /___/ /_/ / /|  / / / / /___/ /|  / / /    
\____/\____/_/ |_/ /_/ /_____/_/ |_/ /_/     
   
/* ------------------------------------------------------------------------------------ */

/* Spezifische Design-Anpassungen für den Content-Bereich */
#content_frame {
    background-color: var(--infinite_gray_light) !important;
    /* Hier könntest du ein spezifisches BG wählen */
    background-image: url('../graphics/agentur-infinite-contentframe-BG-ueber-uns.webp'); 
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 1100px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.flex_box_2col { 
    color: var(--infinite_gray_dark);
}

.flex_box_2col p { 
    margin-top: 0;
}

.flex_box_4col > div:has(.inquiry_box) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* ------------- KONTAKTFORMULAR ------------------------*/

.contact_form_headline {
    font-family: 'Unageo';
    font-weight: 800;
    font-size: 22px;
    line-height: 100%;
    color: var(--infinite_gray_dark);
    margin-bottom: 15px;
    text-align: left;
    text-transform: uppercase;
}

.contact_form_box {
    background-color: white;
    margin-bottom: 14px;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.contact_form_fillin_text {
    font-family: 'Unageo';
    font-weight: 300;
    font-size: 28px;
    line-height: 120%;
    color: var(--infinite_gray_dark);
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
    display: block;
}

/* Placeholder Styling für 20% Deckkraft */
.contact_form_fillin_text::placeholder {
    color: var(--infinite_gray_dark);
    opacity: 0.2;
}

/* Checkbox Bereich */
.checkbox_container_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
    width: 100%;
}

.checkbox_item {
    display: flex;
    align-items: center;
}

.contact_form_check_box {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    width: 40px;
    background-color: white;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    border: none;
    flex-shrink: 0;
}

/* Das Kreuz (Lightbox-Style) in der Checkbox */
.contact_form_check_box:checked::before,
.contact_form_check_box:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background-color: var(--infinite_gray_dark);
}

.contact_form_check_box:checked::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.contact_form_check_box:checked::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.contact_form_text {
    font-family: 'Unageo';
    font-weight: 300;
    font-size: 24px;
    line-height: 100%;
    color: var(--infinite_gray_dark);
}

/* Nachrichtenfeld */
.contact_form_box.textarea_box {
    min-height: 240px;
    max-height: 700px;
    align-items: flex-start;
    position: relative;
    resize: vertical;
    overflow: auto;
}

/* Custom Resize Dreieck unten rechts */
.textarea_box::-webkit-resizer {
    background-image: linear-gradient(135deg, transparent 50%, var(--infinite_gray_dark) 50%);
    background-size: 24px 24px;
}

.contact_form_sendbutton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 80px;
    margin-top: 44px;
    padding: 15px 25px;
    box-sizing: border-box;
    background-color: var(--infinite_tango);
    border: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.contact_form_sendbutton span {
    color: white;
	font-family: 'Unageo';
    font-weight: bold; 
    font-size: 34px;
    line-height: 110%;
    transition: transform 0.3s ease;
}

.contact_form_sendbutton:hover {
    box-shadow: 0 0 20px 5px var(--infinite_tango);
}

.contact_form_sendbutton:hover span {
    transform: scale(0.97);
}

.contact_form_infotext {
    font-family: 'Unageo';
    font-weight: normal;
    font-style: italic;
    font-size: 20px;
    line-height: 120%;
    color: var(--infinite_gray_dark);
    margin-top: 30px;
}

/* -- SPAM SCHUTZ mit unsichtbarem Feld --*/
.contact_form_hp {
    display: none !important;
    visibility: hidden;
}


/* ------------------------------------------------------------------------------------ 
   _____  ____   ______ ______ ____ ___     __      ______ ____   ___   __  ___ ______ 
  / ___/ / __ \ / ____// ____//  _//   |   / /     / ____// __ \ /   | /  |/  // ____/ 
  \__ \ / /_/ // __/  / /     / / / /| |  / /     / /_   / /_/ // /| |/ /|_/ // __/    
 ___/ // ____// /___ / /___ _/ / / ___ | / /___  / __/  / _, _// ___ // /  / // /___    
/____//_/    /_____/ \____//___//_/  |_|/_____/ /_/    /_/ |_|/_/  |_|/_/  |_//_____/   

/* ------------------------------------------------------------------------------------ */

.special_frame {
	background-color: var(--unit_marketing);
}