/* Markdown-specific styles */

/* Table styles */
.markdown-table-container {
    overflow-x: auto;
    margin: var(--spacing-md) 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: block;
    /* Verhindert Flex-Verhalten */
    width: 100%;
}

/* Verstecke leere Paragraphen in Tabellen-Containern */
.markdown-table-container p:empty {
    display: none;
}

/* Verstecke alle Paragraphen in Tabellen-Containern */
.markdown-table-container p {
    display: none;
}

.markdown-table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    font-size: calc(1.05rem * (var(--global-font-size, 100%) / 100));
    /* Erhöhte Schriftgröße für Tabellen */
    /* overflow: hidden; */
    /* Entfernt, um dem Container das Scroll-Handling zu überlassen */
    display: table;
    /* Erzwingt Tabellen-Layout */
    table-layout: auto;
    /* Geändert, damit sich die Tabelle an den Inhalt anpasst */
    /* Verbessert die Darstellung */
}

.markdown-table thead {
    display: table-header-group;
    /* Erzwingt Tabellenkopf-Layout */
}

.markdown-table tbody {
    display: table-row-group;
    /* Erzwingt Tabellenkörper-Layout */
}

.markdown-table th {
    background-color: var(--secondary-color);
    color: white;
    font-weight: bold;
    padding: var(--spacing-md) var(--spacing-lg);
    /* Mehr Padding für Kopfzellen */
    text-align: left;
    border-bottom: 2px solid var(--secondary-dark);
    display: table-cell;
    /* Erzwingt Tabellenzellen-Layout */
}

.markdown-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    /* Mehr Padding für Datenzellen */
    border-bottom: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    display: table-cell;
    /* Erzwingt Tabellenzellen-Layout */
}

.markdown-table tr {
    display: table-row;
    /* Erzwingt Tabellenzeilen-Layout */
}

.markdown-table tr:nth-child(even) td {
    background-color: #f0f0f0;
}

.markdown-table tr:last-child td {
    border-bottom: none;
}

.markdown-table tr:hover td {
    background-color: rgba(74, 111, 165, 0.1);
}

/* Code block styles */
pre {
    background-color: #f5f5f5;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-lg);
    /* Angepasstes Padding für Code-Blöcke */
    overflow-x: auto;
    margin: var(--spacing-lg) 0;
    /* Erhöhter Oben/Unten Margin für Code-Blöcke */
    border-left: 4px solid var(--primary-color);
    border: 1px solid var(--border-color);
}

