/* 
  Import von Mainstyle Zusatzdateien 
*/

@import url("/includes/css/header.css");
@import url("/includes/css/footer.css");
@import url("/includes/css/search.css");
@import url("/includes/css/buttons.css");
@import url("/includes/css/tabellen.css");
@import url("/includes/css/listen.css");
@import url("/includes/css/formulare.css");
@import url("/includes/css/herosections.css");
@import url("/includes/css/statusmeldungen.css");
@import url("/includes/css/submenu.css");



/* 
  Allgemeines 
*/

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

html {  
  overflow-x: hidden;
  width: 100%;
  scrollbar-gutter: stabe;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--cpd_farbe_zusatz_weiss);
  scroll-behavior: smooth;
}

main {
  padding: 0;
  margin: 0;
}

section {
  background-color: var(--cpd_farbe_marke_rot_900);
}

section.cpd_sec_content {
  width: 100%;
  margin: 0;
  padding: 0;
}

div.cpd_sec_container {
  width: auto;
  margin: 0;
  padding: var(--cpd_abstand_sec_pad_topbot) var(--cpd_abstand_seitenabstand);
}


.cpd_sec_farbe_light_backg {
  background-color: var(--cpd_farbe_section_light_backg);
}

.cpd_sec_farbe_dark_backg {
  background-color: var(--cpd_farbe_section_dark_backg);
}




/* Überschrift & Textkörper */

h1, h2, h3, h4, h5, h6, p, a, li, label, input, button, summary, details {
  word-wrap: break-word;
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6, th, label, summary, details, div[title]::before {
  font-family: "Space Grotesk", sans-serif;
  color: var(--cpd_farbe_zusatz_grau_900);
}

p, a, li, input, select, option, button, td, code, textarea {
  font-family: "Ubuntu", sans-serif;
  color: var(--cpd_farbe_zusatz_grau_900);
  font-size: 18px;
  font-weight: 400;
  text-align: justify;
  line-height: 1.75;
}

ul,ol li {
  list-style-position: inside;
}

h3 {
  font-size: 32px;
  font-weight: 600;
  margin: 40px 0 20px;
}

h4 {
  font-size: 28px;
  font-weight: 600;
  margin: 36px 0 20px;
}

h5 {
  font-size: 24px;
  font-weight: 600;
  margin: 32px 0 16px;
}

h6 {
  font-size: 20px;
  font-weight: 600;
  margin: 28px 0 16px;
}

p {
  font-size: 18px;
  font-weight: 400;
  margin: 0 0 16px;
}

code {
  font-size: 18px;
  font-weight: 400;
}

a {
  color: var(--cpd_farbe_marke_blau_400);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--cpd_farbe_marke_rot_400);
  text-decoration: none;
  transition: all 0.3s ease;
}

img {
  width: 100%;
}



/* Details */

details {
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  padding: 16px 20px;
  margin: 16px 0;
  animation: open .4s;
  -webkit-animation: open .4s;
}

summary {
  cursor: pointer;
  padding: 0px;
  font-size: 20px;
  font-weight: 600;
}

details[open] summary {
  margin-bottom: 16px;
}

details[open] summary * {
  color: var(--cpd_farbe_marke_blau);
}

details[open] summary::-webkit-details-marker {
  display: none;
}

details[open] {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  from {
    max-height: 0;
  }
  to {
    max-height: 200px; /* Passe die Höhe an deinen Inhalt an */
  }
}




/* Fußnoten */

p.fussnoten {
  font-size: 15px;
  font-style: italic;
}

p.fussnoten span {
  font-weight: bold;
}







/* Box-Shadow */

.box_shadow_nohover {
  box-shadow: 0 1px 2px 0 rgba(var(--cpd_farbe_grau_80), .3), 0 1px 3px 1px rgba(var(--cpd_farbe_grau_80), .15);
}

