/* Stellt sicher, dass die schwebenden UI-Elemente des CKEditors (wie die Bild-Toolbar)
   über den Modalfenstern (z-index: 1010) angezeigt werden. */
.ck.ck-balloon-panel {
    z-index: 1011;
}

/* Stellt sicher, dass der Text im Editor die Standard-Textfarbe der Seite erbt. */
.ck-editor__editable {
    color: inherit;
}
/* Stellt sicher, dass der Text im Editor im Kartenkopf dunkel ist. */
.ck-editor__editable #news_1-title, #news_2-title, #news_3-title, #news_4-title, #news_1-subtitle, #news_2-subtitle, #news_3-subtitle, #news_4-subtitle,
#seminar_1-title, #seminar_2-title, #seminar_3-title, #seminar_4-title, #seminar_1-subtitle, #seminar_2-subtitle, #seminar_3-subtitle, #seminar_4-subtitle {
    color:hsl(0, 0%, 30%);
}

/* Stellt sicher, dass alle Titel und Subtitel im card-kopf im Editor dunkel sind */
.card-kopf .ck-editor__editable[id$="-title"],
.card-kopf .ck-editor__editable[id$="-subtitle"],
.card-kopf .ck-editor__editable[id$="-title"] *,
.card-kopf .ck-editor__editable[id$="-subtitle"] * {
    color: hsl(0, 0%, 30%) !important;
}

/* Überschreibt die Standard-Margins des Editors für Bilder, um WYSIWYG zu gewährleisten. */
.ck-editor__editable .image-style-align-left {
    margin: 0.1rem 1.5rem 0 0 !important;
}

.ck-editor__editable .image-style-align-right {
    margin: 0.1rem 0 0 1.5rem !important;
}

.ck.ck-editor__editable_inline>:first-child {
    margin: 0 0;
    padding: 0 0;
}

.ck.ck-editor__editable_inline {
    padding: 0 0;
}

/* Dropcap-Stile für die Initialfunktion */
.ck-editor__editable .dropcap {
    float: left;
    font-size: 3em;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    padding: 0;
}

/* Stellt sicher, dass der Dropcap-Effekt auch in der finalen Ausgabe sichtbar ist */
.dropcap {
    float: left;
    font-size: 3em;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    padding: 0;
}

/* Dropcap auch für content-view */
.content-view .dropcap {
    float: left;
    font-size: 3em;
    line-height: 0.8;
    margin: 0.1em 0.1em 0 0;
    padding: 0;
}