pre code {
    font-family: 'Courier New', monospace;
    font-size: calc(0.95rem * (var(--global-font-size, 100%) / 100));
    /* Leicht angepasste Schriftgröße für Code in `pre` */
    line-height: 1.6;
    /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
    color: #333;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

/* Language-specific code highlighting */
pre code.language-python {
    color: #0066cc;
}

pre code.language-javascript {
    color: #c7254e;
}

pre code.language-html {
    color: #e34c26;
}

pre code.language-css {
    color: #563d7c;
}

/* Inline code */
code {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    /* Präzisere Padding-Anpassung für Inline-Code */
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: calc(0.9em * (var(--global-font-size, 100%) / 100));
    /* Angepasste Schriftgröße für Inline-Code, relativ zum umgebenden Text */
    color: var(--primary-dark);
}

/* Tabellen im Layout */
.markdown-table-container {
    margin: 0;
    padding: 0;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    overflow-x: auto;
    display: block;
    /* Verhindert Flex-Verhalten */
}

/* Headings */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6,
.markdown-heading {
    /* .markdown-heading für Konsistenz hinzugefügt, falls es als generische Klasse genutzt wird */
    margin-top: var(--spacing-xl);
    /* Vereinheitlichter oberer Margin */
    margin-bottom: var(--spacing-lg);
    /* Vereinheitlichter unterer Margin */
    color: var(--heading-color, var(--secondary-color));
    /* Verwendung der globalen Variable oder Fallback */
    background-color: var(--primary-color-light);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    /* Font-sizes werden von base.css geerbt, hier keine spezifischen font-size Definitionen mehr */
}

/* Spezifische Padding-Anpassungen, falls für bestimmte Level nötig, sonst global von oben */
.markdown-content h1,
.markdown-h1 {
    /* font-size wird von base.css geerbt */
    padding: var(--spacing-xl);
    /* Großzügiges Padding für H1 */
    border-bottom: none;
}

.markdown-content h2,
.markdown-h2 {
    /* font-size wird von base.css geerbt */
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: none;
}

.markdown-content h3,
.markdown-h3 {
    /* font-size wird von base.css geerbt */
    padding: var(--spacing-md) var(--spacing-lg);
}

.markdown-content h4,
/* .markdown-h4 beibehalten, falls es als separate Klasse existiert */
.markdown-h4 {
    /* font-size wird von base.css geerbt */
    /* Margin wird von der allgemeinen .markdown-content hX Regel oben geerbt */
    padding: var(--spacing-sm) var(--spacing-md);
}

.markdown-content h5,
/* .markdown-h5/.markdown-h6 beibehalten */
.markdown-h5,
.markdown-content h6,
.markdown-h6 {
    /* font-size wird von base.css geerbt */
    /* Margin wird von der allgemeinen .markdown-content hX Regel oben geerbt */
    padding: var(--spacing-xs) var(--spacing-sm);
}

/* Lists mit hierarchischer Einrückung und rundem Block-Stil */
.markdown-content ul,
.markdown-content ol {
    /* padding: var(--spacing-md); */
    /* Entfernt für präzisere padding-left Steuerung */
    padding-left: var(--spacing-xl);
    /* Beibehaltung der Basiseinrückung für den Inhalt */
    /* Basiseinrückung für Listen, Platz für Marker + Text */
    margin-top: var(--spacing-lg);
    /* Erhöhter oberer Margin */
    margin-bottom: var(--spacing-xl);
    /* Erhöhter unterer Margin */
    margin-left: 0;
    /* Stellt sicher, dass die Liste selbst nicht zusätzlich eingerückt ist, Einrückung über padding-left */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* Beibehalten, falls Inhalt doch mal überläuft */
    list-style-position: outside;
    /* Sicherstellen, dass Marker außerhalb des Textflusses sind */
}

/* Einrückung für Listen basierend auf vorhergehender Überschrift */
/* Einrückung für Listen basierend auf vorhergehender Überschrift */
/* Ziel: Liste (Außenkante) beginnt bündig mit der Überschrift (Außenkante) */
.markdown-content h1+ul,
.markdown-content h1+ol,
.markdown-content h2+ul,
.markdown-content h2+ol,
.markdown-content h3+ul,
.markdown-content h3+ol,
.markdown-content h4+ul,
.markdown-content h4+ol,
.markdown-content h5+ul,
.markdown-content h5+ol,
.markdown-content h6+ul,
.markdown-content h6+ol {
    margin-left: 0;
    /* Liste bündig mit dem Überschriftenblock außen */
    padding-left: var(--spacing-xl);
    /* Innen-Padding für den Listeninhalt beibehalten/anpassen */
    margin-top: var(--spacing-lg);
    /* Ausreichend Abstand nach oben zur Überschrift */
    margin-bottom: var(--spacing-xl);
    /* Ausreichend Abstand nach unten zum nächsten Element */
}

/* Verschachtelte Listen sollten zusätzliche Einrückung haben */
.markdown-content ul ul,
.markdown-content ol ol,
.markdown-content ul ol,
.markdown-content ol ul {
    margin-left: var(--spacing-lg);
    /* Angepasste Einrückung für verschachtelte Listen */
    /* Einrückung für verschachtelte Listen */
    padding-left: var(--spacing-md);
    /* Etwas Padding für den Inhalt verschachtelter Listen */
    border-left: 2px solid var(--primary-color-light);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
    /* Erhöhter oberer Margin */
    margin-bottom: var(--spacing-md);
    /* Erhöhter unterer Margin */
}

/* Listenpunkte stylen */
.markdown-content ul li,
.markdown-content ol li {
    margin-bottom: var(--spacing-sm);
    /* Konsistenter Abstand zwischen Listenelementen */
    position: relative;
    /* Wichtig für die absolute Positionierung von :before für ul, für ol derzeit nicht aktiv genutzt */
    /* padding-left wird unten spezifischer gehandhabt */
}

.markdown-content ul li {
    padding-left: 0;
    /* Für ul li, da custom marker mit ::before absolut positioniert wird */
}

/* Für .markdown-content ol li wird padding-left nicht auf 0 gesetzt,
   damit die Standardnummerierung (list-style-type: decimal)
   in Kombination mit list-style-position: outside (auf ol gesetzt)
   korrekt im padding-Bereich des ol-Elements angezeigt werden kann. */

.markdown-content ul li:last-child,
.markdown-content ol li:last-child {
    margin-bottom: 0;
}

/* Spezielle Stile für ungeordnete Listen */
.markdown-content ul {
    list-style-type: none;
    /* Benutzerdefinierte Marker über :before */
}

.markdown-content ul li {
    padding-left: 0;
    /* Text beginnt bündig mit ol li Text (nach ul Padding) */
    /* Platz für das :before Element und Textabstand wird durch ::before Positionierung gehandhabt */
}

.markdown-content ul li:before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: calc(var(--spacing-md) * -1);
    /* Marker relativ zum li-Padding positionieren */
    top: 0.1em;
    /* Vertikale Anpassung */
}

