@font-face {
  font-family: 'Noto Sans';
  src: url('/wp-content/themes/divi-child/fonts/noto-sans/NotoSans-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans';
  src: url('/wp-content/themes/divi-child/fonts/noto-sans/NotoSans-Italic-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Fallbacks, falls die Divi/AKD-Variablen im Editor nicht verfügbar sind */
:root,
.editor-styles-wrapper,
body.mce-content-body {
  --akd-font: "Noto Sans", Verdana, sans-serif;
  --akd-font-icon: "Font Awesome 7 Free", "Font Awesome 7 Brands", "Noto Sans", Verdana, sans-serif;
  --akd-typo: #393939;
  --akd-grey: #707070;
  --akd-lightgrey: #ececec;
  --akd-red: #e4003a;
  --ekbo-violett: #62358c;
  --gvid-bkh4fxs368: linear-gradient(-128deg, #e4003a 0%, #62358c 100%);
}

.editor-styles-wrapper,
body.mce-content-body,
.et-fb,
.et-db,
.et_pb_module,
.et_pb_text_inner {
  font-family: "Noto Sans", Verdana, sans-serif !important;
  font-size: 16px;
  transition: all 300ms ease;
}

.editor-styles-wrapper p,
body.mce-content-body p {
  font-size: clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem);
  padding-bottom: 1em;
  line-height: 1.4em;
  font-weight: 300;
  color: var(--akd-typo);
}

.editor-styles-wrapper p:last-of-type,
body.mce-content-body p:last-of-type {
  padding-bottom: 0;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6,
body.mce-content-body h1,
body.mce-content-body h2,
body.mce-content-body h3,
body.mce-content-body h4,
body.mce-content-body h5,
body.mce-content-body h6,
.et-db h1,
.et-db h2,
.et-db h3,
.et-db h4,
.et-db h5,
.et-db h6,
.et_pb_text_inner h1,
.et_pb_text_inner h2,
.et_pb_text_inner h3,
.et_pb_text_inner h4,
.et_pb_text_inner h5,
.et_pb_text_inner h6 {
  font-family: "Noto Sans", Verdana, sans-serif !important;
  color: var(--akd-grey);
  line-height: 1.2em;
  padding-bottom: 10px;
}

.editor-styles-wrapper h1,
body.mce-content-body h1 {
  font-size: clamp(1.4238rem, calc(0.0125 * (100vw - 360px) + 22.7813px), 2.1973rem);
  font-weight: 300;
  border-bottom: 1px solid var(--akd-lightgrey);
  margin-top: 1em;
  margin-bottom: 1em;
}

.editor-styles-wrapper h2,
body.mce-content-body h2 {
  font-size: clamp(1.125rem, calc(0.004545 * (100vw - 360px) + 18px), 1.4063rem);
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.5em;
 	text-decoration-line: underline;
    text-decoration-color: var(--akd-lightgrey);
    text-decoration-style: solid;
	text-decoration-skip: ink; 
}

.editor-styles-wrapper h3,
body.mce-content-body h3 {
  font-size: clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem);
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-color: var(--akd-lightgrey);
  text-decoration-style: solid;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.editor-styles-wrapper h4,
body.mce-content-body h4 {
  font-size: clamp(0.8889rem, calc(0.00018 * (100vw - 360px) + 14.2222px), 0.9rem);
  font-weight: 300;
  color: var(--ekbo-violett);
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.editor-styles-wrapper h5,
body.mce-content-body h5 {
  font-size: 0.7901rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.editor-styles-wrapper h6,
body.mce-content-body h6 {
  font-size: 0.7901rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.editor-styles-wrapper a,
body.mce-content-body a {
  color: var(--akd-red);
  text-decoration-line: underline;
  text-decoration-color: var(--akd-red);
  text-decoration-style: dotted;
  transition: color 300ms ease, text-decoration-color 300ms ease;
}

.editor-styles-wrapper a:hover,
body.mce-content-body a:hover {
  color: var(--akd-grey);
  text-decoration-color: var(--akd-grey);
}

.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
body.mce-content-body ul,
body.mce-content-body ol {
  padding-bottom: 1em;
  padding-left: 0;
}

.editor-styles-wrapper ul li:before,
body.mce-content-body ul li:before {
  content: "\f068";
  font-family: var(--akd-font-icon);
  font-weight:800;
  font-size: .4em;
  color: var(--akd-red);
  flex-shrink: 0;
}

.editor-styles-wrapper ul li,
body.mce-content-body ul li {
  list-style-type: square;
  list-style-position: outside;
  line-height: 1.3em;
  font-weight:300;
  font-size: clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem);	
  display: flex;
  gap: .4em;
  margin-bottom:.5em;	
}

.editor-styles-wrapper ol li,
body.mce-content-body ol li {
  list-style-type: decimal;
  list-style-position: outside;
  line-height: 1.3em;
   font-weight:300; 
  font-size: clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem);	
  display: flex;
  gap: .4em;
  margin-bottom:.5em;
}

.editor-styles-wrapper blockquote,
body.mce-content-body blockquote {
  font-style: italic;
  line-height: 1.2em;
  text-align: left;
  border-left: 0;
  margin: 20px 0 30px;
  padding-left: 20px;
  position: relative;
  isolation: isolate;
}

.editor-styles-wrapper blockquote p,
body.mce-content-body blockquote p {
  font-size: clamp(1.125rem, calc(0.004545 * (100vw - 360px) + 18px), 1.4063rem);
  padding-bottom: 0;
  background-image: var(--gvid-bkh4fxs368);
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.editor-styles-wrapper blockquote::before,
body.mce-content-body blockquote::before {
  font-family: var(--akd-font-icon);
  content: "\f101";
  font-weight: 900;
  font-size: 2rem;
  color: var(--akd-lightgrey);
  position: absolute;
  left: 0;
  top: -5px;
  -webkit-text-fill-color: var(--akd-lightgrey);
  z-index: -1;
}