/* CKEditor Tabellen-Ausrichtungsstile für WYSIWYG - Editor */
.ck-editor__editable .table-align-center {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.ck-editor__editable .table-align-left {
    float: left;
    margin-right: 10px;
}

.ck-editor__editable .table-align-right {
    float: right;
    margin-left: 10px;
}

/* CKEditor Tabellen-Ausrichtungsstile für WYSIWYG - Anzeigemodus */
.content-view .table-align-center {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.content-view .table-align-left {
    float: left;
    margin-right: 10px;
}

.content-view .table-align-right {
    float: right;
    margin-left: 10px;
}

/* Bilder-Ausrichtung für content-view (WYSIWYG) */
.content-view .image-style-align-left {
    margin: 0.1rem 1.5rem 0 0 !important;
}

.content-view .image-style-align-right {
    margin: 0.1rem 0 0 1.5rem !important;
}

.content-view .image-style-align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Text-Ausrichtung für content-view (WYSIWYG) - wird über inline-styles angewendet */

/* Font-Styles für content-view (WYSIWYG) - FontSize */
.content-view .text-tiny {
    font-size: 0.7em;
}

.content-view .text-small {
    font-size: 0.85em;
}

.content-view .text-big {
    font-size: 1.4em;
}

.content-view .text-huge {
    font-size: 1.8em;
}

/* Font-Styles für content-view (WYSIWYG) - FontFamily, FontColor, FontBackgroundColor werden über inline-styles angewendet */

/* Blockquote für content-view (WYSIWYG) */
.content-view blockquote {
    border-left: 5px solid #ccc;
    font-style: italic;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* Code und Pre für content-view (WYSIWYG) */
.content-view code {
    background-color: hsla(0, 0%, 78%, 0.3);
    border-radius: 2px;
    padding: 0.15em;
}

.content-view pre {
    background: hsla(0, 0%, 78%, 0.3);
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    color: #353535;
    direction: ltr;
    font-style: normal;
    min-width: 200px;
    padding: 1em;
    tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
}

.content-view pre code {
    background: unset;
    border-radius: 0;
    padding: 0;
}

/* Horizontal Line für content-view (WYSIWYG) */
.content-view hr {
    background: #dedede;
    border: 0;
    height: 4px;
    margin: 15px 0;
}

/* Tabellen für content-view (WYSIWYG) */
.content-view table {
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
}

.content-view td,
.content-view th {
    word-break: break-word;
}

.content-view table img {
    max-width: 100%;
    height: auto;
}

/* Listen für content-view (WYSIWYG) - Indentierung */
.content-view ul,
.content-view ol {
    padding-left: 1.5em;
}

.content-view li > p:first-of-type {
    margin-top: 0;
}

.content-view li > p:only-child {
    margin-bottom: 0;
    margin-top: 0;
}

/* Überschriften für content-view (WYSIWYG) - Margins */
/* ACHTUNG: card-kopf Überschriften werden explizit ausgeschlossen */
.content-view h1,
.content-view h2,
.content-view h3,
.content-view h4,
.content-view h5,
.content-view h6 {
    margin: 0.5em 0;
    font-weight: bold;
}

.content-view h1 {
    font-size: 2em;
}

.content-view h2 {
    font-size: 1.5em;
}

.content-view h3 {
    font-size: 1.17em;
}

/* Überschriften im card-kopf sollen keine Margins haben, aber Font-Sizes behalten */
.card-kopf .content-view h1,
.card-kopf .content-view h2,
.card-kopf .content-view h3,
.card-kopf .content-view h4,
.card-kopf .content-view h5,
.card-kopf .content-view h6 {
    margin: 0 !important;
    font-weight: bold;
}

/* Überschriften innerhalb von card-kopf [id$="-title"] - Font-Sizes beibehalten, aber line-height/height anpassen */
.card-kopf [id$="-title"] h1 {
    margin: 0 !important;
    line-height: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 2em !important;
}

.card-kopf [id$="-title"] h2 {
    margin: 0 !important;
    line-height: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 1.5em !important;
}

.card-kopf [id$="-title"] h3 {
    margin: 0 !important;
    line-height: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 1.17em !important;
}

.card-kopf [id$="-title"] h4 {
    margin: 0 !important;
    line-height: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 1em !important;
}

.card-kopf [id$="-title"] h5 {
    margin: 0 !important;
    line-height: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 0.83em !important;
}

.card-kopf [id$="-title"] h6 {
    margin: 0 !important;
    line-height: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    font-size: 0.67em !important;
}

/* Überschriften innerhalb von card-kopf [id$="-subtitle"] - Font-Sizes beibehalten, aber line-height/height anpassen */
.card-kopf [id$="-subtitle"] h1 {
    margin: 0 !important;
    line-height: 15px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 2em !important;
}

.card-kopf [id$="-subtitle"] h2 {
    margin: 0 !important;
    line-height: 15px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 1.5em !important;
}

.card-kopf [id$="-subtitle"] h3 {
    margin: 0 !important;
    line-height: 15px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 1.17em !important;
}

.card-kopf [id$="-subtitle"] h4 {
    margin: 0 !important;
    line-height: 15px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 1em !important;
}

.card-kopf [id$="-subtitle"] h5 {
    margin: 0 !important;
    line-height: 15px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 0.83em !important;
}

.card-kopf [id$="-subtitle"] h6 {
    margin: 0 !important;
    line-height: 15px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 0.67em !important;
}

/* Auch im Editor müssen die Font-Sizes sichtbar sein */
.ck-editor__editable .card-kopf [id$="-title"] h1 {
    font-size: 2em !important;
}

.ck-editor__editable .card-kopf [id$="-title"] h2 {
    font-size: 1.5em !important;
}

.ck-editor__editable .card-kopf [id$="-title"] h3 {
    font-size: 1.17em !important;
}

.ck-editor__editable .card-kopf [id$="-subtitle"] h1 {
    font-size: 2em !important;
}

.ck-editor__editable .card-kopf [id$="-subtitle"] h2 {
    font-size: 1.5em !important;
}

.ck-editor__editable .card-kopf [id$="-subtitle"] h3 {
    font-size: 1.17em !important;
}

.ck-editor__editable .card-kopf [id$="-title"] h4 {
    font-size: 1em !important;
}

.ck-editor__editable .card-kopf [id$="-title"] h5 {
    font-size: 0.83em !important;
}

.ck-editor__editable .card-kopf [id$="-title"] h6 {
    font-size: 0.67em !important;
}

.ck-editor__editable .card-kopf [id$="-subtitle"] h4 {
    font-size: 1em !important;
}

.ck-editor__editable .card-kopf [id$="-subtitle"] h5 {
    font-size: 0.83em !important;
}

.ck-editor__editable .card-kopf [id$="-subtitle"] h6 {
    font-size: 0.67em !important;
}

/* Absätze für content-view (WYSIWYG) */
.content-view p {
    margin: 0.5em 0;
}

.content-view p:first-child {
    margin-top: 0;
}

.content-view p:last-child {
    margin-bottom: 0;
}

/* Absätze im card-kopf sollen keine Margins haben - überschreibt die obigen Styles */
.card-kopf .content-view p {
    margin: 0 !important;
}

/* Alle anderen Elemente im card-kopf sollen keine Margins haben, die die Position beeinflussen */
.card-kopf .content-view ul,
.card-kopf .content-view ol,
.card-kopf .content-view blockquote,
.card-kopf .content-view hr {
    margin: 0 !important;
}

/* Sicherstellen, dass alle Elemente innerhalb von card-kopf [id$="-title"] und [id$="-subtitle"] keine Margins haben */
.card-kopf [id$="-title"] *,
.card-kopf [id$="-subtitle"] * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}