/* ==========================================================================
   EBENE 3: EDITOR TYPOGRAPHY & BASE THEME
   Definiert das Standard-Aussehen für nutzergeneriertes HTML.
   Alle Regeln greifen nur innerhalb des Containers ".editor-content".
   ========================================================================== */

.editor-content {
    word-wrap: break-word;
}

/* --- 1. GRUNDLAGEN (Typografie) --- */
.editor-content h1 { font-size: 2em; font-weight: 700; margin: 1em 0 0.5em; line-height: 1.2; }
.editor-content h2 { font-size: 1.5em; font-weight: 700; margin: 1em 0 0.5em; line-height: 1.3; }
.editor-content h3 { font-size: 1.25em; font-weight: 700; margin: 1em 0 0.5em; line-height: 1.4; }
.editor-content ul { list-style-type: disc; padding-left: 1.5rem; margin: 1em 0; }
.editor-content ol { padding-left: 1.5rem; margin: 1em 0; }
.editor-content li { display: list-item; }
.editor-content hr { border: none; border-top: 2px solid var(--color-muted); margin: 2.5rem 0; }
.editor-content a { 
    color: var(--color-primary); 
    text-decoration: underline; 
    text-underline-offset: 2px; 
    cursor: pointer; 
}

/* --- 2. ZITATE & HINWEIS-BOXEN (Callouts) --- */
.editor-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--color-muted-fg);
    background: linear-gradient(90deg, var(--color-primary) 0%, transparent 15%);
    background-size: 15% 100%; background-repeat: no-repeat;
}
.editor-content .callout { position: relative; padding: 1rem 1rem 1rem 3rem; border-radius: 0.5rem; margin: 1.5rem 0; border-left: 4px solid; }
.editor-content .callout p:first-child { margin-top: 0; }
.editor-content .callout p:last-child { margin-bottom: 0; }
.editor-content .callout::before { position: absolute; left: 1rem; top: 1rem; font-size: 1.25rem; line-height: 1; }
.editor-content .callout-info { background-color: rgba(59, 130, 246, 0.1); border-left-color: #3b82f6; }
.editor-content .callout-info::before { content: '💡'; }
.editor-content .callout-warning { background-color: rgba(234, 179, 8, 0.1); border-left-color: #eab308; }
.editor-content .callout-warning::before { content: '⚠️'; }
.editor-content .callout-danger { background-color: rgba(239, 68, 68, 0.1); border-left-color: #ef4444; }
.editor-content .callout-danger::before { content: '🚨'; }
.editor-content .callout-success { background-color: rgba(34, 197, 94, 0.1); border-left-color: #22c55e; }
.editor-content .callout-success::before { content: '✅'; }

/* --- 3. TABELLEN (Smart Responsive) --- */
.editor-content .tableWrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    /* Deine Schatten-Styles bleiben erhalten: */
    background: linear-gradient(to right, var(--color-surface) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), var(--color-surface) 70%) 0 100%, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.1), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.1), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: var(--color-surface);
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

.editor-content table {
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0; 
    max-width: none !important; /* <--- DAS IST DER WICHTIGSTE BEFEHL! */
}

.editor-content td, .editor-content th {
    border: 1px solid var(--color-muted);
    padding: 0.5rem;
    vertical-align: top;
    position: relative;
    min-width: 3em; /* Verhindert komplett zerquetschte Zellen */
}
.editor-content th { background-color: var(--color-muted); font-weight: 700; text-align: left; }
.editor-content table p { margin: 0; padding: 0; line-height: 1.4; }
.editor-content table p + p { margin-top: 0.5rem; }

/* Zebra-Style */
.editor-content table.table-zebra tr:nth-child(odd) > td:not([data-bg-color]),
.editor-content table.table-zebra tr:nth-child(odd) > th:not([data-bg-color]) {
    background-color: rgba(128, 128, 128, 0.08);
}

/* Optionen aus dem Editor */
.editor-content table[data-padding="small"] td, .editor-content table[data-padding="small"] th { padding: 0.25rem; }
.editor-content table[data-padding="large"] td, .editor-content table[data-padding="large"] th { padding: 1.25rem; }
.editor-content table[data-word-wrap="break-word"] td, .editor-content table[data-word-wrap="break-word"] th { word-break: break-all; overflow-wrap: anywhere; }
.editor-content table[data-word-wrap="nowrap"] td, .editor-content table[data-word-wrap="nowrap"] th { white-space: nowrap; }

/* --- NEU: HIGH CONTRAST FIX FÜR TABELLEN --- */
.high-contrast .editor-content table,
.high-contrast .editor-content th,
.high-contrast .editor-content td {
    border-color: var(--color-surface-fg) !important;
}
.high-contrast .editor-content hr,
.high-contrast .editor-content blockquote {
    border-color: var(--color-surface-fg) !important;
}

/* --- 4. MEDIEN (Bilder, Videos, Audio) --- */
.editor-content figure {
    display: flex;
    flex-direction: column;
    margin: 1.5rem auto;
    position: relative;
    align-items: center; 
    clear: both; /* Verhindert Float-Bugs */
}
.editor-content figure[style*="float: left"] { float: left; margin: 0.5rem 1.5rem 1rem 0; align-items: flex-start; clear: none; }
.editor-content figure[style*="float: right"] { float: right; margin: 0.5rem 0 1rem 1.5rem; align-items: flex-end; clear: none; }
.editor-content figure img, .editor-content figure video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.25rem;
}
.editor-content figcaption { text-align: center; font-size: 0.75rem; color: var(--color-muted-fg); width: 100%; }

