html { font-size: 100%; } /* 1rem = 16 px */

:root{
    --color-header-site:#245281;
    --color-header-site-dark:#1B3E62;
    --color-header-product:#DAEBFF;
    --color-header-product-green:#CBFFCB;
    --color-header-product-red:#FFADAD;
    --color-text-light:#555555;
    --color-body-bg:#F3F3F3;
    --color-text-std: #000000;
    --color-divider:#FFCD45;
    --color-divider2:var(--color-header-site-dark);
    --color-gray-light: #F0F0F0;
    --color-gray-medium: #DCDCDC;
    --color-warningbox-bg:#FFE9AD;
    --color-warningbox-accent:#785800;
    --color-warningbox-font:#785800;

    --font-size-base: 1rem;
    --font-size-text: .9rem;
    --font-size-sm: .9rem;
    --font-size-sm2: .7rem;
    --font-size-md: 1.05rem;
    --font-size-lg: 1.75rem;

    --header-h:60px;
    --footer-h:30px;
}


body{
	margin:0;
	height:100vh;
	display:flex;
	flex-direction:column;
	font-family:Arial,Helvetica,sans-serif;
	background:var(--color-body-bg);
}

header{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    background: linear-gradient(135deg, var(--color-header-site) 0%, var(--color-header-site-dark) 100%);
    color:white;
    padding: 1rem 1rem;
    flex-wrap:wrap;
}

.header-logo-container{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin-right:2rem;
}

header p.page-subtitle2{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 3px;
    margin-left:0;
    font-size:var(--font-size-sm2);
    /* font-style: italic; */
    color:var(--color-header-product);
}

.divider-bar{
  height:0;
  border-bottom:2px solid var(--color-divider);
  width:100%;
  margin:0;
  padding:0;
}

.divider-bar2{
  height:0;
  border-bottom:1px solid var(--color-divider2);
  width:100%;
  margin:0;
  padding:0;
}

#main-menu{
    display:flex;
    background: transparent;
    color:white;
    height: var(--footer-h);
    flex:1;
    margin-right:0rem;
}


.menu-item:not(:last-child){
    border-right: 1px solid rgba(255,255,255,.35);
}

.menu-item{
    flex:1;
    border:none;
    background:transparent;
    color:white;
    padding:.55rem;
    font-size:var(--font-size-sm);
    text-decoration:none;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
}

.menu-item:hover{
    background:var(--color-header-site-dark);
}

.menu-item.active {
    background:var(--color-header-site-dark);
    /*text-decoration: underline dotted;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-color: var(--color-divider);
    text-decoration-thickness: 1px;*/
    /*background: linear-gradient(135deg, var(--color-header-site-dark) 0%, var(--color-header-site) 100%);*/
}


.menu-item.active::before{
    content:"";
    display:inline-block;

    width:5px;
    height:8px;

    background:#fff;

    /* Dreieck nach rechts */
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);

    margin-right:.4rem;
    vertical-align:middle;
}


main{
  flex:1;
  display:flex;
  overflow:hidden;
  background:#e8e8e8;
}

.product{
    flex:1;
    margin:10px;
    background:white;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    overflow:hidden;
    transition:width .15s ease-in-out;
}

/*
.product-header{
    display:flex;
    align-items:center;
    background:var(--color-header-product);
    padding:.70rem;
    border-bottom:1px solid #CCE0FF;
}
*/
.product-header {
    background:var(--color-header-product);
    padding:.70rem;
    border-bottom:1px solid #CCE0FF;

    overflow: hidden;
    transition: max-height .3s ease,
                padding .3s ease,
                margin .3s ease;
}

article.hide-header .product-header {
    max-height: 0;
    padding: 0;
    margin: 0;
}

.product-header-green{
    display:flex;
    align-items:center;
    background:var(--color-header-product-green);
    padding:.70rem;
    border-bottom:1px solid #CCE0FF;
}

.product-header-red{
    display:flex;
    align-items:center;
    background:var(--color-header-product-red);
    padding:.70rem;
    border-bottom:1px solid #CCE0FF;
}

.product h2{
    margin:0;
    font-size:var(--font-size-md);
    color:var(--color-text-std);
}

.product h3{
  margin:0;
  font-size:var(--font-size-md);
  color:var(--color-text-std);
}

.tabs{
    display:flex;
    background:var(--color-gray-light);
    color:var(--color-text-light);
    font-size:var(--font-size-sm);
    justify-content:center;
    flex-shrink:0;
}

.tab{
    background:none;
    border:none;
    color:inherit;
    padding:.5rem .75rem;
    cursor:pointer;
    flex:1;
    text-align:center;
    text-decoration:none;
    transition:background .2s,transform .15s;
}

