/* ***************************************************************  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 { height: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; overflow-x:hidden; }
.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; }

.appbase {
    --bs-border-radius:13px;
    --btn-image-size: 30px;
    --app-border-radius:13px;
    --app-padding-top: 10px;
    --app-padding-bottom:5px;
}


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, .appfooter .padLr { padding-right:20px; padding-left:20px; }



/* ************* PageItems - Button */
.pageitem-button { 
    font-weight: bold;font-size: 1.5em; border-radius: var(--app-border-radius); text-decoration: none; display: inline-block; 
    margin-top: 5px;margin-bottom: 15px; text-align: center; align-content: center; border: none; 
    padding: var(--app-padding-top) 10px var(--app-padding-bottom) 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%;  }
.pageitem-button.notFull {  }
.pageitem-button.pri { }
.pageitem-button.sec {}
.pageitem-button.outline {}
.pageitem-button.tranparent {}
.pageitem-button.small { font-size: 1.2em; margin-top: 2px; margin-bottom: 2px; padding: 5px 10px 2px 10px; }

/* ************* PageItems - Big Button */
.pageitem-bigbutton-list { display: flex; flex-wrap:wrap; gap: 12px; align-items:stretch; margin-bottom:20px; }
.pageitem-bigbutton {
    flex: 0 0 calc(50% - 6px); width: calc(50% - 6px);
    padding: 20px; border: 1px solid transparent; border-radius: var(--app-border-radius);
    color: var(--colorWhite); background-color: var(--color1); text-decoration: none; 
}
.pageitem-bigbutton .content { display: flex; align-items: center; min-height:120px; max-height:100%;flex-direction:column;}
.pageitem-bigbutton:hover { filter: brightness(110%); }
.pageitem-bigbutton .image img { flex: 0 1 auto; width: 40px; height: 40px;margin-bottom:18px;  }
.pageitem-bigbutton .headline { flex: 0 0 auto; font-weight: bold; font-size: 1.45em; text-align:center; margin-bottom:7px; }
.pageitem-bigbutton .text { font-size: 1.05em; flex: 0 1 auto; overflow:hidden; text-align:center; }

/* ************* PageItems - Split Button */
.pageitem-splitbutton { display:flex;width:100%;gap:1px;}
.pageitem-splitbutton > .pageitem-button { flex:1; border-radius:0px; }
.pageitem-splitbutton > .pageitem-button:first-child { border-radius: var(--app-border-radius) 0 0 var(--app-border-radius); }
.pageitem-splitbutton > .pageitem-button:last-child { border-radius: 0 var(--app-border-radius) var(--app-border-radius) 0; }

/* ************* 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; flex-wrap:wrap; justify-content:end;  gap:10px;}
.pageitem-card .inBoxButton > a { 
    background:#fff; color: #555554; border-radius:5px; padding: 10px 10px 5px 10px; 
    margin-left:10px; text-decoration:none; 
    

}
.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; }
.pageitem-card.open-backcolor-card { background-color: var(--open-background-color); }
.pageitem-card.open-backcolor-card.collapsed { background-color: var(--closed-background-color); }

.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; }

    /*Wir Machen die Texte Manel Groß /klein damit das auch in der App gleich ist*/
    /*.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: #323232;
    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;
    --checkboxlist-text-color: #fff;
}

    .pageitem-checkboxlist .option { color: var(--checkboxlist-text-color); 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;
        }

/* **************** PageItem ExpandedFilter - EinsatzlisteFilter */
/* .pageitem-expandedfilter { } */
.pageitem-expandedfilter .filter-list { display:flex; gap:10px; margin-bottom:10px; }
.pageitem-expandedfilter .filter-list .filter-active {
    font-size:1.4em; background-color: var(--color1);color: var(--colorWhite);
    padding: 8px 10px 1px 15px; border-radius: var(--app-border-radius);
    display:flex; flex-wrap: nowrap; gap:10px;
    cursor: pointer;
}
.pageitem-expandedfilter .filter-list .filter-active > span { flex: 1 0 auto; }
.pageitem-expandedfilter .filter-list .filter-active > img { flex: 0 0 auto; height:25px;}

.expandedfilter-display div.disabled {
    opacity: 0.2;           /* ausgrauen */
    /*filter: grayscale(100%);*/
    pointer-events: none;   /* keine Maus-Events */
}

.expandedfilter-display h2 { color: var(--color1); padding: 5px 20px; border-bottom: 1px solid #ccc; margin-bottom:20px; }
.expandedfilter-display h2:not(:first-child) { margin-top:30px; }
.expandedfilter-display p { padding: 5px 20px; }
/* Alle, Meine, Bewerbungen */
.expandedfilter-display .form-check-input[type="radio"] {
    appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin-top: 0.2em;
    border: 2px solid #555554;
    border-radius: 50%;
    background-color: #fff;
}
.expandedfilter-display .form-check-input[type="radio"]:checked {
    background-color: #fff;
    border-color: #555555; 
}
.expandedfilter-display .form-check-input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color1);
}
.expandedfilter-display .form-check-input[type="radio"]:checked + .form-check-label {
    font-weight: bold;
}
.expandedfilter-display .form-check-input[type="radio"]:focus { box-shadow: none; }
.expandedfilter-display .form-check-input[type="radio"]:focus-visible { outline: 2px solid var(--color1); outline-offset: 2px; box-shadow: none; }
.expandedfilter-display .form-check-label { margin-top:2px; margin-left:6px; font-size:1.2em; }
.expandedfilter-display .form-check { margin-bottom:8px; }