/* --- 5. FEEDBACK MATRIX TEMPLATES --- */
.editor-content .feedback-stimulus { border-left: 4px solid var(--color-primary); padding-left: 1rem; color: var(--color-muted-fg); margin-bottom: 1.5rem; }
.editor-content .feedback-box { background: var(--color-surface, #ffffff); padding: 1rem; border: 1px solid var(--color-muted, #cbd5e1); border-radius: 8px; margin-bottom: 1.5rem; }
.editor-content .feedback-header { display: flex; gap: 1rem; margin-bottom: 0.5rem; color: var(--color-muted-fg, #64748b); font-size: 0.7em; font-weight: bold; text-transform: uppercase; }
.editor-content .feedback-header-label { width: 40%; }
.editor-content .feedback-header-track { flex: 1; display: flex; text-align: center; }
.editor-content .feedback-header-col { flex: 1; font-size: 0.7em; color: var(--color-muted-fg); line-height: 1.1; margin-top: 4px; }
.editor-content .feedback-legend { margin-top: 1rem; font-size: 0.8em; display: flex; gap: 1rem; justify-content: flex-end; }
.editor-content .feedback-legend-item { display: flex; align-items: center; gap: 6px; }
.editor-content .feedback-correct-text { color: var(--color-success, #22c55e); font-weight: bold; }
/* --- NEUE MATRIX LAYOUT KLASSEN --- */

/* 1. Unified Grid für das Profil (Löst das Umbruch-Problem) */
.editor-content .feedback-matrix-profile {
    display: grid;
    grid-template-columns: fit-content(40%) 1fr; /* Links max 40%, Rest für die Linien */
    grid-auto-rows: 1fr; /* Alle Zeilen werden exakt gleich hoch (wichtig für SVG Y-Achse!) */
    align-items: stretch;
    position: relative;
    gap: 0 1rem;
}

/* 2. SVG Wrapper (Legt sich exakt über die rechte Grid-Spalte) */
.editor-content .feedback-matrix-svg-wrapper {
    grid-column: 2;
    grid-row: 1 / -1; /* Umspannt alle Zeilen von oben bis unten */
    position: relative;
}

/* 3. Label-Zellen (Links) */
.editor-content .feedback-matrix-label {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.9em;
    word-break: break-word; /* Sanfter Umbruch bei extrem langen Texten */
    border-bottom: 1px dashed rgba(128, 128, 128, 0.2);
}

/* 4. Flex-Track & Spalten (Erzwingt EXAKT gleiche Breiten) */
.editor-content .feedback-matrix-track {
    display: flex;
    width: 100%;
    align-items: center;
    border-bottom: 1px dashed rgba(128, 128, 128, 0.2);
}
.editor-content .feedback-matrix-col {
    flex: 1 1 0%; /* Das ist der Trick! Keine Spalte darf breiter sein als die andere */
    position: relative;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Profillinie (Raster) */
.editor-content .feedback-profile-grid { display: flex; gap: 1rem; position: relative; }
.editor-content .feedback-profile-labels { width: 40%; display: flex; flex-direction: column; }
.editor-content .feedback-profile-tracks { flex: 1; display: flex; flex-direction: column; position: relative; }

/* Flex: 1 sorgt dafür, dass alle Zeilen exakt gleich hoch sind! */
.editor-content .feedback-profile-label-cell { flex: 1; display: flex; align-items: center; min-height: 40px; border-bottom: 1px dashed rgba(128, 128, 128, 0.2); font-size: 0.9em; font-weight: 500; padding: 0.5rem 0; }
.editor-content .feedback-profile-track-cell { flex: 1; display: flex; position: relative; border-bottom: 1px dashed rgba(128, 128, 128, 0.2); min-height: 40px; }
.editor-content .feedback-profile-cell { flex: 1; position: relative; }

/* Z-Index und Barrierefreie Formen */
.editor-content .feedback-profile-line { position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--color-muted, #cbd5e1); z-index: 1; }
.editor-content .feedback-profile-dot-correct { width: 14px; height: 14px; border-radius: 2px; background: var(--color-success, #22c55e); border: 2px solid var(--color-surface, #ffffff); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; } /* QUADRAT */
.editor-content .feedback-profile-dot-user { width: 12px; height: 12px; border-radius: 50%; background: var(--color-primary, #3b82f6); border: 2px solid var(--color-surface, #ffffff); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; transition: opacity 0.2s ease; } /* KREIS */

/* Balkendiagramme */
.editor-content .feedback-chart-title { font-weight: bold; margin-bottom: 1rem; }
.editor-content .feedback-chart-track { position: relative; height: 120px; margin-bottom: 0.5rem; display: flex; gap: 8px; }
.editor-content .feedback-chart-zero-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--color-muted, #cbd5e1); z-index: 1; }
.editor-content .feedback-chart-col { flex: 1; position: relative; height: 100%; }

/* Basis-Balken: Ruhig und neutral, visualisiert nur die Punkte */
.editor-content .feedback-chart-bar-bg { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 40px; background: rgba(128, 128, 128, 0.15); border-radius: 4px; box-sizing: border-box; }

/* User-Antwort: Gestrichelter Rahmen, bläulich transparent */
.editor-content .feedback-chart-bar-user { 
    position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 40px; z-index: 2; transition: opacity 0.2s ease; box-sizing: border-box; 
    background-color: rgba(59, 130, 246, 0.2); 
    border: 2px dashed var(--color-primary, #3b82f6); 
    border-radius: 4px;
}

.editor-content .feedback-chart-score { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.75em; font-weight: bold; color: var(--color-muted-fg, #64748b); z-index: 3; line-height: 1; text-align: center; }
.editor-content .feedback-chart-info { font-size: 0.85em; display: flex; justify-content: space-between; background: rgba(128, 128, 128, 0.05); padding: 8px; border-radius: 4px; margin-bottom: 1rem; }

/* Semantische Sichtbarkeit (State-Klassen) */
.editor-content .is-visible-0 { display: none !important; }
.editor-content .is-visible-1 { opacity: 1 !important; }

/* --- 6. FEEDBACK HOTSPOT TEMPLATES --- */
.editor-content .feedback-hotspot-empty { padding: 1rem; background: rgba(128, 128, 128, 0.05); border-radius: 8px; text-align: center; font-style: italic; color: var(--color-muted-fg, #64748b); }
.editor-content .feedback-hotspot-container { position: relative; display: inline-block; max-width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-muted, #cbd5e1); }
.editor-content .feedback-hotspot-image { max-width: 100%; height: auto; display: block; }
.editor-content .feedback-hotspot-spot { position: absolute; transform: translate(-50%, -50%); border-style: solid; border-width: 2px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.editor-content .feedback-hotspot-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--color-surface, #ffffff); border: 1px solid var(--color-muted, #cbd5e1); padding: 2px 6px; font-size: 11px; font-weight: bold; color: var(--color-surface-fg, #0f172a); white-space: nowrap; margin-top: 6px; border-radius: 4px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }

/* --- 7. LÜCKENTEXT FEEDBACK (Golden Standard) --- */
.editor-content .feedback-gap-box {
    line-height: 1.6;
    padding: 1rem;
    background-color: var(--color-surface);
    border: 1px solid var(--color-muted);
    border-radius: 4px;
}
/* FIX: Margins restlos entfernt, da Leerzeichen im Text ausreichen */
.editor-content .feedback-gap-user {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--color-muted-fg);
    text-underline-offset: 3px;
}
.editor-content .feedback-gap-solution,
.editor-content .feedback-gap-correct {
    color: var(--color-success, #16a34a);
    font-weight: 600;
}
.editor-content .feedback-gap-wrong {
    color: var(--color-danger, #dc2626);
    text-decoration: line-through;
}
.editor-content .feedback-gap-wrapper {
    white-space: nowrap;
}

/* --- 8. FEEDBACK TABELLEN (Golden Standard für Formula etc.) --- */
.editor-content .feedback-table {
    width: auto; /* Tabelle schrumpft auf den nötigen Inhalt */
    min-width: 40%; /* Sieht nicht zu winzig aus, wenn nur ein Zeichen drinsteht */
    margin: 0.75rem auto 0; /* Zentriert die Tabelle elegant im Container */
    border-collapse: collapse;
    font-size: 0.9em;
}
.editor-content .feedback-table th {
    border: 1px solid var(--color-muted);
    background-color: rgba(128, 128, 128, 0.05);
    padding: 0.25rem 0.75rem; /* Höhe deutlich reduziert, Seitenabstand behalten */
    text-align: center;
    font-weight: bold;
    color: var(--color-muted-fg);
}
.editor-content .feedback-table td {
    border: 1px solid var(--color-muted);
    padding: 0.25rem 0.75rem; /* Höhe deutlich reduziert */
    vertical-align: middle;
    text-align: center;
}
.editor-content .feedback-result-icon {
    position: relative;
    width: 20px; /* Leicht verkleinert für kompaktere Optik */
    height: 20px;
    margin: 0 auto;
}
.editor-content .feedback-result-icon > * {
    position: absolute;
    top: 0;
    left: 0;
}

/* Mobile Overrides (zwingt Floats und Pixelbreiten in die Knie) */
@media (max-width: 768px) {
    .editor-content figure[data-mobile-full="true"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- 9. FEEDBACK CODE TEMPLATE CLASSES --- */
.editor-content .feedback-code-stacked > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

.editor-content .feedback-code-label { 
    display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; 
    letter-spacing: 0.05em; color: var(--color-muted-fg, #64748b); margin-bottom: 0.5rem; 
}
.editor-content .feedback-code-label.has-mt { margin-top: 1rem; }
.editor-content .feedback-code-label.is-success { color: var(--color-success, #16a34a); }

.editor-content .feedback-code-block { 
    background-color: rgba(128, 128, 128, 0.1); border-radius: 0.5rem; 
    padding: 1rem; overflow-x: auto; border: 1px solid rgba(128, 128, 128, 0.5); 
}
.editor-content .feedback-code-block.is-success { 
    background-color: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.3); 
}
.editor-content .feedback-code-block.is-sm { padding: 0.75rem; border-radius: 0.25rem; }
.editor-content .feedback-code-block.h-24 { height: 6rem; }
.editor-content .feedback-code-block.h-32 { height: 8rem; }

.editor-content .feedback-code-pre { 
    margin: 0; font-family: monospace; font-size: 0.875rem; color: var(--color-surface-fg, #0f172a); 
}
.editor-content .feedback-code-pre.is-sm { font-size: 0.75rem; }
.editor-content .feedback-code-pre.is-success { color: var(--color-success-fg, #14532d); }

.editor-content .feedback-code-grid { 
    display: grid; gap: 1rem; grid-template-columns: repeat(1, minmax(0, 1fr)); 
}
@media (min-width: 768px) { 
    .editor-content .feedback-code-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } 
}