.tab:hover{
  background:var(--color-gray-medium);
}

.tab.active{
    background:var(--color-gray-medium);
    color:var(--color-text-std);
}

.content-box{
    flex:1;
    overflow-y:auto;
    padding:1rem;
    border-top:1px solid var(--color-gray-medium);
    padding-top: 0.5rem;
    line-height: 1.3;
}

.content-box p{
    font-size: var(--font-size-text);
}

.content-box .smallgray{
    text-align:left;
    font-size:var(--font-size-sm2);
    color:#555555;
}


.comparison-table{width:100%;border-collapse:collapse;margin-top:1rem;}
.comparison-table col:first-child{width:70%;}
.comparison-table col:nth-child(2),
.comparison-table col:nth-child(3),
.comparison-table col:nth-child(4){width:10%;}
.comparison-table th,
.comparison-table td{border:1px dotted var(--color-gray-medium);padding:.5rem .75rem;text-align:center;font-size: var(--font-size-text);}
.comparison-table th{background:var(--color-gray-light);font-weight:bold;}
.comparison-table th,
.comparison-table td:first-child {text-align:left;}
.comparison-table th:not(:first-child){text-align:center;}

.version-table {width:100%;border-collapse:collapse;margin-top:1rem;}
.version-table colgroup col:first-child { width:20%; }
.version-table colgroup col:nth-child(2) { width:80%; }
.version-table th,
.version-table td {border:0px dotted var(--color-gray-medium);padding:.2rem .2rem;font-size:var(--font-size-text);}
.version-table td:first-child{text-align:right;font-weight:bold;}
.version-table td:nth-child(2){ text-align:left;}

.download-table {width:100%;border-collapse:collapse;margin-top:1rem;}
.download-table col:first-child { width:50%; }
.download-table col:nth-child(2) { width:50%; }
.download-table th,
.download-table td {border:1px dotted var(--color-gray-medium);padding:.5rem .75rem;vertical-align:top;text-align:left;font-size:var(--font-size-text);}
.download-table th{background:var(--color-gray-light);font-weight:bold;}

.buy-table {width:100%;border-collapse:collapse;margin-top:1rem;}
.buy-table col:first-child { width:70%; }
.buy-table col:nth-child(2) { width:30%; }
.buy-table th,
.buy-table td {border:1px dotted var(--color-gray-medium);padding:.5rem .75rem;vertical-align:top;text-align:center;font-size:var(--font-size-text);}
.buy-table th{background:var(--color-gray-light);font-weight:bold;}
.buy-table td:first-child {text-align:left;}
.buy-table th:first-child {text-align:left;}
.buy-table th:not(:first-child){text-align:center;}


ul{
    font-size: var(--font-size-text);
}

.header-logo-small{
    height: 32px;
    width: 120px;
    object-fit: contain;
}

.warning-box{
    position: relative;
    background: var(--color-warningbox-bg);
    padding: .55rem;
    border-left: 3px solid var(--color-warningbox-accent);
    padding-left: 1.2rem;
    border-radius:0px;
    color:var(--color-warningbox-accent);;
    flex-basis: 100%;
}

.warning-box::before {
    content: 'i';
    position: absolute;
    top: 0px;
    left: -2px;
    width: .8rem;
    height: 1rem;
    background: var(--color-warningbox-accent);
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    line-height: 1rem;
    border-radius: 0px;
}

.info-box{
    position: relative;
    background: var(--color-body-bg);
    padding: .75rem;
    border-left: 3px solid var(--color-header-site);
    padding-left: 1.2rem;
    border-radius:0px;
    flex-basis: 100%;
}

.info-box::before {
    content: 'i';
    position: absolute;
    top: 0px;
    left: -2px;
    width: .8rem;
    height: 1rem;
    background: var(--color-header-site);
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    line-height: 1rem;
    border-radius: 0px;
}

pre {
    display: block;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

code {
    font-family: monospace;
}

.InputField {font-family:monospace;box-sizing:border-box;width:320px}
.InputFieldNumer {font-family:monospace;box-sizing:border-box;width: 60px;}

textarea {
    font-family: monospace;
    padding: 4px;
}

/* ---------- Print-Styles ----------------- */
@media print {
    body {
        display: block !important;
        height: auto !important;     /* unbegrenzte Höhe */
        margin: 0 !important;
    }

    body > * { display:none !important; }

    main {
        display:block !important;
        height:auto !important;
        overflow:auto !important;
        padding:1rem !important;
    }

    .product:not(.hidden) { display:block !important; }

    .tabs{display:none !important;}

    @page { margin: 1cm; }
}