/* Für ol Listen wird die Standardnummerierung verwendet, `list-style-position: outside` und `padding-left` auf `ol` kümmern sich darum. */
.markdown-content ol {
    list-style-type: decimal;
    /* Oder andere gewünschte Nummerierung */
}

/* Die generische .markdown-content li Regel (Zeile 253 im Original) wird entfernt,
   da sie mit der spezifischeren .markdown-content ul li, .markdown-content ol li Regel für margin-bottom kollidiert.
   Die spezifischeren Regeln mit var(--spacing-sm) sind konsistenter. */

/* Blockquotes */
.markdown-content blockquote {
    border-left: 4px solid var(--primary-color);
    color: var(--secondary-light);
    padding: var(--spacing-lg);
    /* Beibehalten, da gut */
    margin-top: var(--spacing-xl);
    /* Erhöhter oberer Margin */
    margin-bottom: var(--spacing-xl);
    /* Erhöhter unterer Margin */
    margin-left: 0;
    /* Kein horizontaler Margin für das Blockquote selbst */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
}

/* Horizontal rule */
.markdown-content hr {
    height: 0.25rem;
    padding: 0;
    margin: var(--spacing-xxl) 0;
    /* Stark erhöhter Margin für HR für klare Trennung */
    background-color: var(--primary-color-light);
    border: 0;
    border-radius: var(--border-radius-sm);
}

