/* ################################################### */

/* für den TinyMCE Version TinyMCE 5.10.9 */

/* ################################################### */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-gleichmaessigAbstand-plugin.js */
/* gleichmäßiger Wortabstand */
/* ? das muss bleiben */

.tinymce_gleichmaessiger-abstand {
    text-align: justify;
    /* background-color: #ffff00; */
    /* font-size: 24px; */
}

.tinymce_gleichmaessiger-abstand::after {
    content: "";
    display: inline-block;
    width: 100%;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-columns-plugin.js */
/* Spalten 2 - 5 spaltig */
/* ? das muss bleiben */

.tinymce-columns {
    display: flex;
    gap: 20px;
    margin: 1em 0;
}

.tinymce-columns .column {
    flex: 1;
    min-width: 0;
}

/* mobil: Spalten untereinander */
@media (max-width: 800px) {
    .tinymce-columns {
        flex-direction: column;
    }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-price-button-plugin.js */
/* preislisten oder sonstiges mit Preisen in der Zeile am Ende */
/* ? das muss bleiben */

.tinymce-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.tinymce-text {
    display: block;
    text-align: inherit;
    /* übernimmt links oder zentriert */
}

.tinymce-price {
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
    font: inherit;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-roundimage-plugin.js */
/* markiertest Bild rund machen */
/* ? das muss bleiben */

.tinymce-img-round {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: inline-block;

    /* width:225px; */
    /* height:225px; */
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Template Textfluss in Spalten  */
/* ! das kann weg */

/* .columns-3 {
	column-count: 4;
	column-gap: 2rem;
} */


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-toggleA4Overlay-plugin.js */
/* virtuelles DIN A4 Blatt im TinyCME Editor */
/* ? das muss bleiben */

/* Container muss relative Position haben */
.tox-editor-container {
    position: relative;
}

.a4-overlay {
    position: absolute;
    width: 100ch;
    /* Breite in Zeichen 85ch*/
    height: 70em;
    /* Höhe in Zeilen 65em*/
    top: 0;
    /* 2 em Abstand vom oberen Rand */
    left: 50%;
    /* zentriert horizontal */
    transform: translateX(-50%);
    /* genau zentrieren */
    pointer-events: none;
    background-color: rgba(194, 224, 244, 0.35);
    border-bottom: 2px dotted red;
    z-index: 5;
}

/* hintergrund wird nicht ausgedruckt  */
@media print {
    .a4-overlay {
        display: none !important;
    }
}

body#tinymce.editor-paper {
    /* background: #f9f9f9; */
    max-width: 800px;
    /* margin: 20px auto;  */
    margin: 0px auto;
    padding: 40px !important;
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
    box-sizing: border-box;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-multiColumns-plugin.js */
/* css multi columns */
/* ? das muss bleiben */


.tinymce-multicolumn {
    column-width: 280px;
    column-gap: 20px;
    column-rule: 1px solid #000;
}

/* Highlight */
.tinymce-multicolumn,
[style*="column-count"] {
    transition: box-shadow .15s ease, background .15s ease;
}

.tinymce-multicolumn.mce-selected,
[style*="column-count"].mce-selected {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    outline: 2px dashed #2276d2;
    background: rgba(34, 118, 210, .05);
}


.mc-static>* {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-columns-plugin.js */
/* ? das muss bleiben */

.tinymce-columns {
    display: flex;
    gap: 20px;
    margin: 1em 0;
}

.tinymce-columns .column {
    flex: 1;
    padding: 6px;
    border: 1px solid transparent;
}

/* Rahmen um Inhalt */
.tinymce-columns[data-mce-selected] .column {
    border: 2px dashed #3399ff;
    background: #e6f0ff;
}

/* Responsive: Spalten untereinander auf mobilen Geräten  */
@media (max-width: 800px) {
    .tinymce-columns {
        flex-direction: column;
    }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* my-accordion-plugin.js */
/* ? das muss bleiben */

/* Überschrift */
summary {
    color: #fff;
    background-color: #0C4E96;
    padding: 15px;
    cursor: pointer;
}

 /* Rahmen um Inhalt */
 details[data-accordion-selected] {
    outline: 2px dashed #2b7cff;
    outline-offset: 4px;
    background: #e6f0ff;
 }

 details { 
    background-color: #f0f0f0; 
}


/* Einrückung für Absätze im Accordion (nur Editor-Darstellung) */
details p {
    margin-left: 30px;
    margin-right: 60px;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ! das kann eigentlich weg */

/* für das Template */

/* ------------------------------- */
/* Text */
/* ------------------------------- */
/*  | */
/* Bild		| Text */
/*  | */
/* ------------------------------- */
/* Text */
/* ------------------------------- */

/* my-customTemplate-plugin-no-use.js */
/* .tpl-box {
	width: 100%;
	margin: 25px 0;
	border: 2px solid transparent;

	position: relative;
} */

/* my-customTemplate-plugin-no-use.js */
/* .tpl-box:hover {
	border: 2px solid #0078d7;
} */

/* my-customTemplate-plugin-no-use.js */
/* .tpl-top,
.tpl-bottom {
	padding: 18px;
} */
´
/* my-customTemplate-plugin-no-use.js */
/* .tpl-middle {
	display: grid;
	grid-template-columns: 260px 1fr;
	min-height: 220px;
} */


/* wird benutzt bei:
my-div-make-edit-plugin.js
my-gridbuilder-plugin.js
my-div-make-edit-plugin.js
my-gridbuilder-plugin.js
my-customTemplate-plugin-no-use.js */
.tpl-image {
    min-height: 250px;
    /* wenn nur height steht wird unter dem Bild die Farbe des Template nicht angezeigt */
    /* height: 250px; */
    overflow: hidden;
}

.tpl-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.tpl-image:focus {
    border: 2px solid #0078d7;
    background: #f0f8f8;
}

/* my-customTemplate-plugin-no-use.js */
/*👉.tpl-text {
	padding: 20px;
	    ➡ background: #ffffff; ⬅
}👈*/

/* my-customTemplate-plugin-no-use.js */
/* .tpl-text p {
	margin: 0 0 10px 0;
} */

/* ! wofür ist das */
/*👉.tpl-edit {
	min-height: 50px;
	outline: none;

	➡ border: 1px dashed #ccc; ⬅
}👈*/

/* .tpl-edit:focus {
	outline: 2px solid #0078d7;
	border: 2px solid #0078d7;
}  */



/* siehe oben -> wird benutzt bei: */
/* verhindert Kollabieren leerer Felder */
.tpl-top:empty::before,
.tpl-bottom:empty::before,
.tpl-text:empty::before,
.tpl-image:empty::before {
    content: "\00a0";
    display: block;
}

/* sorgt dafür, dass der Bereich klickbar bleibt */
.tpl-top,
.tpl-bottom,
.tpl-text,
.tpl-image {
    min-height: 40px;
}


/* my-customTemplate-plugin-no-use.js */
/* Responsive */
@media (max-width: 700px) {
    .tpl-middle {
        grid-template-columns: 1fr;
    }

    .tpl-image {
        height: 220px;
    }

    .grid-box.responsive {
        grid-template-columns: 1fr !important;
    }

    .grid-box.responsive .grid-cell {
        grid-column: 1/2 !important;
        grid-row: auto !important;
    }
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ! das kann weg */

/*👉.menu-card {
	width: 35%;
	border: 3px solid #000;
	margin-bottom: 2em;
}

.menu-header {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	border-bottom: 3px solid #000;
	padding: 0.5em 0;
}

.menu-item {
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
}

.menu-text {
	flex: 3;
	text-align: center;
}

.menu-price {
	flex: 1;
	text-align: right;
}

.menu-price p {
	margin: 0.5em 0;
}

.menu-text hr {
	border: none;
	border-top: 1px solid #000;
	width: 50%;
	margin: 1em auto;
}👈*/


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Blindes rechteck auf homepage für cms */
/* ? das muss bleiben */

.link-blind-aktionen {
    position: absolute;
    /* background-color: #ff00ff; */
    /* opacity:0.6; */
    height: 50px;
    width: 50px;
    margin-top: 0px;
    margin-left: auto;
    right: 0;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



/* https: //nekocalc.com/de/px-zu-rem-umrechner */