@page { size: A4 portrait; margin:0 }

html {
    background: #888;
    margin:0;
    padding:0;
}

.row { 
    display: table;
    width: 100%;
    table-layout: fixed;
}

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 0;
    padding: 2.5mm;
}


 .no-print {
    display: none !important;
}

.startseite .inhalt {
    text-align: center;
}

.titelbild {
    width: 19.3cm;
    height: 19.3cm;
}

.headline-start {
    font-size:39pt;
    line-height:40pt;
    margin: 20px 0 10px 0;
}



.seite { 
    width: 100%; 
    page-break-after: always; 
    position: relative;
    page-break-after: auto !important;
    box-shadow: none !important;
}


.row { display: table; width: 100%; table-layout: fixed; }

table { border-collapse: collapse; width: 100%; }
th, td {  padding: 2.5mm; }


 .no-print { display: none !important; }


@media screen {
  .page {
    /* width: 210mm;
    height: 297mm; */
    margin: 0px auto;
    padding: 0mm;
    background: #fff;

  }

  body {
   width: 21cm;
   height: 29.7cm;
   background: #FFF;
   position: relative;
   margin:0 auto;
   padding:0;
   font-family:Arial, Helvetica, sans-serif;
   box-sizing: border-box;
}
}

@media print {
  .page {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    box-shadow: none;
    position:relative;
  }
}

.page:last-of-type { page-break-after: auto !important; }


.header-right { min-width: auto !important; }

.header-table, .header-table tr, .header-table td {
    background-color:transparent!important;
    border:0!important;
}

.header-table {
    width: 200mm;
}


.header-table td.right {
    text-align: right;
}



.contents-table{
  width: 183mm;
  border-collapse: collapse;
  table-layout: fixed;
}
.contents-table td{
  vertical-align: top;
  padding: 0;
  border: 0;       
}
.contents-table .spacer{
  width: 6mm;  
}

.contents-col .section{ margin: 0 0 2.5mm 0; }
.contents-col h2{ margin: 0 0 1mm 0; font-size: 11pt; line-height: 1; }
.contents-col ul{ margin: 0; padding-left: 0; list-style: none; }
.contents-col li{ margin: 0 0 0.8mm 0; }

.dots{
  display: inline-block;
  border-bottom: 0.2mm dotted #999;
  transform: translateY(-1.2mm);
  margin: 0 2mm;
}



.carousel-container {
    overflow: hidden; 
    width: 21cm; 
    height: 29.7cm;
    position: relative; 
}

.carousel {
    display: flex; 
    transition: transform 0.3s ease-in-out; 
}

.seite {
    min-width: 100%; 
    box-sizing: border-box;
    page-break-after: always; 
    position: relative;
    background-color: #fff;
}

.startseite table, .startseite th, .startseite tr, .startseite td {
    border: 0!important;
    text-align: center;
}


#button-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
}


button, input, .download-btn {
    padding: 10px 20px;
    font-size: 20px;
    font-weight:bold;
    background-color: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

button:hover, .download-btn:hover {
    background-color: #222;
}

.row-body-start {
    background-color:#FFF!important;
    text-align: center;
}

.footer-start {
    text-align:center;
}

.page {
    position: relative;
    overflow: hidden;
    box-sizing: content-box;
}
.page-inner {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
}


header {
    display: flex;
    width: 100%;
    height:3cm;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(207, 14, 14);
    color: #fff;
    box-sizing: border-box;
    border-top: 1px solid #000;
    position: relative;
    padding: 0 20px;
}

#startseite header {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:4.5cm;
    margin-bottom:0.5cm;
}

#startseite h1 {
    font-size: 180%;
    line-height: 1.1;
    margin: 5px 0 7px 0;
    text-transform: uppercase;
}

#startseite h2 {
    font-size: 140%;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

#startseite section {
    height:19cm;
    margin-bottom:0.5cm;
}

#startseite section img{
    width:21cm;
}

#startseite footer {
    flex-direction: row;
    height:5.2cm;
    background-color:#fff;
}

#startseite footer img{
    flex-direction: row;
    background-color:#fff;

}

.header-left {
    flex: 1;
    text-align: left;
}

.header-center {
    flex: 1;
    text-align: center;
}

.header-right {
    flex: 1;
    min-width: 19cm;
    text-align: right;
}

.page-number {
    font-size: 24px;
    font-weight: bold;
    margin: 9mm 0 2mm 0;
}

.headline {
    font-size:14px;
}

.para {
    font-size:14px;
}

#headline-2 {
    font-size:180%;
    line-height:1.1;
    margin: 9mm 0 2mm 0;
    text-transform: uppercase;
}

.subline {
    font-size: 140%;
    line-height:1.1;
    margin: 0;
}


.inhalt-a {
    padding: 20px;
    box-sizing: border-box;
}

.left-column {
    width: 15.75cm;
    padding-right: 20px;
    box-sizing: border-box;
    position: relative;
}

.full{
    width: 20.05cm;
}

.right-column {
    width: 5.25cm;
    padding-left: 20px;
    border-left: 2px solid #ccc;
    box-sizing: border-box;
    overflow: hidden;
}

.table-container {
    margin-bottom: 0mm;
    max-width: 19.7cm;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5mm;
    font-size: 8pt;
}

