/* 0.7.93 – Farbige Forenbeiträge, Darkmode-sicher und zitierfest */
.ctf-wrap{
    --ctf-color-default:#172033;
    --ctf-color-red:#c62828;
    --ctf-color-orange:#b45309;
    --ctf-color-yellow:#8a6500;
    --ctf-color-green:#15803d;
    --ctf-color-turquoise:#0f766e;
    --ctf-color-blue:#1d4ed8;
    --ctf-color-purple:#7e22ce;
    --ctf-color-pink:#be185d;
    --ctf-color-gray:#4b5563;
}

.ctf-wrap.ctf-forum-dark{
    --ctf-color-default:#f4f7fb;
    --ctf-color-red:#ff8a8a;
    --ctf-color-orange:#ffb86b;
    --ctf-color-yellow:#ffe066;
    --ctf-color-green:#6ee7a8;
    --ctf-color-turquoise:#67e8f9;
    --ctf-color-blue:#7db3ff;
    --ctf-color-purple:#c4a7ff;
    --ctf-color-pink:#ff8fc7;
    --ctf-color-gray:#cbd5e1;
}

/* Die semantische Farbklasse bleibt im Beitrag bestehen. Nur die Darstellung
   wird im Darkmode auf die kontrastreiche Gegenfarbe umgeschaltet. */
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-default,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-default{color:var(--ctf-color-default)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-red,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-red{color:var(--ctf-color-red)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-orange,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-orange{color:var(--ctf-color-orange)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-yellow,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-yellow{color:var(--ctf-color-yellow)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-green,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-green{color:var(--ctf-color-green)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-turquoise,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-turquoise{color:var(--ctf-color-turquoise)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-blue,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-blue{color:var(--ctf-color-blue)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-purple,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-purple{color:var(--ctf-color-purple)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-pink,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-pink{color:var(--ctf-color-pink)!important}
.ctf-wrap .ctf-content .ctf-text-color.ctf-color-gray,
.ctf-wrap .ctf-quote-text .ctf-text-color.ctf-color-gray{color:var(--ctf-color-gray)!important}

/* TinyMCE: alle Werkzeuge bleiben in EINER Reihe. Auf kleinen Displays wird
   horizontal gescrollt statt Emoji/YouTube in eine zweite Reihe zu drücken. */
.ctf-rich-editor .mce-toolbar,
.ctf-rich-reply .mce-toolbar{
    display:flex!important;
    align-items:center!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scrollbar-width:thin;
    white-space:nowrap!important;
}
.ctf-rich-editor .mce-toolbar .mce-btn-group,
.ctf-rich-reply .mce-toolbar .mce-btn-group{
    float:none!important;
    display:inline-flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
}
.ctf-color-group{display:inline-flex!important;vertical-align:top!important}
.ctf-color-menu-btn{display:inline-block!important;margin:0!important;vertical-align:top!important;position:relative}
.ctf-color-menu-btn>button{width:36px!important;height:30px!important;padding:3px 6px!important;line-height:20px!important;text-align:center!important}
.ctf-color-trigger{display:inline-flex;align-items:center;justify-content:center;gap:2px;font-weight:800;font-size:15px;line-height:20px}
.ctf-color-trigger::after{content:'▾';font-size:9px;opacity:.72;margin-top:2px}
.ctf-color-a{position:relative;display:inline-block;line-height:18px}
.ctf-color-a::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7)}

.ctf-color-popup{
    position:absolute;
    z-index:10020;
    top:100%;
    left:0;
    right:auto;
    margin-top:5px;
    width:236px;
    padding:10px;
    display:grid;
    grid-template-columns:repeat(5,36px);
    gap:7px;
    background:#fff;
    border:1px solid #cfd4dc;
    border-radius:10px;
    box-shadow:0 14px 34px rgba(0,0,0,.22);
    color:#172033;
}
.ctf-color-popup .ctf-color-popup-title{grid-column:1/-1;font-size:12px;font-weight:800;margin:0 0 1px;color:#334155}
.ctf-color-swatch{
    width:36px;
    height:36px;
    padding:0;
    border:1px solid rgba(15,23,42,.18);
    border-radius:8px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:900;
    background:#fff;
    color:#172033;
}
.ctf-color-swatch:hover,.ctf-color-swatch:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.ctf-color-swatch[data-color="default"]{background:linear-gradient(135deg,#fff 0 47%,#e5e7eb 48% 52%,#fff 53%);color:#172033}
.ctf-color-swatch[data-color="red"]{background:var(--ctf-color-red);color:#fff}
.ctf-color-swatch[data-color="orange"]{background:var(--ctf-color-orange);color:#fff}
.ctf-color-swatch[data-color="yellow"]{background:var(--ctf-color-yellow);color:#fff}
.ctf-color-swatch[data-color="green"]{background:var(--ctf-color-green);color:#fff}
.ctf-color-swatch[data-color="turquoise"]{background:var(--ctf-color-turquoise);color:#fff}
.ctf-color-swatch[data-color="blue"]{background:var(--ctf-color-blue);color:#fff}
.ctf-color-swatch[data-color="purple"]{background:var(--ctf-color-purple);color:#fff}
.ctf-color-swatch[data-color="pink"]{background:var(--ctf-color-pink);color:#fff}
.ctf-color-swatch[data-color="gray"]{background:var(--ctf-color-gray);color:#fff}

.ctf-wrap.ctf-forum-dark .ctf-color-popup{background:#101722;border-color:#344154;color:#eef4fb}
.ctf-wrap.ctf-forum-dark .ctf-color-popup .ctf-color-popup-title{color:#dbe7f5}
.ctf-wrap.ctf-forum-dark .ctf-color-swatch[data-color="default"]{background:linear-gradient(135deg,#17202c 0 47%,#64748b 48% 52%,#17202c 53%);color:#f4f7fb}
.ctf-wrap.ctf-forum-dark .ctf-color-swatch{border-color:#465469}

@media(max-width:600px){
    .ctf-rich-editor .mce-toolbar .mce-btn>button,
    .ctf-rich-reply .mce-toolbar .mce-btn>button{min-width:32px!important}
    .ctf-color-popup{position:fixed;left:12px!important;right:12px!important;top:auto!important;bottom:12px!important;width:auto;grid-template-columns:repeat(5,minmax(38px,1fr));gap:9px;padding:14px}
    .ctf-color-swatch{width:100%;height:42px}
}