/* ============================================================================
 * OL-EDITOR - Aussehen
 * Gehoert zu media/js/ol-editor.js. Genutzt von Forum und Blog.
 * Farben bewusst als eigene Werte statt ueber Variablen - so sieht der Editor
 * auch dort richtig aus, wo die Shop-Variablen nicht geladen sind
 * (z. B. im Adminbereich).
 * ============================================================================ */

.ole {
    border: 1px solid rgba(184,145,42,.42);
    border-radius: 11px;
    background: #1a1409;
    overflow: hidden;
}

/* ── Werkzeugleiste ──────────────────────────────────────────────────── */
.ole-leiste {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    padding: 8px 10px;
    background: #241b0c;
    border-bottom: 1px solid rgba(184,145,42,.3);
}
.ole-knopf {
    min-width: 34px; height: 32px; padding: 0 8px;
    background: #322612;
    border: 1px solid rgba(184,145,42,.38);
    border-radius: 7px;
    color: #f2d98a;
    font-family: Georgia, serif; font-size: .92rem; line-height: 1;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ole-knopf:hover  { background: rgba(184,145,42,.22); border-color: #d4a843; }
.ole-knopf:active { transform: translateY(1px); }
.ole-knopf:focus-visible { outline: 2px solid #d4a843; outline-offset: 1px; }

/* Beschriftete Knoepfe wie "Überschrift" brauchen mehr Platz und eine
   kleinere Schrift als die Symbolknoepfe. */
.ole-knopf--breit {
    padding: 0 11px;
    font-family: system-ui, sans-serif;
    font-size: .74rem; letter-spacing: .02em;
}

.ole-trenner { width: 1px; height: 20px; background: rgba(184,145,42,.3); margin: 0 3px; }

.ole-farbe {
    width: 22px; height: 22px; padding: 0; border-radius: 50%;
    border: 2px solid rgba(20,16,10,.9);
    outline: 1px solid rgba(184,145,42,.45);
    cursor: pointer; transition: transform .15s;
}
.ole-farbe:hover { transform: scale(1.18); outline-color: #d4a843; }
/* Der Zuruecksetzen-Knopf zeigt einen durchgestrichenen Kreis */
.ole-farbe--reset {
    background: #f2ead6;
    position: relative;
}
.ole-farbe--reset::after {
    content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px;
    width: 2px; background: #c0392b; transform: rotate(45deg);
}

/* ── Eingabefeld ─────────────────────────────────────────────────────
   Bewusst HELL: So ist sofort erkennbar, dass man hier schreibt - wie beim
   Chat-Eingabefeld. Schriftgroesse mindestens 16px, sonst zoomt iOS beim
   Antippen die ganze Seite. */
.ole-feld {
    min-height: 220px;
    padding: 16px 18px;
    background: #fdf4e0;
    color: #241a0c;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
    line-height: 1.65;
    outline: none;
    overflow-wrap: break-word;
}
.ole-feld:focus { box-shadow: inset 0 0 0 2px rgba(212,168,67,.5); }
.ole-feld:empty::before {
    content: attr(data-platzhalter);
    color: rgba(36,26,12,.45);
    font-style: italic;
    pointer-events: none;
}

/* Inhalte im Eingabefeld so darstellen, wie sie spaeter erscheinen */
.ole-feld h2 { font-size: 1.4rem; margin: 18px 0 8px; color: #6b5218; }
.ole-feld h3 { font-size: 1.18rem; margin: 16px 0 7px; color: #6b5218; }
.ole-feld h4 { font-size: 1.03rem; margin: 14px 0 6px; color: #6b5218; }
.ole-feld p  { margin: 0 0 12px; }
.ole-feld ul, .ole-feld ol { margin: 0 0 12px; padding-left: 26px; }
.ole-feld li { margin: 3px 0; }
.ole-feld blockquote {
    margin: 12px 0; padding: 8px 14px;
    border-left: 3px solid #b8912a;
    background: rgba(184,145,42,.1);
    font-style: italic;
}
.ole-feld a { color: #8a6d3b; text-decoration: underline; }
.ole-feld img {
    max-width: 100%; height: auto; display: block;
    margin: 10px 0; border-radius: 6px;
}

/* ── Emoji-Auswahl ───────────────────────────────────────────────────── */
.ole-emojis {
    display: flex; flex-wrap: wrap; gap: 3px;
    padding: 9px 11px;
    background: #1f1809;
    border-bottom: 1px solid rgba(184,145,42,.25);
    max-height: 150px; overflow-y: auto;
}
.ole-emojis[hidden] { display: none; }
.ole-emoji {
    width: 34px; height: 32px; padding: 0;
    background: transparent; border: 0; border-radius: 6px;
    font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.ole-emoji:hover { background: rgba(184,145,42,.22); }

/* ── Vorschau ─────────────────────────────────────────────────────────
   Zeigt den Beitrag so, wie er spaeter erscheint: dunkler Grund wie im
   Forum und im Blog, statt des hellen Schreibfeldes. Der Unterschied ist
   gewollt - man soll auf den ersten Blick sehen, dass man gerade NICHT
   schreibt. */
.ole-vorschau {
    padding: 20px 22px;
    background: #161107;
    color: #f0e6d2;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px; line-height: 1.75;
    min-height: 220px;
    border-top: 2px solid rgba(184,145,42,.35);
}
.ole-vorschau[hidden] { display: none; }
.ole-vorschau h2 { font-size: 1.5rem; color: #f2d98a; margin: 22px 0 10px; line-height: 1.3; }
.ole-vorschau h3 { font-size: 1.22rem; color: #e8cf85; margin: 18px 0 8px; line-height: 1.35; }
.ole-vorschau h4 { font-size: 1.05rem; color: #e8cf85; margin: 16px 0 7px; }
.ole-vorschau h2:first-child, .ole-vorschau h3:first-child { margin-top: 0; }
.ole-vorschau p  { margin: 0 0 14px; }
.ole-vorschau ul, .ole-vorschau ol { margin: 0 0 14px; padding-left: 26px; }
.ole-vorschau li { margin: 5px 0; }
.ole-vorschau blockquote {
    margin: 16px 0; padding: 10px 16px;
    border-left: 3px solid #b8912a;
    background: rgba(184,145,42,.1);
    font-style: italic; color: rgba(240,230,210,.85);
}
.ole-vorschau a { color: #d4a843; text-decoration: underline; }
.ole-vorschau img {
    max-width: 100%; height: auto; display: block;
    margin: 16px 0; border-radius: 8px;
    border: 1px solid rgba(184,145,42,.25);
}
.ole-vorschau-leer { color: rgba(240,230,210,.45); font-style: italic; }

/* In der Vorschau bleibt nur der Zurueck-Knopf bedienbar - alles andere
   waere wirkungslos und wuerde nur verwirren. */
.ole--vorschau .ole-knopf:not([data-ole-knopf="vorschau"]),
.ole--vorschau .ole-farbe,
.ole--vorschau .ole-trenner { opacity: .3; pointer-events: none; }
.ole--vorschau .ole-knopf[data-ole-knopf="vorschau"] {
    background: #d4a843; color: #1a1409; border-color: #d4a843; font-weight: 700;
}

/* ── Fusszeile mit Hinweis ───────────────────────────────────────────── */
.ole-fuss {
    padding: 7px 12px;
    background: #241b0c;
    border-top: 1px solid rgba(184,145,42,.25);
    color: rgba(253,244,224,.5);
    font-family: system-ui, sans-serif; font-size: .72rem;
}

@media (max-width: 560px) {
    .ole-leiste { gap: 4px; padding: 7px 8px; }
    .ole-knopf  { min-width: 32px; height: 30px; padding: 0 6px; font-size: .86rem; }
    .ole-feld   { min-height: 180px; padding: 13px 14px; }
}