/* Wochen, Tage */
.expandedfilter-zeit .btn-group { display: flex; margin-bottom:20px;}
.expandedfilter-zeit .btn-group > label { flex: 0 0 50%; background:#dfdfdf; color:var(--colorDark); font-size: 1.4em; border: none; padding: 10px 10px 5px 10px;  }
.expandedfilter-zeit .btn-group .form-check-input[type="radio"]:checked + label { background:var(--colorDark);}

/* Wochen */
.expandedfilter-zeit-week { max-height:216px; overflow-y:auto; }
.expandedfilter-display .expandedfilter-zeit-week .checkbutton input[type="radio"] { display: none; }
.expandedfilter-display .expandedfilter-zeit-week .checkbutton label { 
    cursor:pointer; border: 1px solid var(--colorDark); 
    border-radius: var(--app-border-radius); 
    padding: 10px 15px 5px 15px; font-size: 1.2em; width:100%;  
    display:flex; gap:10px;
    margin-bottom:10px;
}
.expandedfilter-display .expandedfilter-zeit-week .checkbutton label > *:nth-child(1){ 
    color:var(--color1);
    flex: 0 0 auto;
    font-weight:bold
}
.expandedfilter-display .expandedfilter-zeit-week .checkbutton label > *:nth-child(2){ 
    flex: 1 0 auto;
}
.expandedfilter-display .expandedfilter-zeit-week .checkbutton label > *:nth-child(3){ 
    flex: 0 0 auto;
}

.expandedfilter-display .expandedfilter-zeit-week .checkbutton input[type="radio"]:checked + label  { background: var(--colorDark); color: #fff; }

/* Tage */
.expandedfilter-display .expandedfilter-zeit-day .row { font-size: 1.2em; margin-bottom:10px;}
.expandedfilter-display .expandedfilter-zeit-day select:focus {  box-shadow:none; }

/* Tätigkeit*/
.expandedfilter-display .expandedfilter-taetigkeit > div { display: flex; flex-wrap: wrap; gap: 8px;padding: 5px 0px; }
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton { position: relative; } 
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton input[type="checkbox"] { position: absolute; opacity: 0; }
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 12px 20px 5px 20px;
    border: 1px solid #ccc;
    border-radius: var(--app-border-radius);
    background: #fff;
    color: var(--colorDark);
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton label::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid #999;
    border-radius: 50%;
    margin-top:-5px;
    margin-left: -8px;
    background: #fff;
}
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton input[type="checkbox"]:checked + label {
    border-color: var(--colorDark);
    background: var(--colorDark);
    color: #fff;
}
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton input[type="checkbox"]:checked + label::before {
    border-color: transparent;
    background: transparent;
}
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton input[type="checkbox"]:checked + label::after {
    content: "";
    position: absolute;
    left: 15px;
    top:12px;
    width: 15px;
    height: 15px;
    background:
        linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%);
    color: #fff;
}
.expandedfilter-display .expandedfilter-taetigkeit .checkbutton input[type="checkbox"]:focus-visible + label {
    outline: 2px solid var(--color1);
    outline-offset: 2px;
}


/* Radius */

.expandedfilter-display .expandedfilter-radius {
    margin-bottom:40px;
}
.expandedfilter-display .expandedfilter-radius label {
    display:inline-block;
    border-radius: var(--app-border-radius);
    background-color: var(--colorDark);
    color: #fff;
    padding: 5px 10px;
}
.expandedfilter-display .expandedfilter-radius .form-range::-webkit-slider-thumb {
    background: var(--colorDark);
    box-shadow:none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -8px;
}

.expandedfilter-display .expandedfilter-radius .form-range::-moz-range-thumb {
    background: var(--colorDark);
    box-shadow:none;
    width: 1.5rem;
    height: 1.5rem;
    margin-top: -8px;
}


/* **************** 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:var(--btn-image-size); height:var(--btn-image-size);  }
.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: var(--btn-image-size); min-width: var(--btn-image-size); }
    .with-icons-leftright > .icon img { width: var(--btn-image-size); height: var(--btn-image-size); margin-top: -3px; }

/* **************** ERWEITERUNGEN - MarkDown * */
    
.markdown ul { padding: 0 0.83em; }
.markdown p { margin-top: 20px; margin-bottom:0px; }
.markdown p:first-child { margin-top: 0px; }
.markdown blockquote, .markdown code {
    border: 0px solid transparent;
    border-radius: 18px;
    padding: 5px 15px;
    background-color: #eee;
    text-align: center;
    font-weight: bold;
}
.markdown > code { padding: 5px 10px 2px 10px; }
.markdown code { font-family: unset; font-size: unset; }
.markdown pre > code { padding: 10px 15px 7px 15px; }
.markdown pre { display: block; font-family: unset; font-size: unset; overflow:unset; margin-top:10px; }

/*
.markdown pre { overflow: hidden; }
    */