.box_shadow {
  box-shadow: 0 1px 2px 0 rgba(var(--cpd_farbe_grau_80), .3), 0 1px 3px 1px rgba(var(--cpd_farbe_grau_80), .15);
  transition: all .3s ease-in-out;
}

.box_shadow:hover {
  box-shadow: 0 1px 2px 0 rgba(var(--cpd_farbe_grau_80), .3), 0 1px 3px 1px rgba(var(--cpd_farbe_grau_80), .15);
  transition: all .3s ease-in-out;
}




/* Sonstiges */

.cpd_text_deco_linie_none {
  text-decoration: none;
}

.cpd_text_deco_linie_oben {
  text-decoration: overline;
}

.cpd_text_deco_linie_unten {
  text-decoration: underline;
}

.cpd_text_deco_linie_mitte {
  text-decoration: line-through;
}

.cpd_text_deco_shaddow {
  text-shadow: 1px 1px 4px rgba(0,0,0,.4);
}

.ankerpunkt {
  scroll-margin-top: 170px;
}




/* Transition */

.cpd_transition_0_1 {
  transition: all .1s ease-in-out;
}

.cpd_transition_0_2 {
  transition: all .2s ease-in-out;
}

.cpd_transition_0_3 {
  transition: all .3s ease-in-out;
}

.cpd_transition_0_4 {
  transition: all .4s ease-in-out;
}

.cpd_transition_0_5 {
  transition: all .5s ease-in-out;
}

.cpd_transition_0_6 {
  transition: all .6s ease-in-out;
}

.cpd_transition_0_7 {
  transition: all .7s ease-in-out;
}

.cpd_transition_0_8 {
  transition: all .8s ease-in-out;
}

.cpd_transition_0_9 {
  transition: all .9s ease-in-out;
}

.cpd_transition_1_0 {
  transition: all 1s ease-in-out;
}








/* Titelsection */

section.cpd_titelsec_sec {
  width: 100%;
  margin: 0 auto;
  padding: 16px var(--cpd_abstand_seitenabstand);
  background-color: var(--cpd_farbe_marke_mint_100);
}

h1.cpd_titelsec_h1 {
  font-size: 32px;
  font-weight: 600;
  text-align: left;
  color: var(--cpd_farbe_zusatz_schwarz);
  margin: 0;
}




/* Sectiontitel */

div.cpd_sectitel_pos_left {
  display: flex;
  justify-content: left;
}

div.cpd_sectitel_pos_center {
  display: flex;
  justify-content: center;
}

div.cpd_sectitel_size_small h2 {
  font-size: 36px;
  font-weight: 700;
  margin: 0 0 28px;
}

div.cpd_sectitel_size_medium h2 {
  font-size: 40px;
  font-weight: 700;
  margin: 0 0 36px;
}

div.cpd_sectitel_size_large h2 {
  font-size: 44px;
  font-weight: 700;
  margin: 0 0 44px;
}

div.cpd_sectitel_size_small h3 {
  color: black;
  background-color: red;
}

div.cpd_sectitel_size_medium h3 {
  color: black;
  background-color: red;
}

div.cpd_sectitel_size_large h3 {
  color: black;
  background-color: red;
}

/*
  <div class="cpd_sectitel_pos_center cpd_sectitel_size_medium">
    <h3 class=""> Titel </h3>
  </div>
*/




/* cpd Herosection */








/* Suche Container Neu */

#suchleiste div.cpd_sec_container {
  padding-bottom: 0;
}

.cpd_suchleiste_container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.cpd_suchleiste_con_pos_between {justify-content: space-between; gap: 24px 40px;}
.cpd_suchleiste_con_pos_center {justify-content: center; gap: 24px 100px;}

.cpd_suchleiste_left  {
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px 28px;
}

.cpd_suchleiste_left h6 {
  margin: 0;
  font-size: 24px;
}

.cpd_suchleiste_left input {
  margin: 0;
  margin-right: 16px;
  padding: 8px;
  border: 1px solid var(--cpd_farbe_grau_80);
  border-radius: 4px;
}

