/* ***************************************************************  BASIS LAYOUT */
html, body { margin: 0; height: 100vh; }
body > form { height: 100%; }
b, strong { font-weight: bold; }
/*
.appbase.dyn-page {}
.appbase.native-page {}

.appbase .apphead
    h1
.appbase .appdisplay
    h2
.appbase .appdisplay .pageitem-xyh
*/

/* GVO - FONTS:  */
@font-face { font-family: GvoFont; src: url("HelveticaLTStd-LightCond.otf") format("opentype"); }
@font-face { font-family: GvoFont; font-weight: bold; src: url("HelveticaLTStd-BoldCond.otf") format("opentype");}
@font-face { font-family: GvoFont2; src: url("HelveticaLTStd-Light.otf") format("opentype"); }


/* ***************************************************************  APP + ProtoTyp */
.appmenu { padding: 20px 0px; background-color:#fff; border-radius:7px; }
.appmenu .menuentry {  text-decoration:none; font-family: GvoFont; font-size: 1.2em; }
.appbase { font-family:GvoFont; font-size:1.1em; --bs-body-color: #555554;}
.appbase h1, .appbase h2, .appbase h3, .appbase h4 { font-weight:bold; }

.appmenu .menuHide { padding: 0px 0px 20px 20px;}
.appmenu .menuHide > img { width: 100px; }
.appmenu label { padding: 5px; color: #333; display: block; }
.appmenu select { margin: 5px; padding: 5px; width: 90%; }
.appmenu button { margin: 5px; padding: 5px; width: 90%; }

.appbase { display: flex; flex-direction: column; height: 100%; overflow: auto; }
.appbase > *:nth-child(1) { flex-grow:0; }
.appbase > *:nth-child(2) { flex-grow:4; }

.appbase .apphead { display: flex; padding: 10px; padding-top: 20px; padding-bottom: 5px; text-align: center; /*border-bottom: 2px dotted #444;*/ }
.appbase .apphead > div:nth-child(1) { flex-grow:0;}
.appbase .apphead > div:nth-child(2) { flex-grow:4;}
.appbase .apphead img { width:30px; }
/*.appbase .apphead h1 { margin-bottom:6px; }*/
.appbase .pageHeader { flex: 0 0 auto; padding: 20px; padding-top: 5px; overflow-y: visible; color: #fff; }

.layout-webview .appbase { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-items: flex-start; justify-content: space-between; height: 100%; overflow: auto; } 
.appbase .appdisplay { flex: 1 1 auto;  color: #fff; padding: 10px; overflow-wrap: break-word; overflow-y: auto; }
.appbase .appfooter { flex: 0 0 auto; overflow-y: visible; }

.appbase .pageHeader:not(:has(*)) { padding: 5px; }
.appbase .appfooter:not(:has(*)) { padding: 0; }
.appbase .appwebview { border: none; }



span.text-max-line-1 {
    display: block;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
span.text-max-line-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.textblock {
    font-size: 14px;
}

.single-line-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* ************* Native Seiten Input, Error */
.appbase div.input { background-color: #fff; padding: 2px 6px; border-radius:2px; margin-bottom:4px;}
.appbase div.input.big { padding: 6px 8px; border-radius:4px; margin-bottom:10px; }

.appbase input[type=text], .appbase input[type=password] { width:100%; border:0px;}
.appbase input[type=text]:focus, asdf.appbase input[type=password]:focus{ outline:none;}

.hideAfter5 { display:none; }
.appdisplay .errorOverlayTop { position:relative; }
.appdisplay .errorOverlayTop > div { position:absolute; z-index: 1001; left:0;right:0;margin:auto; top:20px; border:3px solid #808080; border-radius:5px; width: 400px; max-width:400px; padding:20px;background-color: #fff; color: #9b0000; font-weight:bold; }
.appdisplay .errorOverlayTop > div > p { width:100%; text-align:center; }

.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: rgba(var(--bs-body-color-rgb),.65);
    transform: scale(.85) translateY(-.9rem) translateX(.15rem);
}
.form-control { font-size:1.1em; }
.form-control > input, .form-control > select, .form-control > textarea { padding-bottom: 0px;}
.invalid-feedback { font-size:1.1em; }
.form-control[readonly] { background: #ddd; }
.form-control.readonly, .form-control:disabled { background: #ddd; }


/* ***************************************************************  PageItems */


/* ************* PageItems - allgemein  */

.appdisplay h1 { text-align: center; }
.appdisplay .padLrBig { padding-right:50px;  padding-left:50px; }
.appdisplay .padLr { padding-right:20px; padding-left:20px; }



/* ************* PageItems - Button */
.pageitem-button { 
    font-weight: bold;font-size: 1.5em; border-radius: 5px; text-decoration: none; display: inline-block; 
    margin-top: 5px;margin-bottom: 5px; text-align: center; align-content: center; border: none; 
    padding: 10px 10px 5px 10px;
}
/*
.pageitem-button:has(.title) { display: flex; }
.pageitem-button:has(.title) .title { flex-grow: 2; min-width:0px; }
.pageitem-button .icon { max-width:35px;}
.pageitem-button .icon img { width: 35px; height:35px; margin-top: -3px;}
 */       

.pageitem-button:hover:not(:disabled) { filter: brightness(110%); }
    .pageitem-button:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        pointer-events: none;
    }
.pageitem-button.full { width: 100%; padding: 10px 10px 5px 6px; }
.pageitem-button.notFull {  }



/* ************* PageItems - Image  */
.pageitem-image { text-align: center;}
    .pageitem-image img { max-height: 400px; max-width: 100%; }
    .pageitem-image.small > img { max-height:100px; max-width:100px; }
    .pageitem-image.middle > img { max-height:300px; max-width:300px; }
    .pageitem-image.max200 > img { max-height:200px; max-width:200px; }


/* ************* PageItems - ImagedHeadline  */
.pageitem-imagedHeadline {  margin-top:40px; margin-bottom:10px; position: relative;  } 

.pageitem-imagedHeadline h1 { 
    margin-bottom: 0; position: absolute; z-index: 2; 
    top: -15px;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}

.pageitem-imagedHeadline h1 > .headlineTextBox {
    display: inline-block;
    text-align: left;
}
.pageitem-imagedHeadline h1 .headlineText {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding: 8px;
}
.pageitem-imagedHeadline .image {
    width: calc(100% + 20px);
    max-height: 300px;
    overflow: hidden;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 15px;
    position: relative;
    z-index: 1;
}
.pageitem-imagedHeadline .image > img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.pageitem-tel {
    display: block;
    text-decoration: none;
}

.pageitem-mail {
    display: block;
    text-decoration: none;
}

/* ************* PageItems - Footer Bar */
.pageitem-footerbar { display: flex; flex-wrap: nowrap; align-items: stretch; justify-items: stretch; justify-content: space-between; margin: 10px 10px 5px 10px; gap: 10px; }

.pageitem-footerbar .pageitem-button.full {
    flex-grow: 1;
    font-size: 1.5em;
    padding: 10px 10px 5px 6px;
    min-width: 25%;
}

.pageitem-footerbar .pageitem-button.notFull {
    flex-grow: 0;
    font-size: 1.5em;
    padding: 10px 10px 5px 10px;
    min-width: 25%;
}

.pageitem-footerbar .pageitem-button.back-button {

}



/* **************** PageItem Card: BtnBox Anfragen, Mitarbeiter */
/* .boxButton -> .pageitem-card */

.pageitem-card { display: block; width:100%; color:#fff;  text-decoration:none;  padding:20px; padding-bottom:10px; border-radius:8px; border:1px solid transparent;  margin-bottom: 20px; font-size:1.2em; position:relative;}

.pageitem-card a { color: #fff; text-decoration: none; display: block; }
.pageitem-card h2 { font-size: 1.2em; }
.pageitem-card h4 { font-size: 1.1em; margin-top:20px; }

.pageitem-card .inBoxButton { display:flex; justify-content:end;  column-gap:10px;}
.pageitem-card .inBoxButton > a { background:#fff; color: #555554; border-radius:5px; padding: 10px 10px 5px 10px; margin-left:10px; text-decoration:none; max-width: 30ch; }
.pageitem-card .multiple-columns { display: flex; justify-content: end; column-gap: 15px; }
.pageitem-card .multiple-columns div { flex: 1 1 auto; }
.pageitem-card .multiple-columns div.indexer { flex: 0 0 4%; }
.pageitem-card ul { padding:0 0.83em; }

.inBoxButton .stateIcon { width: 20px; height: 20px; } 
.btn-ma-details { cursor:pointer; }



/* **************** PageItem Checkbox */
.pageitem-checkbox {
    display: flex;
    margin-bottom: 10px;
}
.pageitem-checkbox > label { flex-grow:2; }
.pageitem-checkbox > div { width:50px; }
.pageitem-checkbox > div > input { transform: scale(1.2);}

/* ************* PageItems - einsatzcard  + with-icon-leftRight */
.pageitem-einsatzcard {
    display: flex; gap: 2px;
    width: 100%; font-size: 1.2em; text-decoration: none; 
    padding: 20px 10px; margin-bottom: 20px;
    border-radius: 8px; border: 1px solid transparent;
}
    /* Das hier behebt die H2, die automatisch die volle Breite nehmen!*/
    .pageitem-einsatzcard > div { min-width: 0px; }
    .pageitem-einsatzcard.with-icons-leftright .icon { margin-top: -8px; width: 55px; min-width:55px; }
    .pageitem-einsatzcard.with-icons-leftright .icon .right { margin-left: -10px; }
    .pageitem-einsatzcard.with-icons-leftright .icon > img { width: 50px; height: 50px; }

    .pageitem-einsatzcard h2 { font-size: 1.1em; margin-bottom: 0px; }
    .pageitem-einsatzcard h4 { font-size: 1.1em; margin-bottom: 0px; }
    .pageitem-einsatzcard .status { text-transform: uppercase; }

    .pageitem-einsatzcard .icon-dze { padding: 5px; }
    .pageitem-einsatzcard .icon-dze img { width: 100%; height:40px; object-fit:contain; }

/* ************* PageItems - DownloadCard */
.pageitem-downloadcard {
    --link-color: #222;
    width: 100%; font-size: 1.2em; padding: 20px 10px; margin-bottom: 20px; border-radius: 8px; border: 1px solid transparent; 
}
.pageitem-downloadcard a { text-decoration: none; color: var(--link-color); }
.pageitem-downloadcard h2 { font-size: 1.2em; font-weight:bold; text-decoration:underline; margin-bottom:1px; }
.pageitem-downloadcard .entry { margin-top: 5px; }


/* **************** PageItem - MAP (Google + Navi) */
.pageitem-map {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    height: 300px;
}


/* **************** PageItem - Filter */

.filtering {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

    .filtering .criterium {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: stretch;
    }

    .criterium label {
        flex: 0 0 75px;
        font-size: 1.2rem;
        font-weight: 400;
        margin-right: 0.5rem;
    }

    .criterium .criterium-control {
        flex: 1 1 auto;
        display: flex;
    }

    .criterium *.criterium-control {
        color: #555554;
    }

    .criterium .search-button input {
        flex: 1 1 auto;
        padding: 0.375rem 0.25rem 0.375rem 0.6rem;
        font-size: 1.2rem;
        font-weight: 400;
        border: 1px solid #ced4da;
        border-radius: 0.25rem 0 0 0.25rem;
    }

        .criterium .search-button input::placeholder {
            color: #808080;
        }

    .criterium .search-button .glyph {
        flex: 0 0 auto;
        padding: 0.55rem 0.375rem 0.25rem 0.375rem;
        font-size: 1.2rem;
        font-weight: 400;
        border: 1px solid #ced4da;
        border-radius: 0 0.25rem 0.25rem 0;
        margin-left: -4px;
        background: #fff;
        color: #555554 !important;
    }

        .criterium .search-button input:focus, .criterium .search-button .glyph:focus {
            outline: none;
        }

    .criterium select {
        flex: 1 1 auto;
        padding: 0.7rem 2.25rem 0.375rem 0.25rem;
        font-size: 1.2rem;
        font-weight: 400;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        background: #fff;
        color: #555554;
    }

        .criterium select:focus {
            outline: none;
        }

    .criterium optgroup {
    }

    .criterium option {
        white-space: nowrap;
    }

    .noclick {
        pointer-events: none;
        cursor: default;
    }

    .smaller {
        font-size: 0.8em;
    }

/* **************** PageItem CheckboxList */
.pageitem-checkboxlist {
    --checked-background-color: #ddd;
    --unchecked-background-color: #eee;
}

    .pageitem-checkboxlist .option { color: #fff; border-radius: 8px; font-size: 1.4em; margin-bottom: 13px; padding: 10px; }
        .pageitem-checkboxlist .option input[type=checkbox] { transform: scale(2.3); margin-top:10px; margin-left: 10px;  }
        .pageitem-checkboxlist .option label { margin-left: 20px; }
        .pageitem-checkboxlist .option .subtext { margin-left: 38px; display:block }

    .pageitem-checkboxlist .option:has(input[type=checkbox]) { background-color: var(--unchecked-background-color); }
    .pageitem-checkboxlist .option:has(input[type=checkbox]:checked) { background-color: var(--checked-background-color);}

    .pageitem-checkboxlist .submit { display: flex; gap: 10px; width: 100%; margin-bottom:20px; }
    .pageitem-checkboxlist .submit > * { flex-grow: 1; }
        .pageitem-checkboxlist .submit .pageitem-button { padding: 5px 10px; transition: color 0.5s ease, opacity 0.5s ease; }
        .pageitem-checkboxlist .submit a.pageitem-button.disabled {
            color:#999; opacity:0.2; pointer-events:none; cursor:default;
        }




/* **************** ERWEITERUNG - Collabsable Card: Zusatz-Klasse für PageItem-card, pageItem-DownloadCard, .... */
.collapsable-card { position: relative; }
.collapsable-card > div { padding-right:40px; transition: max-height ease 0.8s; max-height: 2000px; overflow: hidden; }
.collapsable-card.collapsed > div { max-height: 60px;  }
    .collapsable-card .collapsable-action {
        cursor: pointer;
        display: block;
        position: absolute;
        /*
    width: 100%;  padding-right: 22px;margin-top: -15px; 
        */
        text-align: right;
        width: 200px;
        right: -33px;
        top: 0px;
    }
.collapsable-card .collapsable-action > img { width:50px; height:50px;  }
.collapsable-card .collapsable-action > img.open { display:none; }
.collapsable-card.collapsed .collapsable-action > img.open { display: inline; }
.collapsable-card.collapsed .collapsable-action > img.close { display: none; }

/* **************** ERWEITERUNG - With-Icons-leftRight = Icon left|middle|Icon right */
.with-icons-leftright { display: flex; gap:15px; }
    .with-icons-leftright > .middle { flex-grow: 2; min-width: 0px;}
    .with-icons-leftright > .icon { width: 35px; min-width: 35px; }
    .with-icons-leftright > .icon img { width: 35px; height: 35px; margin-top: -3px; }

/* **************** ERWEITERUNGEN - MarkDown * */
    
.markdown ul { padding: 0 0.83em; }
.markdown blockquote { 
    border: 0px solid transparent; border-radius: 15px;
    padding: 5px 15px; background-color: #eee; text-align: center; font-weight: bold; 
}

.markdown code { padding: 2px 5px; margin: 0;font-size: 85%; background-color: #808080; color: #fff; }
.markdown pre > code { padding: 5px; margin: 0; font-size: 85%; background-color: #808080; color: #fff; }
.markdown pre { overflow: hidden; }