/*************************************************
 AS-CMS Formular Plugin
 Datei: frontend_editor.css
 Beschreibung:
 Einheitliches Frontend-Design für Trumbowyg
*************************************************/

/* Gesamter Editor */
.trumbowyg-box,
.trumbowyg-editor {
    border: 1px solid #cccccc !important;
    border-radius: 4px;
    background: #ffffff;
}

/* Buttonleiste */
.trumbowyg-button-pane {
    background: #f5f5f5 !important;
    border-bottom: 1px solid #cccccc !important;
}

/* Einzelne Buttons */
.trumbowyg-button-pane button {
    background: transparent !important;
    color: #222222 !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 6px !important;
    margin: 0 !important;
    border-radius: 3px;
    transition: background 0.2s ease;
}

/* Hover */
.trumbowyg-button-pane button:hover {
    background: #e8e8e8 !important;
    color: #000000 !important;
}

/* Aktive Buttons */
.trumbowyg-button-pane button.trumbowyg-active {
    background: #dcdcdc !important;
    color: #000000 !important;
}

/* SVG-Icons */
.trumbowyg-button-pane svg {
    fill: #222222 !important;
}

.trumbowyg-button-pane svg path {
    fill: #222222 !important;
}

/* Dropdowns */
.trumbowyg-button-pane select {
    background: #ffffff !important;
    color: #222222 !important;
    border: 1px solid #cccccc !important;
}

/* Eingabebereich */
.trumbowyg-editor {
    min-height: 250px;
    color: #222222;
    background: #ffffff;
}

/* Links im Editor */
.trumbowyg-editor a {
    color: #0066cc;
}

/* Vollbildmodus */
.trumbowyg-fullscreen .trumbowyg-editor,
.trumbowyg-fullscreen .trumbowyg-box {
    background: #ffffff !important;
}

/* Responsive */
@media screen and (max-width: 768px) {

    .trumbowyg-button-pane button {
        padding: 4px !important;
    }

    .trumbowyg-editor {
        min-height: 180px;
    }
}