.cpd_suchleiste_right {

}






/* Suche Container Alt */

#suche-section div.cpd_sec_container {
  padding-bottom: 0;
}

#suche-section .suche_container form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 32px;
}

#suche-section .suche_container .suche_container_suche {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  grid-gap: 16px;
}

#suche-section .suche_container .suche_container_buttons_left {

}

#suche-section .suche_container .suche_container_buttons_right {  
  margin-left: auto;
}

#suche-section .suche_container .cpd_bns_div {
  width: auto;
}

#suche-section .suche_container form h6 {
  margin: 0;
  font-size: 24px;
}

#suche-section .suche_container form input {
  padding: 8px;
  border: 1px solid var(--cpd_farbe_grau_80);
  border-radius: 4px;
}

/* Alt */

.top_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  grid-gap: 24px 48px;
}

.suche_container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.suche_container form {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  grid-gap: 32px;
}

.suche_container form h6 {
  margin: 0;
  font-size: 24px;
}

.suche_container form input {
  padding: 8px;
  border: 1px solid var(--cpd_farbe_grau_80);
  border-radius: 4px;
}

#suche-section div.cpd_sec_container {
  padding-bottom: 0;
}






/* Code Ausschnitt */

div.cpd_div_code_ausschnitt {
  background-color: var(--cpd_farbe_grau_60);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 32px 0;
  padding: 16px 20px;
  border-radius: 12px;
}

div.cpd_div_code_ausschnitt h6 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--cpd_farbe_zusatz_weiss);
}

div.cpd_div_code_ausschnitt code {
  font-size: 18px;
  font-weight: 400;
  color: var(--cpd_farbe_zusatz_weiss);
}

div.cpd_div_code_ausschnitt p span.cpd_div_code_ausschnitt_copy {
    font-size: 18px;
    font-weight: 400;
    color: var(--cpd_farbe_grau_5);
}

/*
div
*/






/* Code Ausschnitt Default */

pre {
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: auto;
	overflow-y: hidden;
	font-size: 12px;
	line-height: 20px;
	background: #efefef;
	border: 1px solid #777;
	background: url(lines.png) repeat 0 0;
}
pre code {
	padding: 10px;
	color: #333;
}






/* Kategorie Menu */

section.cpd_menustreifen {
  position: sticky;
  top: 106px;
  padding: 0;
  z-index: 100;
  margin: 48px auto 0;
  background: transparent;
}

div.cpd_menustreifen {
  width: max-content;
  max-width: 90%;
  padding: 0;
  margin: 0 auto;
  background-color: var(--cpd_farbe_grau_5);
  border-radius: 30px;
  display: flex;
  flex: auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 100;
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
  transition: all .4s ease-in-out;
}

div.cpd_menustreifen a {
  padding: 12px 20px;
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--cpd_farbe_grau_80);
  text-decoration: none;
  z-index: 100;
  transition: all .4s ease-in-out;
}

div.cpd_menustreifen a:first-child {
  padding-left: 32px;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

div.cpd_menustreifen a:last-child {
  padding-right: 32px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

@media only screen and (max-width: 600px) {
  div.cpd_menustreifen a {
    font-size: 19px;
  }
}

div.cpd_menustreifen:hover a.cpd_menustreifen_item_aktiv {
  color: var(--cpd_farbe_marke_rot_v2);
  transition: all .4s ease-in-out;
}

div.cpd_menustreifen a:hover {
  font-size: 17px;
  font-weight: 500;
  color: var(--cpd_farbe_marke_rot_v2);
  background-color: var(--cpd_farbe_grau_10);
  text-decoration: none;
  z-index: 100;
  transition: all .4s ease-in-out;
}

div.cpd_menustreifen a.cpd_menustreifen_item_aktiv {
  color: var(--cpd_farbe_marke_rot_v2);
  transition: all .4s ease-in-out;
}