/* Paragraphen im Grid-Layout mit hierarchischer Einrückung */
.markdown-content p {
    margin-top: 0;
    /* Kein oberer Margin, wenn direkt nach Überschrift (wird durch Überschrift gesteuert) */
    margin-bottom: var(--spacing-lg);
    /* Unterer Margin beibehalten/leicht angepasst */
    margin-left: 0;
    /* Standard-Margin links, Einrückung wird spezifisch gesteuert */
    padding: var(--spacing-md) var(--spacing-lg);
    /* Beibehaltung des Paddings, da bereits gut */
    line-height: 1.7;
    /* Erhöhte Zeilenhöhe für bessere Lesbarkeit von Paragraphen */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Einrückung für Paragraphen basierend auf vorhergehender Überschrift */
.markdown-content h2+p {
    margin-left: var(--spacing-xl);
}

.markdown-content h3+p {
    margin-left: calc(var(--spacing-xl) * 2);
}

.markdown-content h4+p {
    margin-left: calc(var(--spacing-xl) * 3);
}

/* Code-Blöcke mit hierarchischer Einrückung und rundem Block-Stil */
.markdown-content pre {
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.markdown-content h2+pre {
    margin-left: var(--spacing-xl);
}

.markdown-content h3+pre {
    margin-left: calc(var(--spacing-xl) * 2);
}

.markdown-content h4+pre {
    margin-left: calc(var(--spacing-xl) * 3);
}

/* Anpassungen für responsives Layout */
.markdown-content .content-section {
    margin-bottom: var(--spacing-xl);
    /* Größerer unterer Margin für content-section */
}

/* Code-Blöcke im responsiven Layout */
.markdown-content pre,
.markdown-content blockquote {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Listen im responsiven Layout - keine flex-Darstellung */
.markdown-content ul,
.markdown-content ol {
    height: auto;
    display: block;
}

/* Tabellen im responsiven Layout - keine flex-Darstellung */
.markdown-content .markdown-table-container {
    overflow-x: auto;
    display: block;
    width: 100%;
    height: auto;
    grid-column: 1 / -1;
    /* Stellt sicher, dass Tabellen nicht im Grid sind */
}

/* Überschriften sollen immer die volle Breite haben */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    width: 100%;
}

/* Code-Blöcke im responsiven Layout */
.markdown-content pre {
    flex: 1;
    margin: var(--spacing-md) 0;
    /* Oben/Unten Margin auch im responsiven Layout für pre */
}

/* Tabellen im responsiven Layout */
.markdown-content .markdown-table {
    width: 100%;
    margin: 0;
}

/* Dark Mode Specific Styles */
[data-theme="dark"] .markdown-content pre {
    background-color: var(--secondary-dark);
    /* Dunkler Hintergrund für Codeblöcke */
    border-color: var(--secondary-light);
    border-left-color: var(--primary-color);
}

[data-theme="dark"] .markdown-content pre code {
    color: var(--dark-text);
    /* Angepasster heller Text für Code */
    background-color: transparent;
}

/* Spezifische Syntax-Hervorhebung für Dark Mode anpassen (optional, hier als Beispiel) */
[data-theme="dark"] .markdown-content pre code.language-python {
    color: #87ceeb;
    /* Helleres Blau für Python */
}

[data-theme="dark"] .markdown-content pre code.language-javascript {
    color: #f08080;
    /* Helleres Rot für JS */
}

[data-theme="dark"] .markdown-content pre code.language-html {
    color: #ffcc99;
    /* Helleres Orange für HTML */
}

[data-theme="dark"] .markdown-content pre code.language-css {
    color: #dda0dd;
    /* Helleres Lila für CSS */
}


[data-theme="dark"] .markdown-content code {
    /* Inline code */
    background-color: var(--secondary-dark);
    color: var(--dark-text);
    /* Angepasster heller Text für Inline-Code */
}

[data-theme="dark"] .markdown-content p {
    background-color: rgba(44, 62, 80, 0.7);
    /* Dunklerer transparenter Hintergrund */
    border-color: var(--secondary-dark);
    color: var(--dark-text);
    /* Heller Text für Paragraphen */
}

[data-theme="dark"] .markdown-content ul,
[data-theme="dark"] .markdown-content ol {
    background-color: rgba(44, 62, 80, 0.7);
    border-color: var(--secondary-dark);
    color: var(--dark-text);
}

[data-theme="dark"] .markdown-content ul li:before {
    color: var(--primary-color);
    /* Sicherstellen, dass Aufzählungszeichen die richtige Farbe haben */
}


[data-theme="dark"] .markdown-content blockquote {
    background-color: rgba(44, 62, 80, 0.7);
    border-color: var(--secondary-dark);
    border-left-color: var(--primary-color);
    color: var(--dark-text);
    /* Angepasster heller Text für Blockquotes */
}

[data-theme="dark"] .markdown-table th {
    background-color: var(--secondary-dark);
    color: var(--dark-text-strong);
    /* Stärkerer Kontrast für Lesbarkeit */
    border-bottom-color: var(--secondary-light);
}

[data-theme="dark"] .markdown-table td {
    background-color: var(--dark-card-bg);
    /* Konsistenter dunkler Hintergrund für Zellen */
    border-bottom-color: var(--secondary-dark);
    color: var(--dark-text);
}

[data-theme="dark"] .markdown-table tr:nth-child(even) td {
    background-color: var(--dark-card-bg-lighter);
    /* Leicht hellerer Hintergrund für gestreifte Zeilen */
}

[data-theme="dark"] .markdown-table tr:hover td {
    background-color: rgba(90, 139, 205, 0.2);
    /* Angepasster Hover-Effekt */
}

[data-theme="dark"] .markdown-content h1,
[data-theme="dark"] .markdown-content h2,
[data-theme="dark"] .markdown-content h3,
[data-theme="dark"] .markdown-heading {
    background-color: var(--primary-color-very-light);
    /* Noch hellere Variante für Dark Mode */
    color: var(--dark-text-strong);
    /* Stärkerer Kontrast für Lesbarkeit */
    border-left-color: var(--primary-color);
}

/* --- Board Mode Specific Styles --- */

/* Standardverhalten für Slides im normalen Modus */
.board-slide {
    display: block;
    /* Standardmäßig sichtbar im normalen Modus */
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Ensure slides take full height and use flex for centering */
#content.board-mode .board-slide {
    display: none;
    /* Hidden by default in board mode */
    flex-direction: column;
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* Hide overflow initially */
    position: relative;
    /* For positioning navigation */
    box-sizing: border-box;
    padding: 2rem;
    /* Add padding around the content */
}

#content.board-mode .board-slide.active-slide {
    display: flex;
    /* Show the active slide */
}

/* Container for the actual slide content to apply scaling */
.slide-content-wrapper {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    /* Adjust based on content */
    height: auto;
    /* Adjust based on content */
    overflow: auto;
    /* Allow scrolling if content still overflows after scaling */
    /* Basic scaling attempt - might need JS for precision */
    transform-origin: center center;
    /* Initial scale - JS might adjust this */
    /* transition: transform 0.3s ease; */
    /* Optional: Smooth transition */
}

/* Apply styles within the slide content wrapper */
.slide-content-wrapper>* {
    max-width: 100%;
    /* Ensure elements don't overflow the wrapper */
}

/* Example: Scale down large images within slides */
.slide-content-wrapper img {
    max-width: 100%;
    max-height: 80vh;
    /* Limit image height */
    height: auto;
    object-fit: contain;
}

/* Example: Adjust heading sizes for slides */
.slide-content-wrapper h1 {
    font-size: calc(2.8rem * (var(--global-font-size, 100%) / 100));
    /* Größere H1 im Board-Modus */
}

.slide-content-wrapper h2 {
    font-size: calc(2.3rem * (var(--global-font-size, 100%) / 100));
    /* Größere H2 im Board-Modus */
}

.slide-content-wrapper p {
    font-size: calc(1.25rem * (var(--global-font-size, 100%) / 100));
    /* Größere Paragraphen im Board-Modus */
}


/* Board Mode Navigation Buttons */
.board-nav {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    /* Hidden by default */
    gap: 20px;
    z-index: 10;
    /* Ensure they are above slide content */
}

#content.board-mode .board-nav {
    display: flex;
    /* Show only in board mode */
}