table th, table td {
    padding: 1px 8px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

table td:first-child, table th:first-child {
    white-space: normal; 
  }
  

table th {
    background-color: #000;
    color:white;
}

.table-container tr:nth-child(even) {background: #eee}
.table-container tr:nth-child(odd) {background: #FFF}


.table-container table th, .table-container table td {
    border:0.2mm solid #ccc;
}
.image-container {
    margin-bottom: 10mm;
}

.image-container img {
    max-width: 100%;
    height: auto;
    width: 6.8cm;
}

.side-note {
    margin-bottom: 10mm;
    font-size: 12px;
    color: #555;
}


footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    color: #000;
    padding: 0px 20px;
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    height: 2.8cm;
    border-top:1px solid black;
}


.footer-column {
    flex: 1;
    font-size: 7pt;
    padding: 0 10px;
}

.logo-column {
    flex: 1;
    padding:10px;
}

.logo {
    max-width:120px;
    color: #000;
    padding: 5px;
    font-weight: bold;
}




.inhalt-a.inhalt {
   
    margin: 0 auto;
    width: 200mm;
    padding: 20px 0px 0px 0px;
    overflow: hidden;
}

.inhalt .contents-container {
    display: flex;
    padding: 0px;
    box-sizing: border-box;
    width: 20.5cm;
}

.contents-column {
    width: 50%;
    padding-right: 20px;
    box-sizing: border-box;
}

.inhalt .contents-container .section {
    margin-bottom:20px;
    
}

.section h2 {
    font-size: 16px;
    margin: 10px 0;
}

.section ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.section ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.2;
}

.dots {
    flex-grow: 1;
    border-bottom: 1px solid black;
    margin: 0 5px;
}

.toc-table{ width:100%; border-collapse:collapse;margin-bottom: 1mm;  }
.toc-table td{ border:0 !important; padding:0 !important; vertical-align:baseline; }
.toc-table .l{ white-space:nowrap; }
.toc-table .m{ width:90%; }
.toc-table .r{ text-align:right; white-space:nowrap; }
.toc-table .fill{ border-bottom:0.2mm dotted #ccc; height:0; }



li.toc { line-height: 1.2; margin: 0 0 0.8mm 0; }
.inhalt .section h2 {
    font-size: 13.5pt;
    margin: 10px 0;
}

.notizen {
    height:60mm;
    width: 66mm;
    background-color: #f0f0f0; 
    background-image: linear-gradient(to right, #ccc 1px, transparent 1px), linear-gradient(to bottom, #ccc 1px, transparent 1px);
    background-size: 570px 1cm;
    background-position: -2px 0px;
}

.side-note p {
    width:66mm;
    word-wrap: normal;
     overflow-wrap:anywhere; 
  word-break:break-word;  
  hyphens:auto;  
  white-space:normal; 
}
h3 {
    margin: 0px 0 15px 0;
    font-size: 13.5pt;
}

.notizen h3{
    font-size: 20px;
    text-align: center;
    color: #444;
    padding: 10px;
}

.subtext {
    position: relative;
    font-size:6pt;
    padding: 0 30px;
}

.top-table {
    width: 96% !important;
    margin-top: 10px;
}

.inhalt-full{
    display: block;
   
    padding: 20px;
    box-sizing: border-box;
}

.inhalt-full table{
  table-layout: fixed; 
} 

.inhalt-full .left-column {
    width: 20.45cm;
}
/*      Entscheidet über die Länge      */
.inhalt-full-zub {
    display: block;
    padding: 20px;
    box-sizing: border-box;
   
}

.navi {
    display: block;
    position: absolute;
    bottom: -48px;
    height: 43px;
}


.top-column {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    gap:10px;
}

.top-column > div {
  flex: 1;               
  aspect-ratio: 1 / 1;   
}

.top-column .side-note {
    padding:10px 0;
}

.container-zub {
  width: 100%;
  font-size: 0; 
  position: relative;
}

.left-column-zub,
.right-column-zub {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px; 
}

.left-column-zub {
  width: 20%;
}

.right-column-zub {
  width: 80%;
}

.product-image-zub {
    max-width: 100%;
    height: auto;
    width: auto;
}

.product-image-zub.sechs {
    max-width: 100%;
    height: auto;
    max-height: 130px;
    width: auto;
}

.product-image-zub.sieben {
    max-width: 100%;
    height: auto;
    max-height: 115px;
    width: auto;
}

.product-image-zub.acht {
    max-width: 100%;
    height: auto;
    max-height: 100px;
    width: auto;
}

.alerti {
    background-color: rgb(207, 14, 14);
    color: white;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
}

.page-break {
  page-break-after: always;   /* klassisch für dompdf */
  break-after: page;          /* moderne Variante */
}

.number-input {
  display: inline-flex;
  align-items: center;
  background-color: #333;
  border: none;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  height: 43px;
}

.number-input input[type=number] {
  width: 60px;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: bold;
  background-color: #333;
  color: #fff;
  border: none;
  text-align: center;
  -moz-appearance: textfield;
}

.number-input input::-webkit-outer-spin-button,
.number-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input .controls {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
  display:none
}

.number-input .controls button {
  background: #444;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 5px;
}

.number-input .controls button:hover {
  background: #666;
}

/* .number-input {
    display:none;
} */