/* ====================================== */
/* Kopierbutton in Codebox */
.copy-button-html {
margin-top: 0;
margin-right: 5px;
padding: 5px;
color: inherit;
border: none;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 7px;
font-size: 1rem;
background-color: transparent;
}

.copy-button-html:hover {
    background-color: #B9B9B9;
}

.copy-button-html .icon {
    margin: 5px;
}

.copy-button-html.copied {
    background-color: #A3CFBB;
}

.copy-button-html.copied:hover {
    background-color: #A3CFBB;
}

.copy-button-css {
margin-top: 0;
margin-right: 5px;
padding: 5px;
color: inherit;
border: none;
cursor: pointer;
display: flex;
align-items: center;
border-radius: 7px;
font-size: 1rem;
background-color: transparent;
}

.copy-button-css:hover {
    background-color: #B9B9B9;
}

.copy-button-css .icon {
    margin: 5px;
}

.copy-button-css.copied {
    background-color: #9EC5FE;
}

.copy-button-css.copied:hover {
    background-color: #9EC5FE;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* ====================================== */

/* Codebox - Compunente - Basis ist HTML-Element: figure */
.codebox, .css-codebox {  
  --pre-font-color: var(--pink-5);
  --pre-margin-x: 0;
  --pre-margin-y: 0;
  --pre-padding-x: 0.5rem;
  --pre-padding-y: 0.5rem;
  --pre-background-color: var(--weiss-1);
  --pre-border-style: solid;
  --pre-border-width:  1px;
  --pre-border-color:  #adb5bd;
  --pre-border-radius: var(--border-radius-md);
  width: 100%;
  display: block;
  margin: 0 0;
  border: var(--pre-border-style) var(--pre-border-width) var(--pre-border-color);
  border-radius: var(--pre-border-radius);
}

.no-figcaption {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.no-figfoot {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.codebox-header{
  --margin-x: 0;
  --margin-y: 0.375rem;
  margin: 0;
  padding: var(--pre-padding-x);
  border-bottom:  var(--pre-border-style) var(--pre-border-width) var(--pre-border-color);
}
.codebox-body {
	background-color: var(--pre-background-color);
	padding: 0 0.5rem;
}
/* figcaption übernimmt den Kopfbereich für die Codebox */
.codebox > figcaption {
  --margin-x: 0;
  --margin-y: 0.375rem;
  margin: 0;
  padding: 1.5rem;
  border-bottom:  var(--pre-border-style) var(--pre-border-width) var(--pre-border-color);
  font-size: inherit;
}
.codebox-body > pre, .css-codebox-body > pre {
  font-size: 0.9rem;
  color: var(--pre-font-color);
  overflow: auto;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  word-wrap: break-word;
  padding: var(--pre-padding-y) var(--pre-padding-x);
  margin: 0;
}
.codebox .figfoot, .css-codebox .figfoot {
 border-top:  var(--pre-border-style) var(--pre-border-width) var(--pre-border-color);
 padding: var(--pre-padding-x)
}

/* HTML */
.doc {
	color: var(--blue-4);
}
.att {
	color: var(--teal-5);
}
.att-wert {
	color: var(--blue-6);
}
.text {
	color: var(--gray-7);
}

.com {
color: var(--gray-5);
}

/* CSS */
.class {
	font-weight: 600;
	color: var(--yellow-6);
}
.tag {
	font-weight: 600;
}
.prefix {
	color: #000000;
}
.name {
	color: var(--orange-5);
}
.color {
	color: var(--teal-5);
}
.zahl {
	color: var(--purple-4);
}