/* 2026-11-31 */
/*https://newbedev.com/how-to-change-bootstrap-s-global-default-font-size*/

.subelement{
  padding-top: 10px;
}
#layout0 .subelement .maindata{
  box-shadow: none;
}
.masterdata .subelement .maindata {
  border-top: none;
  border-bottom: none;
}
.subelement .masterdata-form{
  border: solid 1px #aaa;
}
.masterdata .subelement .headline {
  border: solid 1px #aaa;
  background: transparent;
}

.k8-select-list{
  padding-left: 8px;
  padding-right: 8px;
  text-decoration: none;
  margin-bottom: 0;
}
.k8-select-list li{
  padding: .25rem;
  list-style-type: none;
}
.k8-select-list li:hover{
  background: #ccc;
  cursor:pointer;
}
.k8-select-list .active{
  background:#ddd;
}

.uncollapse-margins:before,
.uncollapse-margins:after
{
    content: "\00a0"; /* No-break space character */
    display: block;
    overflow: hidden;
    height: 0;
}

.mycontainerbg{
  background: #fff;
  padding-top: 0.1px;
  padding-bottom: 0.1px;
}

.masterdata{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.k8-box-shadow, #layout1 .masterdata, .mycontainerbg .masterdata{
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12)
}
#layout0 .maindata{
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12)
}

.k8-master-detail .tabulator{
  min-height:300px;
}

.k8-chartjs .headline{
  height: 58px;
}
.k8-element-main .headline{
  border-width: 1px 1px 0 1px; border-style: solid; border-color: #bbb;
  padding-left: 12px;
}
.k8-detail{
  min-height: 300px;
}

.masterdata .headline{
  /* border-width: 1px 1px 0 1px; border-style: solid; border-color: #bbb;*/
  background-color: #f3f5fa;
  padding-left: 12px;
}
.masterdata .footline{
  background-color: #f3f5fa;
}
.masterdata, .masterdata .headline{
  border:0;
}

.masterdata js_rec_head {
  display: flex;
}

.masterdata .k8-bottomline {height: 58px;}
.masterdata .k8-bottomline .btn {margin-top: 10px;}
.masterdata .k8-bottomline, .masterdata>div:nth-child(1){
  background-color: #f3f5fa;
  border:0;
}

.masterdata .headline>div:nth-child(1){
  padding-left:0
}


.masterdata .maindata, .k8-by-blue{
  border-top: 3px solid rgba(40, 58, 90, 0.9);
  border-bottom: 3px solid rgba(40, 58, 90, 0.9);
}

.masterdata-form{
  border:0;
}

@media only screen and (max-width: 768px) {
  .masterdata .container{
    padding-right: 0;
    padding-left: 0;
  }
  .masterdata {
    margin-top: 0;
    margin-bottom: 0;
  }
}


.k8-example-catalog .rec_container{
  margin-bottom: 16px;
}


/* catalog all */
.rec_head .k8_rec_control{
  padding:6px 10px !important;
}

/*.k8-detail .js_rec_edit, .k8-detail .js_rec_delete,
.k8-example-catalog .js_rec_delete, .k8-example-catalog .js_rec_edit,
.k8-line-catalog .js_rec_delete, .k8-line-catalog .js_rec_edit*/
.k8-detail .k8_rec_control,
.k8-example-catalog .k8_rec_control,
.k8-line-catalog .k8_rec_control,
.k8-nopag-catalog .k8_rec_control
{
  padding:0px 4px;
}
.k8-detail .js_rec_edit,
.k8-example-catalog .js_rec_edit,
.k8-line-catalog .js_rec_edit,
.k8-nopag-catalog .js_rec_edit{
 margin: 0px 8px 2px 1px;
}
.k8-detail .js_rec_delete, 
.k8-example-catalog .js_rec_delete,
.k8-nopag-catalog .js_rec_delete,
.k8-line-catalog .js_rec_delete{
 margin: 0px 0px 2px 8px;
}