.board-nav-button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: calc(1.5rem * (var(--global-font-size, 100%) / 100));
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.board-nav-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.board-nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Alternative side navigation buttons */
.board-nav-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: calc(2rem * (var(--global-font-size, 100%) / 100));
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.board-nav-side:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.board-nav-side.prev {
    left: 10px;
}

.board-nav-side.next {
    right: 10px;
}

#content.board-mode .board-nav-side {
    display: block;
    /* Show side buttons in board mode */
}

/* Styles for font size buttons in code blocks */
.editor-buttons .font-size-button {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: calc(0.9rem * (var(--global-font-size, 100%) / 100));
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-left: 5px;
    /* Abstand zwischen den Buttons */
}

.editor-buttons .font-size-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.editor-buttons .font-size-button:active {
    background-color: rgba(0, 0, 0, 1);
}

/* Responsive Table Styles */
@media screen and (max-width: 768px) {
    .markdown-table {
        font-size: calc(0.9rem * (var(--global-font-size, 100%) / 100));
        /* Kleinere Schriftgröße für mobile Tabellen */
    }

    .markdown-table th,
    .markdown-table td {
        padding: var(--spacing-sm) var(--spacing-md);
        /* Reduziertes Padding für Zellen */
    }

    /* Optionale aggressivere Methode: Zellen untereinander anzeigen */
    /*
    .markdown-table,
    .markdown-table thead,
    .markdown-table tbody,
    .markdown-table th,
    .markdown-table td,
    .markdown-table tr {
        display: block;
    }

    .markdown-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .markdown-table tr {
        border: 1px solid #ccc;
        margin-bottom: .625em;
    }

    .markdown-table td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: left;
    }

    .markdown-table td:before {
        position: absolute;
        top: .375em; // 6px / 16px
        left: .375em;
        width: 45%;
        padding-right: .625em; // 10px / 16px
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    // Dynamische Labels via JS oder manuell im HTML nötig (data-label="Spaltenname")
    // .markdown-table td:nth-of-type(1):before { content: "Spalte 1 Name"; }
    // .markdown-table td:nth-of-type(2):before { content: "Spalte 2 Name"; }
    // ...
    */
}