/**
THEME: COSINEX
 */

/**
Assets wie Schriften, Icons und Images
 */
@font-face {
    font-family: "Roboto-Regular";
    src: url("../fonts/Roboto-Regular.ttf") format("truetype")
}

@font-face {
    font-family: "Roboto-Medium";
    src: url("../fonts/Roboto-Medium.ttf") format("truetype")
}

@font-face {
    font-family: "Roboto-Light";
    src: url("../fonts/Roboto-Light.ttf") format("truetype")
}

@font-face {
  font-family: 'cosinex';
  src: url('../fonts/cosinex-Regular.woff2') format('woff2'),
       url('../fonts/cosinex-Regular.woff') format('woff'),
       url('../fonts/cosinex-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Verhindert unsichtbaren Text beim Laden */
}

/*
Icoonfonts
 */
@font-face {
    font-family: 'icomoon';
    src: url("../fonts/icomoon.ttf?81snogk") format("truetype"),
    url("../fonts/icomoon.woff?81snogk") format("woff"),
    url("../fonts/icomoon.svg?81snogk#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
}

/*
Variablen / Kunde
 */

:root {
    /* FONTS ALLGEMEIN */
    --font-family-base: "Roboto-Regular"; /* Allgemeiner Font */
    --font-family-headlines: "Roboto-Medium"; /* Nur fuer Headlines */
    --font-size-base: 0.875rem; /* 14px | Default Schriftgroesse des THEMES */
    --font-size-small: 0.6875rem; /* 11px */
    --font-color-base: #000; /* #000 */
    --font-line-height-base: 120%; /* Zeilenhoehe */

    /* DEFAULT ICON SIZE */
    --default-icon-size: 1.5rem; /* 24px Default Icon Size */

    /* HEADLINES */
    --font-border-left-headlines: 0.625rem solid #003865; /* 10px */
    --font-color-headlines: #003865; /* #003865; */
    --font-weight-headlines: normal; /* normal | bold | <number> */
    --font-style-headlines: normal; /* normal | italic | oblique */
    --font-line-height-headlines: 120%; /* Zeilenhoehe */
    --font-headlines-text-transform: none; /* none | uppercase | lowercase */
    --font-size-h1: 1.5rem; /* 24px */
    --font-size-h2: 1.375rem; /* 22px */
    --font-size-h3: 1.125rem; /* 18px */
    --font-size-h4: 0.875rem; /* 14px */

    /* BODY */
    --body-bg-color: #fff; /* Gradients gehen auch */

    /* BOX SHADOW */
    --box-shadow: 0.05; /* 0 = kein Schatten | 1 = maximale Sichtbarkeit */

    /* RADIUS */
    --default-border-radius: 0.3125rem; /* 0 kein Radius gilt fuer Buttons | DropDown Button | Eingabefelder */

    /* TEXT MARKIERUNG */
    --cursor-selection-bg-color: #003865;
    --cursor-selection-color: #fff;

    /* FOCUS */
    --focus-shadow-color: #003865;

    /* SCROLLBARS */
    --scrollbar-thumb-color: #003865;
    --scrollbar-bg-color: #ddd;

    /* BOXED OR FLUID */
    --layout-wrapper-boxed-width: 100%; /* 100% = fluid */
    --layout-wrapper-boxed-margin: 0 auto; /* 0 auto = mittig | 0 auto 0 0  = linksbuendig nur bei px | 0 0 0  auto = rechtsbuendig nur bei px */
    --layout-wrapper-box-shadow: none; /* Bsp. 0px 0px 35px 10px rgba(0,0,0, 0.3);

    /* LINKS */
    --link-normal-color: #003865; /* Allgemeine Linkfarbe */
    --link-normal-decoration: underline;
    --link-normal-weight: normal;
    --link-hover-decoration: none;

    /* BUTTONS */
    --button-default-font-size: 0.8125rem; /* 13px | max 16px */
    --button-default-text-transform: uppercase; /*  none | capitalize | uppercase | lowercase */
    /* normal */
    --button-default-color: #fff; /* Text-Icon Farbe */
    --button-default-bg-color: #003865; /* BG */
    /* hover */
    --button-default-color-hover: #fff;
    --button-default-bg-color-hover: #0077cb;
    /* focus */
    --button-default-color-focus: #fff;
    --button-default-bg-color-focus: #0077cb;

    /* DROPDOWN */
    /* normal */
    --dropdown-submenu-link-font-size: 0.875rem; /* 14px */
    --dropdown-submenu-link-color: #000;
    --dropdown-submenu-link-weight: normal;
    --dropdown-submenu-link-text-transform: none;
    /* hover */
    --dropdown-submenu-link-color-hover: #000;
    --dropdown-submenu-link-bg-color-hover: #f3f3f3;
    /* focus */
    --dropdown-submenu-link-color-focus: #fff;
    --dropdown-submenu-link-bg-color-focus: #0077cb;

    /* HEADER */
    --header-bg-color: #003865;
    /* Logo im Header */
    --header-logo-bg-color: #003865;
    --header-logo-min-width: 15.625rem; /* 250px */
    /* Header-Row (custom) */
    --header-miscellaneous-bg-color: #f5f6f8;
    --header-miscellaneous-vertical-align: flex-start; /*  flex-start | center | flex-end */

    /* HEADER-MENU  */
    --header-button-family-level-1: var(--font-family-base);
    --header-button-font-size: var(--button-default-font-size);
    --header-button-weight: normal;
    --header-button-text-transform: uppercase; /*  none | capitalize | uppercase | lowercase */
    --header-button-icon-size: 1.625rem; /* 26px */
    --header-button-height: 2.75rem; /* 44px |  Hoehe der Buttons im Header 1.Level */
    /* normal */
    --header-button-bg-color: #003865;
    --header-button-color: #fff;
    /* hover */
    --header-button-bg-color-hover: #003865;
    --header-button-color-hover: #fff;
    --header-button-text-decoration-hover: underline;
    /* focus */
    --header-button-bg-color-focus: #0077cb;
    --header-button-color-focus: #fff;
    --header-button-text-decoration-focus: underline;

    /* MAIN */
    --main-bg-color: #f5f6f8;

    /* MAIN-ROW  */
    --main-row-total-margin-padding: 1.875rem;

    /* MAIN CONTENT */
    --main-content-bg-color: #f5f6f8;
    --main-content-margin-top: 0;
    --main-content-padding: 0 0.9375rem 0.9375rem 0.9375rem; /* 15px */

    /* FOOTER */
    --footer-font-family: var(--font-family-base);
    --footer-height: 3.75rem; /* 60px */
    --footer-bg-color: #003865;
    --footer-font-size: 0.75rem; /* 12px */
    --footer-color: #fff;
    --footer-button-textdecoration: none; /* none | underline */
    --footer-button-textdecoration-hover: underline; /* none | underline */

    /* NAVIGATION VERTIKAL */
    /* Gilt fuer alle Level */
    --main-nav-bg-color: #fff; /* BG Nav */

    --menu-font-family: var(--font-family-base);
    --menu-width: 15.625rem; /* 250px */
    --menu-button-font-size: var(--button-default-font-size);
    --menu-button-color: #003865;
    --menu-item-border-top-color: #dadada;
    --menu-button-border-left-width: 0.625rem; /* 10px */

    /* Level 1 */
    /* normal */
    --menu-button-bg-color: #fff;
    --menu-button-border-left-color: #fff;
    --menu-button-text-transform: none; /*  none | capitalize | uppercase | lowercase */

    /* hover */
    --menu-button-bg-color-hover: #003865;
    --menu-button-border-left-color-hover: #003865;
    --menu-button-color-hover: #fff;

    /* focus */
    --menu-button-color-focus: #fff;
    --menu-button-bg-color-focus: #0077cb;
    --menu-button-border-left-color-focus: #0077cb;

    /* active */
    --menu-button-bg-color-active: #f5f6f8;
    --menu-button-border-left-color-active: #003865;
    --menu-button-color-active: #003865;
    --menu-button-font-weight-active: bold;

    /* Level 2 */
    /* normal */
    --sub-menu-button-bg-color: #fff;
    --sub-menu-button-color: #003865;
    --sub-menu-button-border-left-color: #003865; /* Sollte mit --menu-button-border-left-color-active gleich sein !!! */
    --sub-menu-button-text-transform: none;

    /* FORMS */
    --form-inputs-bg-color-focus: rgba(234, 239, 246, 1); /* BG bei focus input/select */

    /* TABELLE / PAGING */
    --pagination-currentpage-bg-color: #b64752; /* Aktuelle Seite */
    --pagination-currentpage-text-color: #fff;

    /* LOGIN / REGISTER PANEL */
    --login-box-shadow: 0.5;
    --login-wrapper-bg-color: #f9f9f9;
    --login-bottom-link-color: #000;
    --login-bottom-link-font-size: 0.75rem; /* 12px */

    /* TOGGLE */
    /* normal */
    --toggle-head-text-transform: none;
    --toggle-head-link-color: #000;

    /* hover */
    --toggle-head-bg-color-hover: #0077cb;
    --toggle-head-text-color-hover: #fff;

    /* focus */
    --toggle-head-bg-color-focus: #0077cb;
    --toggle-head-text-color-focus: #fff;

    /* Zustand open */
    --toggle-open-bg-color: #003865;
    --toggle-open-text-color: #fff;

    /* PROJECTBOX (ACHTUNG, WIRD HIER ALS NAV VERWENDET) */
    --projectbox-height: 3.4375rem; /* 55px */
    --projectbox-bg-color: #fff;
    --projectbox-text-color: #000;

    /* PROJECTBOX Buttons */
    /* normal */
    --projectbox-button-family-level-1: var(--font-family-base);
    --projectbox-button-font-size: 0.75rem; /* 12px */
    --projectbox-button-font-weight: normal;
    --projectbox-button-bg-color: #fff;
    --projectbox-button-color: #003865;
    --projectbox-button-text-transform: uppercase;

    /* focus */
    --projectbox-button-bg-color-focus: #0077cb;
    --projectbox-button-color-focus: #fff;

    /* Aktivkennzeichnung */
    --projectbox-button-bg-color-selected: #0077cb;
    --projectbox-button-color-selected: #fff;
}
/* Formular-Styles stehen im MODX-Template (registrierungsformular.template.html). */