.k8-line-detail .rec_container,
.k8-nopag-catalog .rec_container,
.k8-line-catalog .rec_container
{
  margin-top: 24px;
  margin-bottom: 24px;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12)
}
.k8-line-detail .rec_head, 
.k8-line-detail .rec_foot, 
.k8-nopag-catalog .rec_head, 
.k8-nopag-catalog .rec_foot,
.k8-line-catalog .rec_head, 
.k8-line-catalog .rec_foot
{
  border-bottom: 3px solid rgba(40, 58, 90, 0.9) !important;
}
.k8-line-detail .rec_head,
.k8-nopag-catalog .rec_head,
.k8-line-catalog .rec_head{
  background-color: #f3f5fa;
}
.k8-line-catalog .k8-filterform-wrapper .masterdata-form{
  border-bottom: 1px solid #bbb;
  margin-bottom: 0.1px;
}

/* masterdata */
.k8-line-catalog-tiles .masterdata-form{border-bottom: 1px solid #bbb;}
.k8-line-catalog-tiles .masterdata .headline{
  border:0;
}
/* k8-line-catalog-tiles */
.k8-line-catalog-tiles .rec_container{
  margin-top: 24px;
  margin-bottom: 24px;
}
.k8-line-catalog-tiles .rec_head, .k8-line-catalog-tiles .rec_foot{
  border-bottom: 3px solid rgba(40, 58, 90, 0.9) !important;
}
.k8-line-catalog-tiles .rec_head{
  background-color: #f3f5fa;
}
.k8-line-catalog-tiles .rec_records{
  margin-top: 16px !important; 
}
.k8-line-catalog-tiles .js_rec_pagination .row,.k8-line-catalog-tiles .rec_head{
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.35);
}

.k8-line-catalog-tiles .js_rec_pagination .row,.k8-line-catalog-tiles .rec_record{background-color: white;}
.k8-line-catalog-tiles .js_rec_pagination .row{
  background-color: white;
}
.k8-line-catalog-tiles .k8-title{
  width:100%;
}
/*.k8-line-catalog-tiles .card .k8-images .rec_container{border: 0 !important;}*/
.k8-line-catalog-tiles .card{
  background-color: white;
  margin-bottom: 16px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.35);
}
.k8-line-catalog-tiles .card:hover{
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}

.k8-line-tile{
  background-color: white;
  border-radius: 0;
  margin-bottom: 16px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.35);
}  
.k8-line-tile:hover{
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}


.k8-pagestiles3 .js_rec_head{
  background-color: white;
  border-radius: 10px;
}
.k8-pagestiles3 h1{margin-bottom: 0}

.k8-pagestile{
  background-color: white;
  border-radius: 10px;
  margin-bottom: 16px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.35);
}  
.k8-pagestile:hover{
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
}
.k8-pagestile img{
  border-radius: 10px 10px 0 0;
}

.k8-control-btn{
  padding:0px 4px;
}

.k8-pagestiles3 .js_rec_edit{
  padding:0px 4px; margin: 0 6px 2px 0
}

.k8-pagestiles3 .js_rec_delete {
  padding:0px 4px; margin: 0 0 2px 6px
}

.k8-pagestiles3 .k8-titleline{
  font-size: 1.5em; margin-bottom: 8px; display:flex; width:100%;
}

.k8-pagestiles3 .k8-title{
  height: 1.4em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:100%;
}


