/* tinymce specific styles */

*, :after, :before {
    box-sizing: border-box;
}

:root {
    --text-text-action: #322D7F;
    --Primitives-colors-purple-90: #322D7F;
    --text-text-emphasize: #D22F27;
    --text-text-intro-primary: #000;
    --background-bg-intro-elementar: #FEF1D4;
    --background-bg-intro-primar: #DFF5F5;
    --background-bg-surface: #FFF;
    --border-border-s: #CDCDCD;

    


    /* m/regular */
    font-family: Figtree;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 137.5% */

}


h1 {
    color: var(--text-text-emphasize, #D22F27);
    font-family: Figtree;
    font-size: var(--font-size-h1, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--font-size-h1-lineheight, 30px); /* 107.143% */
    margin-bottom: 10px;
}

h2 {
    color: var(--Primitives-colors-purple-90);
    font-size: 24px;
    font-weight: 700;
    line-height: 30px; /* 125% */
    margin-bottom: 10px;
}

h3 {
    color: var(--text-text-action);
    font-size: 20px;
    font-weight: 700;
    line-height: 26px; /* 130% */
}
h4 {
    color: var(--text-text-action);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
}
p {
    color: var(--text-text-intro-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
}
small {
    color: var(--text-text-intro-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px; /* 137.5% */
}


a {
   text-decoration: none;  
   color: var(--text-text-action, #322D7F);
}

a:hover {
    text-decoration: underline ;
}

ol {
    list-style-type: decimal;
    margin-left: 20px;
}

  
.full_with_image {
    width: 100%;
    height: auto;
}

.modal {
    z-index: 20000;
}
  

.image_responsive {
    width: 100%;
}

.wysiwyg_row {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.wysiwyg_row>* {
    flex-shrink: 0;
    margin-top: 0;
    max-width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    width: 100%
}

.wysiwyg_col_6 {
    width: 100% 
}

.mce-content-body .wysiwyg_row
{
    outline: dashed 1px #888888;
}

.mce-content-body .wysiwyg_col_6:not(:last-child) {
    border-right: dashed 1px #888888;
}

@media (min-width: 768px) {
    .wysiwyg_col_6 {
        flex: 0 0 auto;
        width: 50%
    }
}

/* Custom Styles fuer Tinymce */
/* ============================================================ */
.customBildunterschrift {
    font-style: italic;
}

.customContentButton {
    display: inline-flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    color: var(--background-bg-surface, #FFF);
    border-radius: var(--radius, 12px);
    text-decoration: none;
    border: 1px solid var(--border-border-l, #322D7F);
    background: transparent;
    color: var(--text-text-action, #322D7F);
}

/* Hinzugefuegtes Pseudo-Element fuer das Icon */
.customContentButton::after {
    content: ''; /* Notwendig, damit das Element erzeugt wird */
    width: 16px;
    height: 16px;

    /* Das SVG wird als "Schablone" (Maske) verwendet.
      Die Farbe wird unten mit background-color gesetzt.
    */
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.724 7.22721H1.6825C1.31243 7.22721 1.01094 7.52093 1.01094 7.88491C1.01094 8.25889 1.30853 8.55648 1.6825 8.55648H12.724L9.3222 11.9457L9.32194 11.946C9.18597 12.082 9.12467 12.2444 9.12467 12.4203C9.12467 12.7766 9.41846 13.0918 9.79624 13.0918C9.97212 13.0918 10.1346 13.0305 10.2705 12.8946L10.2707 12.8944L14.792 8.3592L14.7922 8.35899L14.6506 8.21778C14.7338 8.13456 14.7893 8.00974 14.7893 7.88491C14.7893 7.76008 14.7477 7.6492 14.6506 7.55204L10.1291 3.03054C10.032 2.93345 9.92106 2.89185 9.79624 2.89185C9.56045 2.89185 9.32467 3.09989 9.32467 3.36341C9.32467 3.48824 9.36628 3.5992 9.46336 3.69628L12.724 7.22721Z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.724 7.22721H1.6825C1.31243 7.22721 1.01094 7.52093 1.01094 7.88491C1.01094 8.25889 1.30853 8.55648 1.6825 8.55648H12.724L9.3222 11.9457L9.32194 11.946C9.18597 12.082 9.12467 12.2444 9.12467 12.4203C9.12467 12.7766 9.41846 13.0918 9.79624 13.0918C9.97212 13.0918 10.1346 13.0305 10.2705 12.8946L10.2707 12.8944L14.792 8.3592L14.7922 8.35899L14.6506 8.21778C14.7338 8.13456 14.7893 8.00974 14.7893 7.88491C14.7893 7.76008 14.7477 7.6492 14.6506 7.55204L10.1291 3.03054C10.032 2.93345 9.92106 2.89185 9.79624 2.89185C9.56045 2.89185 9.32467 3.09989 9.32467 3.36341C9.32467 3.48824 9.36628 3.5992 9.46336 3.69628L12.724 7.22721Z"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    
    /* Hier wird die Farbe des Icons gesteuert */
    background-color: #322D7F;
}

/* Optional: Farbe bei Hover aendern */
.customContentButton:hover::after {
    background-color: #FFFFFF; /* Beispiel: Icon wird weiss */
}

.customContentButton:hover {
    background-color: #322D7F; /* Beispiel: Button-Hintergrund wird blau */
    color: #FFFFFF; /* Beispiel: Text wird weiss */
}

/* ============================================================ */
/* Custom Styles ENDE */



/* Blockquote wird fuer Zitatbloecke bzw. Exkursbloecke verwendet */
/* ============================================================ */
blockquote {
    margin: 40px 0;
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    text-align: justify;
    padding-top: 28px;
}

blockquote h2 {
    color: red;
}
/* ============================================================ */
/* Blockquote ENDE */