@import url(../resource/css/fonts.css);

/* BASISDEFINITIONEN - idealerweise nur hier Änderungen vornehmen */ 
:root, :host {
    /* URL des Logos und sein Seitenverhältnis. */
    --logo-source: url(../resource/image/logo/aldenhoven.svg);
    --logo-aspect-ratio: 1237 / 438;

    /* Oberer und rechter Abstand des Logos vom Header. */
    --logo-padding-top: 30px;
    --logo-padding-right: 30px;
    --logo-padding-left: 30px;

    /* Standardhöhe des Logos. Auf kleineren Bildschirmen wird das Logo kleiner (responsive) */
    --logo-max-height: 100;

    /* Hausfarbe Vorsicht Buttonhintergrund, also nicht gelb oder so wählen */ 
    --color-custom-primary: #C9E2EF;
}

/* Aldenhoven spezifisch wg. Hellblau */ 

 .modern .XButtonList:hover {
color:#000;
 }

/* navigationsleiste statt blau  eigene Farbe */

.XNavigationBar .active .xnav-view, .XNavigationBar .active-before .xnav-view {
background-color:#C9E2EF;
  } 

/* formcycle Logo ausgeblendet */
.xm-logo {
    display: none;
}

/* TYPOGRAFIE */ 

.xm-form.modern *, .modern .XPage * {
    font-family: "Open Sans", sans-serif;
}

DIV.xm-item-div {
    line-height:1.5rem;
}

.modern .CXPage .header h1 {
    font-weight:400;
    font-size:1.75rem;
}

/* zeilenabstand bei mobile bis 500px */
@media only screen and (max-width: 500px) {
  .modern .CXPage .header h1 {
    line-height:1.75rem;
    }
}

 /* TEST: dynamische Schriftgröße statt Pixel */
.modern .xm-item-div LABEL,.modern SPAN.required-star{
    font-size: 12px;
    font-size:.85rem;
}
.modern .xm-item-div .XItem {
    font-size:.9rem;
}


/* FARBEN */ 

.modern .XButtonList:hover,.modern .xm-progress-bar-percent-p {

background-color:var(--color-custom-primary);
}


/* Kopfbereich  und Logo */ 
.modern .xm-item-div.CXHeader  {
padding:var(--logo-padding-top) var(--logo-padding-left);

}

/* am besten ganzen Block tauschen */ 
.CXHeader::before {
    content: "";
    aspect-ratio: var(--logo-aspect-ratio);
    background-image: var(--logo-source);
    display: block;
    max-height: calc(1px * var(--logo-max-height));
    /* max-width: 100%;*/ /* hier auskommentiert */
    background-repeat: no-repeat;
    pointer-events: none;
    background-size: 100% auto; /* hier das calc(100%) entfernt*/
    transform: translateY(calc(1px * var(--logo-margin-top)));
    
    /* margin: 60px 60px calc(1px * var(--logo-margin-top)) 0;
Kein rechter Rand, wenn die Breite zu klein ist
    margin-right: calc(clamp(0px, 100% - 2px * var(--logo-margin-right) - 1px * var(--logo-aspect-ratio) * var(--logo-max-height), 1px) * var(--logo-margin-right)); */
}