.k8-control-line{
  display:flex;
  align-items:center;
}
.k8-control-line .k8_rec_control:has(+ h1),
.k8-control-line .k8_rec_control:has(+ h2),
.k8-control-line .k8_rec_control:has(+ h3){
  height: 26px;
  padding: 0px 4px;
  margin-right: 8px;
  margin-bottom: 4px
}
.k8-control-line h1+.k8_rec_control,
.k8-control-line h2+.k8_rec_control,
.k8-control-line h3+.k8_rec_control{
  height: 26px;
  padding: 0px 4px;
  margin-left: 8px;
  margin-bottom: 4px
}
.k8-control-line .k8-title{
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.k8-control-line .k8-title-100{
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:100%;
}



.k8-headline0{
  background-color: #f3f5fa;
}
.k8-headline0>div{
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
@media (min-width: 768px) {
  .k8-headline0{
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
  }
}
.k8-headline0 form{
    padding-top: 0.25rem !important;
}
  
.k8-bg-stripes>div:nth-child(odd){
  background-color: #ffffff;
}
.k8-bg-stripes>div:nth-child(even){
  background-color: #f3f5fa;
}
.k8-bg-bright{
  background-color: #ffffff;
}
.k8-bg-dimmed{
  background-color: #f3f5fa;
}

.k8-justify{
  text-align: justify;
  text-justify: inter-word;
}

/* for background image 
 <div class="k8-ratio-2-1" style="background-image:url('http://placehold.it/800x200')"></div>
*/
.k8-ratio-2-1{
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 50% ; /* % of width, defines aspect ratio*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
}
.k8-ratio-3-2{
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 66% ; /* % of width, defines aspect ratio*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
}
.k8-ratio-4-3{
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 75% ; /* % of width, defines aspect ratio*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
}
.k8-ratio-1-1{
    position:relative;
    width: 100%;
    height: 0;
    padding-bottom: 100% ; /* % of width, defines aspect ratio*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
}


#cookie_request {
    position:absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    z-index: 100
}      
#cookie_request>div{
  background-color: white;
  border: 2px solid black;
}
/*
#overviewsmall .k8-chartjs{
  border: 1px solid #bbb;
  padding: 0 12px 12px 12px
}
*/
.k8-chartjs h1, .k8-chartjs h2, .k8-chartjs h3{
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
}


.k8-card{padding: 6px;height:100%;
       overflow:hidden;
}
.k8-card a{text-overflow:ellipsis;}

/*
#layout1 {min-height: 200px}
*/

.tabulator { font-size: 1rem; }
/* menu Options > Filter line: hides the header filters of the table */
.k8-nofilterline .tabulator-header-filter{display:none !important}

textarea{width: 100%; height: 100px}


.CodeMirror{
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

.table caption{
    padding-left: 8px;
    border: 1px solid #ddd;
    color: #fff;
    background-color: #7a52b3;
    font-size: 1.1em;
}

table {
    caption-side: top;
}

footer{
  color:#ffffff;  
  /*margin-top:60px;*/
  padding-top:60px;
  margin-bottom:30px;
  line-height: 1.5rem;
}
footer li, footer p{
  padding: 10px 0;
}
footer a{
  color: #ffffff;
}
footer a:hover{
  color: #47b2e4;
}

/* colors of the left navigation (navleft) */
:root{
  --navleft-width:300px;
  --navleft-background:#f3f5fa;
  --navleft-color:#212529;
  --navleft-link-color:#212529;
  --navleft-link-bg:transparent;
  --navleft-link-color-hover:#212529;
  --navleft-link-bg-hover:#e9ecef;
  --navleft-active-color:#212529;
  --navleft-active-bg:#cacbcc; /* #e9ecef; */
  --navleft-sub-line:#868e96;
  --navleft-divider-color:#ced4da;
  --navleft-divider-gap:.5rem .75rem;   /* above and beneath the divider line, left and right */
  --navtop-active-color:#ffffff;
  --navtop-active-bg:rgba(255,255,255,.2);
}
/* .k8-leftnav */
/* icon of a menu entry (k8menuentries.icon, k8MenuIcon in masterdata.js) */
.k8-menu-icon{vertical-align:-.125em}
img.k8-menu-icon,svg.k8-menu-icon{width:1em;height:1em}
i.k8-menu-icon,svg.k8-menu-icon{margin-right:.15em}
/* menu on top: the active entry (also the entry with the submenu of the active page) is bold, with a light background (like the active entry of the left navigation) */
.mynavi .navbar-nav > .nav-item > .nav-link.active{color:var(--navtop-active-color);background:var(--navtop-active-bg);font-weight:600;border-radius:6px}
/* menu on top (expanded navbar): the entry (icon + title) stays in one line */
@media (min-width: 992px){
  .mynavi .navbar-nav > .nav-item > .nav-link{white-space:nowrap}
}
/* layout 2: the class k8-layout2-body switches it on; without it the sidebar is not visible and the pages look as before */
.k8-leftnav-toggle{display:none}
.k8-layout2:has(> .k8-layout2-body) > .k8-leftnav-toggle{display:block;padding:.4rem 1rem;background:#f8f9fa;border-bottom:1px solid #dee2e6}
.k8-layout2:has(> .k8-layout2-body) > .k8-leftnav-toggle.k8-leftnav-toggle-moved{display:none}
/* the button in the top row, at the left edge of the window: the color of the text of the navbar */
header:has(> .k8-leftnav-btn){position:relative}
header > .k8-leftnav-btn{position:absolute;left:.75rem;top:28px;transform:translateY(-50%);z-index:1031}   /* top: set by js/menu.js (middle of the line of the brand) */
/* the navigation is open beside the content (wide screen): the menu on top starts where the content starts (the width of the navigation + the gap) */
@media (min-width: 992px){
  header.k8-leftnav-shown .mynavi{max-width:none;margin-left:0;margin-right:0;padding-left:240px !important}   /* + the gutter of the navbar (12px) = the x position of the content */
  header.k8-leftnav-shown .mynavi .navbar-brand{margin-left:0}
}
/* small screens: the brand makes room for the button */
@media (max-width: 1199.98px){
  header.k8-has-leftnav-btn:not(.k8-leftnav-shown) .mynavi .navbar-brand{margin-left:2.6rem}
}
.k8-leftnav-btn{display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;background:transparent;border:1px solid currentColor;border-radius:6px;padding:.15rem .55rem;line-height:1.5}
.k8-leftnav-btn:hover,.k8-leftnav-btn:focus{background:rgba(255,255,255,.18);color:inherit}
/* the sidebar is not visible; inside k8-layout2-body it is shown when it is open (.show). --k8-gap: the distance of the content to the navigation, to the top, to the right and to the bottom (the gutter of the container, 12px) */
.k8-leftnav{display:none}

.k8-layout2-body{display:flex;align-items:stretch;position:relative;--k8-gap:calc(var(--bs-gutter-x,1.5rem) * .5)}
.k8-layout2-body > .k8-leftnav.show{display:block;flex:0 0 240px;width:240px;background:var(--navleft-background);color:var(--navleft-color);border-right:1px solid #dee2e6}
/* the column beside the navigation is as high as the navigation: it has the background of the page and main fills it (with little content the color of the body would show) */
.k8-layout2-body > .k8-layout2-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--main-background-light,#fff)}
.k8-layout2-body > .k8-layout2-main > main{flex:1 1 auto}
/* the content (catalog, list, masterdata, listedit, chartjs): the same distance everywhere; example.css has 24px above and beneath and negative margins (mx-n3) */
.k8-layout2-body .container.k8-layout1{max-width:none;margin-left:0;margin-right:0;padding-left:var(--k8-gap);padding-right:var(--k8-gap)}
/* switched off for testing (text pages with the content directly in #layout0 touch the navigation without it):
.k8-layout2-body .k8-layout0{padding-left:var(--k8-gap);padding-right:var(--k8-gap)}
*/

/* a page with a title (.k8-headline0) and its content: the distance beneath the title and to the bottom is the same 12px as above the first element of the other pages (1.5rem in .k8-page-content) */
.k8-layout2-body .k8-page-content{padding-top:var(--k8-gap);padding-bottom:var(--k8-gap)}
.k8-layout2-body #layout0 > .mx-n3,.k8-layout2-body #layout1 > .mx-n3{margin-left:0 !important;margin-right:0 !important}
.k8-layout2-body #layout0 > .masterdata,.k8-layout2-body #layout1 > .masterdata,
.k8-layout2-body #html0 > .masterdata,.k8-layout2-body #html1 > .masterdata{margin-top:var(--k8-gap);margin-bottom:var(--k8-gap)}
.k8-layout2-body #html0 > .mx-n3,.k8-layout2-body #html1 > .mx-n3{margin-left:0 !important;margin-right:0 !important}
/* the editor page (masterdata/_editor.php) has its own container: same gaps as the other pages */
.k8-layout2-body .js_editorpage{margin-bottom:var(--k8-gap) !important}
.k8-layout2-body .js_editorpage > .masterdata{margin-top:var(--k8-gap)}
.k8-layout2-body .js_editorpage > .mx-n3,.k8-layout2-body .js_editorpage > .row{margin-left:0 !important;margin-right:0 !important}
.k8-layout2-body .k8-line-catalog .rec_container,
.k8-layout2-body .k8-nopag-catalog .rec_container,
.k8-layout2-body .k8-line-detail .rec_container{margin-top:var(--k8-gap);margin-bottom:var(--k8-gap)}
/* in a container of elements (.k8-compilation) the columns set the distance beneath (24px, masterdata.css): the lines beneath catalog and masterdata are on the same height */
.k8-layout2-body .k8-compilation .k8-line-catalog .rec_container,
.k8-layout2-body .k8-compilation .k8-nopag-catalog .rec_container,
.k8-layout2-body .k8-compilation .k8-line-detail .rec_container{margin-bottom:24px}
/* state collapsed: on a wide screen the navigation opens over the content (the content keeps its width) */
@media (min-width: 992px){
  .k8-layout2-overlay > .k8-layout2-body > .k8-leftnav.show{position:absolute;top:0;left:0;z-index:1030;width:var(--navleft-width);box-shadow:0 .5rem 1rem rgba(0,0,0,.15)}
}
/* small screens: the navigation is above the content, it starts closed (the script opens it for a wide screen) */
@media (max-width: 991.98px){
  .k8-layout2-body{flex-direction:column}
  .k8-layout2-body > .k8-leftnav.show{flex:0 0 auto;width:100%;border-right:0;border-bottom:1px solid #dee2e6}
  .k8-layout2-body .k8-leftnav nav.navbar{position:static;max-height:none}
  .k8-layout2-body > .k8-leftnav.k8-leftnav-initial{display:none}
}
.k8-leftnav nav.navbar{display:block;position:sticky;top:0;max-height:100vh;overflow-y:auto;padding:.75rem .5rem}
/* the background of focus / hover and of the selected entry is 2px lower than the entry: 1px less padding above and beneath, 1px margin keeps the distance of the entries */
/* .navbar-nav in the selector: a theme file (css/themes.json) colors ".navbar .nav-link" white for the menu on top, this must not reach the left navigation */
.k8-leftnav .navbar-nav .nav-link{color:var(--navleft-link-color);background:var(--navleft-link-bg);padding:calc(.45rem - 1px) .75rem;margin:1px 0;border-radius:6px}
.k8-leftnav .navbar-nav .nav-link:hover,.k8-leftnav .navbar-nav .nav-link:focus{background:var(--navleft-link-bg-hover);color:var(--navleft-link-color-hover)}
.k8-leftnav .navbar-nav .nav-link.active,.k8-leftnav .navbar-nav .nav-link.show{background:var(--navleft-active-bg);color:var(--navleft-active-color)}
.k8-leftnav .dropdown-toggle::after{float:right;margin-top:.7em}
/* a submenu (dropstart: Bootstrap shows the caret before the entry) has the caret at the right like the other entries, so the submenus start at the same x position */
.k8-leftnav .dropstart > .dropdown-toggle::before{display:none}
.k8-leftnav .dropstart > .dropdown-toggle::after{display:inline-block}
/* the submenu opens beneath the entry inside the list (no popup) */
.k8-leftnav .dropdown-menu{position:static !important;transform:none !important;float:none;border:0;background:transparent;box-shadow:none;margin:0 0 6px 12px;padding:0;min-width:0;border-left:2px solid var(--navleft-sub-line)}   /* the submenu: a vertical guide line beneath the icon of the entry, 6px distance beneath the block */
.k8-leftnav .dropdown-item{color:var(--navleft-link-color);background:var(--navleft-link-bg);border-radius:6px;white-space:normal;padding:calc(.35rem - 1px) .75rem;margin:1px 0}
/* the icon of an entry in a submenu is 10px right of the icon of the entry above (the line is 2px, the padding 8px) */
.k8-leftnav .dropdown-menu .dropdown-item{padding-left:.5rem}
.k8-leftnav .dropdown-item:hover,.k8-leftnav .dropdown-item:focus{background:var(--navleft-link-bg-hover);color:var(--navleft-link-color-hover)}
.k8-leftnav .dropdown-item.active{background:var(--navleft-active-bg);color:var(--navleft-active-color)}
/* divider line: an entry of k8menuentries with the title - (js/masterdata.js createbslis) */
.k8-leftnav .k8-nav-divider{list-style:none;margin:var(--navleft-divider-gap)}
.k8-leftnav .k8-nav-divider hr{margin:0;border-top:1px solid var(--navleft-divider-color);opacity:1}
header .navbar-nav > .k8-nav-divider{display:none}   /* not in the row of the menu on top */

@media print {

  .k8-leftnav,.k8-leftnav-toggle{display:none !important}

  /* Seitenformat und Ränder */
  @page {
    margin: 10mm 17mm;
  }

  /* Optional: Bootstrap-Gitter anpassen */
  .container {
    max-width: 100%;
  }

  /* Unerwünschte Teile ausblenden */
  nav, footer, .btn, .no-print {
    display: none !important;
  }

  /* Text- und Farboptimierung */
  body {
    color: #000;
    background: #fff !important;
  }
  
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
}

/* the headline of catalog (.rec_head), masterdata, listedit and chartjs (.headline) has the same height (58px like .k8-chartjs .headline);
   title and buttons are centered, the margins of the columns and of the title are 0 */
.masterdata .headline,
.k8-line-catalog .rec_head,
.k8-nopag-catalog .rec_head,
.k8-line-detail .rec_head{
  box-sizing: border-box;
  min-height: 58px;
  display: flex;
  align-items: center;
}
.masterdata .headline>div:first-child,
.masterdata .headline>div:last-child{
  padding-top: 0;
  padding-bottom: 0;
}
/* the headline of masterdata is 58px high and the line (3px) is the border of .maindata beneath it: the catalog has the line as border of the headline,
   so its box is 61px high (58px content + 3px line) and the line is at the same height */
.k8-line-catalog .rec_head,
.k8-nopag-catalog .rec_head,
.k8-line-detail .rec_head{
  min-height: 61px;
}
.k8-line-catalog .rec_head>div,
.k8-nopag-catalog .rec_head>div,
.k8-line-detail .rec_head>div{
  display: flex;
  align-items: center;
  align-self: stretch;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.k8-line-catalog .rec_head>div>form{
  width: 100%;
}
.masterdata .headline h1, .masterdata .headline h2,
.k8-line-catalog .rec_head h1, .k8-line-catalog .rec_head h2,
.k8-nopag-catalog .rec_head h1, .k8-nopag-catalog .rec_head h2,
.k8-line-detail .rec_head h1, .k8-line-detail .rec_head h2{
  margin: 0;
}

/* lineedit: the title bar (.k8-padding-01 in .rec_headline) like the headline of the other elements: same height, centered, background and line beneath of the headline (variables of the theme) */
.k8-flex-table .rec_headline > .k8-padding-01{
  box-sizing: border-box;
  min-height: 61px;   /* 58px + the line (3px) beneath, like the headline of masterdata and its .maindata */
  display: flex;
  align-items: center;
  padding-left: 12px;
  background-color: var(--headline-background, #f3f5fa);
  border-bottom: 3px solid var(--headline-border-color, rgba(40, 58, 90, 0.9)) !important;
}
.k8-flex-table .rec_headline > .k8-padding-01 h1,
.k8-flex-table .rec_headline > .k8-padding-01 h2,
.k8-flex-table .rec_headline > .k8-padding-01 h3{
  margin: 0;
}

/* a page whose content is a container of elements (.k8-compilation) at the end of .k8-page-content: the distance beneath is the margin beneath of the last element (24px), not also the padding of the page (48px) */
.k8-page-content:has(> .k8-compilation:last-child) {
  padding-bottom: 0;
}