/* ─── AICampus: Custom Styles ────────────────────────────────────── */ /* HTMX Loading Indicator */ .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; } .htmx-request .htmx-indicator { opacity: 1; } .htmx-request.htmx-indicator { opacity: 1; } /* CodeMirror 6 overrides */ /* .ta-cm: Shim-Wrapper zwischen Container und .cm-editor — füllt die Elternhöhe, damit height:100%-Regeln (Applet, Workspace) trotz der zusätzlichen Ebene greifen. */ .ta-cm { height: 100%; } .cm-editor { height: 400px; font-size: 14px; /* Einheitliches Formularfeld-Styling (wie die anderen Input-Elemente): 1px heller Rahmen + 8px Ecken. overflow:hidden schneidet die Gutter-/Scroller-Ecken am Radius ab. Workspace bleibt rahmenlos (workspace.css-Override). */ border: 1px solid #d1d5db; border-radius: 0.5rem; overflow: hidden; } /* Keine Fokus-Rahmen: Der CM6-Kern setzt als Fallback ein gepunktetes Outline auf .cm-editor.cm-focused (Basis-Theme wird zur Laufzeit nach main.css ins injiziert — gleichspezifisch würde der Kern gewinnen, daher über den .ta-cm-Wrapper die Spezifität erhöhen). .cm-content ist im Kern bereits outline:none; der Rest (Scroller, Gutter) defensive gegen den Browser-Standard-Fokus-Ring. */ .ta-cm .cm-editor.cm-focused, .cm-editor:focus-within, .cm-content:focus, .cm-scroller:focus, .cm-gutterElement:focus { outline: none; } /* Der CM6-Basis-Theme setzt fontFamily:monospace direkt auf .cm-scroller (gleichspezifisch, aber nach main.css injiziert) → mit höherer Spezifität unseren Mono-Stack übergehen. */ .cm-editor .cm-scroller { font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace; } /* Applet-Studio: Editor füllt die Kachel (fixe Höhe, kein Überlauf) */ .applet-code-wrapper .cm-editor { height: 100%; } /* Fallback, falls das CM6-Modul nicht lädt (Offline): der Platzhalter zeigt das Original-Textarea im Wrapper. */ .ta-cm > textarea.ta-cm-fallback { width: 100%; height: 100%; border: none; resize: none; padding: 4px 8px; font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace; } /* Task Card */ .task-card { @apply bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200; } .task-card:hover { @apply border-blue-300; } /* Badge Styles */ .badge { @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; } .badge-text { @apply bg-gray-100 text-gray-800; } .badge-code { @apply bg-blue-100 text-blue-800; } .badge-pass { @apply bg-green-100 text-green-800; } .badge-fail { @apply bg-red-100 text-red-800; } .badge-warning { @apply bg-yellow-100 text-yellow-800; } /* Score Cell */ .score-cell { @apply text-center py-2 px-3 rounded font-mono text-sm; } .score-pass { @apply bg-green-50 text-green-700; } .score-fail { @apply bg-red-50 text-red-700; } .score-none { @apply bg-gray-50 text-gray-400; } /* Feedback Box */ .feedback-box { @apply bg-white border-l-4 rounded-lg shadow-sm p-4; } .feedback-llm { @apply border-l-purple-500; } .feedback-human { @apply border-l-blue-500; } /* Scrollable table */ .table-container { @apply overflow-x-auto rounded-lg border border-gray-200; } /* Print styles */ @media print { nav, footer, button { display: none !important; } main { padding: 0 !important; } } /* ═══════════════════════════════════════════════════════════════ Markdown Rendering Styles ═══════════════════════════════════════════════════════════════ */ /* Base container — resets all inherited Tailwind styles */ .markdown-preview { font-size: 0.9375rem !important; font-weight: 400 !important; color: #374151 !important; line-height: 1.7 !important; word-wrap: break-word; overflow-wrap: break-word; } /* ─── Headers — styling (font-size/weight set in base.html inline block) ─── */ .markdown-preview h1 { color: #111827 !important; margin-top: 1.25rem !important; margin-bottom: 0.5rem !important; line-height: 1.3 !important; border-bottom: 1px solid #e5e7eb !important; padding-bottom: 0.25rem !important; } .markdown-preview h2 { color: #1f2937 !important; margin-top: 1.1rem !important; margin-bottom: 0.45rem !important; line-height: 1.4 !important; } .markdown-preview h3 { color: #374151 !important; margin-top: 0.9rem !important; margin-bottom: 0.4rem !important; } .markdown-preview h4, .markdown-preview h5, .markdown-preview h6 { color: #374151 !important; } /* ─── Paragraphs — normal weight ────────────────────────────── */ .markdown-preview p { margin-bottom: 0.75rem !important; font-weight: 400 !important; color: #374151 !important; } .markdown-preview strong { font-weight: 700 !important; } .markdown-preview em { font-style: italic !important; } /* ─── Lists — layout (list-style-type set in base.html inline block) ──── */ .markdown-preview ul { padding-left: 1.5rem !important; margin-bottom: 0.75rem !important; margin-top: 0.25rem !important; color: #374151 !important; } /* Quellenverzeichnis: die [N]-Nummer steht im Eintrag selbst — bündig links, ohne Listen-Einrückung (höhere Spezifität als die !important-Regel oben) */ .markdown-preview ul.aicampus-bibliography { padding-left: 0 !important; } .markdown-preview ul ul { margin-top: 0.15rem !important; margin-bottom: 0.15rem !important; } .markdown-preview ol { padding-left: 1.5rem !important; margin-bottom: 0.75rem !important; margin-top: 0.25rem !important; color: #374151 !important; } .markdown-preview ol ol { /* lower-alpha inherited from inline block */ } .markdown-preview li { margin-bottom: 0.25rem !important; padding-left: 0.25rem !important; font-weight: 400 !important; color: #374151 !important; } /* Visible bullet markers */ .markdown-preview li::marker { color: #4b5563 !important; } /* ─── Code — Python syntax highlighted ──────────────────────── */ /* :not(.reveal .slides *) — im Slide-Kontext übernimmt das native Reveal.js-Design das Styling (hljs-Theme "pre code.hljs": display:block, padding, overflow-x + reveal.css-Regeln für hljs-ln/Clones). Unsere !important-Regeln würden das überschreiben (u.a. Zeilennummern-Tabelle und Per-Line-Reveal-Clones kaputt). Slides-Regeln in slides.css sind entsprechend nur noch für .slides-canvas (Kachel-Thumbnails) aktiv. */ .markdown-preview:not(.reveal .slides *) code { background: #f3f4f6 !important; padding: 0.125rem 0.375rem !important; border-radius: 0.25rem !important; font-size: 0.85rem !important; font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace !important; color: #be185d !important; border: 1px solid #e5e7eb !important; font-weight: 400 !important; } .markdown-preview:not(.reveal .slides *) pre { background: #282c34 !important; color: #abb2bf !important; padding: 0 !important; border-radius: 0.625rem !important; overflow-x: auto !important; margin-bottom: 0.85rem !important; margin-top: 0.5rem !important; border: 1px solid #3a3f4b !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important; font-size: 0.825rem !important; font-weight: 400 !important; } .markdown-preview:not(.reveal .slides *) pre code { background: transparent !important; padding: 0.85rem 1rem !important; color: inherit !important; border: none !important; display: block !important; font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace !important; white-space: pre !important; line-height: 1.6 !important; font-weight: 400 !important; } /* highlight.js (Atom One Dark) */ .markdown-preview .hljs-keyword, .markdown-preview .hljs-built_in { color: #c678dd !important; } .markdown-preview .hljs-string { color: #98c379 !important; } .markdown-preview .hljs-number { color: #d19a66 !important; } .markdown-preview .hljs-comment { color: #7f848e !important; font-style: italic !important; } .markdown-preview .hljs-title, .markdown-preview .hljs-function .hljs-title { color: #61afef !important; } .markdown-preview .hljs-type { color: #e5c07b !important; } /* Code-LaTeX ($…$ in Code-Blöcken, s. applyCodeMath): Standard-Code- Textfarbe (Atom One Dark Foreground, grau) statt der Farbe des umgebenden hljs-Tokens (z. B. Orange/Creme). */ .aicampus-code-math { color: #abb2bf !important; } /* ─── Blockquotes ────────────────────────────────────────────── */ .markdown-preview blockquote { border-left: 3px solid #3b82f6 !important; padding: 0.5rem 1rem !important; margin-left: 0 !important; color: #6b7280 !important; margin-bottom: 0.75rem !important; background: #f9fafb !important; border-radius: 0 0.375rem 0.375rem 0 !important; } /* ─── Horizontal Rules ───────────────────────────────────────── */ .markdown-preview hr { border: none !important; border-top: 2px solid #e5e7eb !important; margin: 1.25rem 0 !important; } /* ─── Tables ─────────────────────────────────────────────────── */ /* :not(.hljs-ln) — die Code-Zeilennummern-Tabelle (highlight.js-Plugin) ist KEINE Datentabelle: padding:0/border:0 gehören zum Code-Layout. */ .markdown-preview table:not(.hljs-ln) { border-collapse: collapse !important; width: 100% !important; margin-bottom: 0.75rem !important; } .markdown-preview th { background: #f3f4f6 !important; font-weight: 700 !important; text-align: left !important; padding: 0.5rem 0.75rem !important; border: 1px solid #d1d5db !important; } .markdown-preview table:not(.hljs-ln) td { padding: 0.5rem 0.75rem !important; border: 1px solid #e5e7eb !important; } /* ─── Links & Images ─────────────────────────────────────────── */ .markdown-preview a { color: #3b82f6 !important; text-decoration: underline !important; } .markdown-preview img { max-width: 100% !important; height: auto !important; max-height: 40vh !important; place-self: center; border-radius: 0.375rem !important; } /* Nummerierte Abbildungen & Gleichungen (latex-artige Querverweise) */ .aicampus-figure { margin: 1.25rem auto; text-align: center; scroll-margin-top: 100px; } /* Medien (Bilder/Video-Embeds) in der Figure horizontal zentrieren. display:block + margin:auto statt text-align: funktioniert unabhängig vom Zentrierungs-Mechanismus der Umgebung — z. B. ein YouTube-Video mit expliziter {.height} ist 16:9-breit statt vollbreit und würde sonst linksbündig stehen. Vollbreit-Medien (Applets, width:100%) bleiben davon unberührt (margin:auto wirkt bei voller Breite nicht). */ .aicampus-figure > :is(img, iframe) { display: block; margin-left: auto; margin-right: auto; } /* Gezoomtes Medium ({.zoom=X}) liegt im -Wrapper — das Iframe darin zentrieren (Videos mit {.height} sind dort 16:9-breit statt 100%). */ .aicampus-figure .aicampus-applet-zoom { text-align: center; } .aicampus-figure figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; } /* Subfiguren: mehrere Medien in EINE Abbildung (s. _parseSubfigInners in markdown-renderer.js) — Flex-Reihe mit Wrap, nebeneinander zentriert. */ .aicampus-subfig-row { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: flex-start; gap: 0.75rem 1rem; } .aicampus-subfig-item { margin: 0; text-align: center; } .aicampus-subfig-item img, .aicampus-subfig-item iframe { display: block; margin: 0 auto; max-width: 100%; } .aicampus-subfig-item figcaption { margin-top: 0.35rem; font-size: 0.875rem; color: #6b7280; } /* Beschriftete Code-Blöcke ({#code:label}[caption]): Caption unter dem Code, analog zu Abbildungen. Kein text-align:center — der Code füllt die Breite, nur die Caption steht mittig darunter. */ .aicampus-code-figure { margin: 1.25rem 0; scroll-margin-top: 100px; } .aicampus-code-figure figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; text-align: center; } /* Beschriftete Tabellen ({#tab:label}[caption] als Zeile unter der Pipe-Tabelle): Caption unter der Tabelle, analog zu Abbildungen/Code. Kein text-align:center — die Tabelle füllt die Breite, nur die Caption steht mittig darunter. */ .aicampus-table-figure { margin: 1.25rem 0; scroll-margin-top: 100px; } /* Generische Tabellen-Unterseite (0.75rem !important) dämpfen, damit die Caption nah unter der Tabelle steht (wie beim Code). --tab-zoom ({zoom=X} in der Tabellen-Label-Zeile, s. 1j2/4b in markdown-renderer.js): Skript-Kontext — Basisgröße = ererbte Größe, ohne Zoom ist 1em dem inherit-Wert gleich (unverändert). */ .aicampus-table-figure table { margin-bottom: 0.25rem !important; font-size: calc(1em * var(--tab-zoom, 1)); } .aicampus-table-figure figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: #6b7280; text-align: center; } .aicampus-equation { position: relative; scroll-margin-top: 100px; } .aicampus-equation .aicampus-eq-num { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0.875rem; color: #6b7280; } /* Nummerierte Sections (h2–h6) im Skript: dezente Nummer vor der Überschrift */ .markdown-preview .aicampus-sec-num { color: #9ca3af; font-weight: 600; } .aicampus-xref { color: #2563eb !important; text-decoration: none !important; } .aicampus-xref:hover { text-decoration: underline !important; } .aicampus-xref-broken { color: #dc2626; } /* Aufgaben-Boxen: @task:{id}-Referenzen in Skript & Aufgabenstellung */ .aicampus-taskbox { display: flex; align-items: center; gap: 0.875rem; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #3b82f6; border-radius: 0.75rem; padding: 1rem 1.25rem; margin: 1.25rem 0; scroll-margin-top: 100px; } .aicampus-taskbox-icon { font-size: 1.5rem; flex-shrink: 0; } /* Hinweis-/Merksatz-Boxen: @startbox:{typ} … @endbox (Renderer: markdown-renderer.js) */ .aicampus-callbox { border: 1px solid #e2e8f0; border-left: 4px solid #94a3b8; border-radius: 0.75rem; background: #f8fafc; margin: 1.25rem 0; scroll-margin-top: 100px; } .aicampus-callbox-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.25rem 0.25rem; font-weight: 600; } .aicampus-callbox-icon { font-size: 1.1rem; } .aicampus-callbox-body { padding: 0 1.25rem 0.5rem; } .aicampus-callbox-body > :first-child { margin-top: 0.25rem; } .aicampus-callbox-body > :last-child { margin-bottom: 0.25rem; } /* Typ-Farben: linker Balken, Hintergrund & Kopf-Zeichenfarbe */ .aicampus-callbox-merksatz { border-left-color: #3b82f6; background: #eff6ff; } .aicampus-callbox-merksatz .aicampus-callbox-head { color: #1d4ed8; } .aicampus-callbox-hinweis { border-left-color: #f59e0b; background: #fffbeb; } .aicampus-callbox-hinweis .aicampus-callbox-head { color: #b45309; } .aicampus-callbox-bemerkung { border-left-color: #94a3b8; background: #f8fafc; } .aicampus-callbox-bemerkung .aicampus-callbox-head { color: #475569; } .aicampus-callbox-warnung { border-left-color: #ef4444; background: #fef2f2; } .aicampus-callbox-warnung .aicampus-callbox-head { color: #b91c1c; } .aicampus-callbox-beispiel { border-left-color: #22c55e; background: #f0fdf4; } .aicampus-callbox-beispiel .aicampus-callbox-head { color: #15803d; } /* Mathe-Boxen: Definition, Satz, Lemma, … (Typen in CALLOUT_TYPES, markdown-renderer.js) */ .aicampus-callbox-definition { border-left-color: #8b5cf6; background: #f5f3ff; } .aicampus-callbox-definition .aicampus-callbox-head { color: #6d28d9; } .aicampus-callbox-satz { border-left-color: #6366f1; background: #eef2ff; } .aicampus-callbox-satz .aicampus-callbox-head { color: #4338ca; } .aicampus-callbox-lemma { border-left-color: #14b8a6; background: #f0fdfa; } .aicampus-callbox-lemma .aicampus-callbox-head { color: #0f766e; } .aicampus-callbox-proposition { border-left-color: #0ea5e9; background: #f0f9ff; } .aicampus-callbox-proposition .aicampus-callbox-head { color: #0369a1; } .aicampus-callbox-korollar { border-left-color: #a855f7; background: #faf5ff; } .aicampus-callbox-korollar .aicampus-callbox-head { color: #7e22ce; } .aicampus-callbox-beweis { border-left-color: #78716c; background: #fafaf9; } .aicampus-callbox-beweis .aicampus-callbox-head { color: #44403c; } .aicampus-callbox-frage { border-left-color: #ec4899; background: #fdf2f8; } .aicampus-callbox-frage .aicampus-callbox-head { color: #be185d; } /* Code-Box (@box:code): dunkle Fläche (atom-one-dark-Ton); die Box liefert den Hintergrund, das innere 
 wird nahtlos (kein eigener
   Hintergrund/Rahmen/Margin/Shadow) — Slides-Overrides in slides.css. */
.aicampus-callbox-code { border-left-color: #64748b; background: #282c34; }
.aicampus-callbox-code .aicampus-callbox-head { color: #9da5b4; }
.aicampus-callbox-code .aicampus-callbox-body { padding-bottom: 0.25rem; }
.aicampus-callbox-code pre {
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.aicampus-callbox-code pre code {
  padding: 0.5rem 1rem 0.75rem !important;
}

/* Spalten: @startcolumn … @nextcolumn … @endcolumn (Renderer: markdown-renderer.js).
   Die Spalten-Breiten kommen als Inline-Style (grid-template-columns: Nfr …);
   min-width: 0 lässt Grid-Items schrumpfen (sonst würde überlanger Inhalt
   z. B. Code-Blöcke aus der Spalte drücken). */
.aicampus-cols {
  display: grid;
  gap: 2.5em;
  align-items: start;
  width: 100%;
  text-align: left;
}
.aicampus-col {
  min-width: 0;
}

/* Applet-Iframes: interaktive HTML-Medien (.html) in Skript & Aufgaben
   (werden von markdown-renderer.js als Iframe gerendert, sandboxed) */
.aicampus-applet {
  width: 100%;
  height: 420px;
}

/* YouTube-Embeds: Höhe folgt dem Video-Format (16:9) statt der fixen
   420 px — Breite = Spaltenbreite, Höhe daraus. Mit {.height=X} setzt
   der Renderer fixe Höhe + proportionale Breite inline (Inline-
   !important schlägt beide Regeln; width:100% aus slides.css ebenfalls). */
.aicampus-applet.aicampus-video {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Gezoomte Applets ({.zoom=X}): Wrapper mit sichtbarer (geskalter) Höhe —
   transform skaliert den Inhalt, ändert aber nicht die Iframe-Layout-Box,
   und line-height:0 eliminiert den Inline-Whitespace-Spalte unter dem
   Iframe. (Skript-Seiten laden slides.css nicht → Regel hier global.
   Das Element ist ein  (kein div): erst parse-inline bleibt er im
   umgebenden 
 und erbt dessen font-size — s. slides.css. */
.aicampus-applet-zoom {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

/* Medaillen-Badges — gemeinsame Basis für alle Seiten (tasks_student.html,
   dashboard.html & task_solve.html definieren teils eigene Varianten darüber) */
.badge-tier { display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:9999px; font-size:0.75rem; font-weight:700; text-transform:uppercase; white-space:nowrap; margin-right:6px; }
.badge-tier:last-child { margin-right:0; }
.badge-bronze { background:linear-gradient(135deg, #f5deb3, #cd7f32, #b8860b); color:#5c3317; }
.badge-silver { background:linear-gradient(135deg, #f0f0f0, #c0c0c0, #a8a8a8); color:#4a4a4a; }
.badge-gold { background:linear-gradient(135deg, #fff8dc, #ffd700, #daa520); color:#6b4c00; }
.badge-platinum { background:linear-gradient(135deg, #e8e8e8, #b9f2ff, #7dd3fc, #b9f2ff); color:#1e3a5f; animation:platinumShine 2s ease-in-out infinite; }
@keyframes platinumShine { 0%,100%{box-shadow:0 0 8px rgba(125,211,252,0.5);} 50%{box-shadow:0 0 16px rgba(125,211,252,0.8);} }

/* Scroll-Offset für Deep-Links (#chapter-…, #ref-…), damit das Ziel nicht
   unter der sticky Nav-Bar verschwindet (Tutor-Zeile + Student-Karte) */
#section-list > div,
.script-chapter-card,
.aicampus-bibliography li,  /* Zitation [N] → Eintrag im Quellenverzeichnis */
#ref-list > div {           /* Deep-Link #ref-{key} im Quellen-Tab */
  scroll-margin-top: 100px;
}

/* Kurs-Tab-Leiste: volle Viewport-Breite (Full-Bleed). course/base.html misst
   den Spalten-Offset (--tab-page-x) und die Scrollbar-Breite (--tab-sb) —
   100vw allein würde die Scrollbar mitzählen und rechts eine Lücke lassen.
   Die zusätzlichen -1px sind eine Sicherheitsmarge: jeder noch so kleine
   Überhang (z. B. Subpixel-Rundung) würde eine horizontale Scrollbar
   auslösen, die dann dauerhaft bleibt. Da die Leiste denselben Hintergrund
   wie die Seite hat, ist der 1px-Randversatz rechts nicht sichtbar. */
#course-tab-bar.tab-full-bleed {
  width: calc(100vw - var(--tab-sb, 0px) - 1px);
  margin-left: calc(-1 * var(--tab-page-x, 0px));
}

/* ════════════════════════════════════════════════════════════
   KaTeX
   ════════════════════════════════════════════════════════════ */

.markdown-preview .katex,
.script-toc-card .katex {
  font-size: 1em !important;
}

.markdown-preview .katex-display {
  margin: 0.85rem 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 0.5rem 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Mermaid Diagrams
   ═══════════════════════════════════════════════════════════════ */

.mermaid-diagram {
  margin: 1rem 0 !important;
  padding: 1rem !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
}

.mermaid-diagram svg {
  max-width: 100% !important;
  height: auto !important;
}

.markdown-preview .mermaid-diagram {
  font-weight: 400 !important;
}

/* ═══════════════════════════════════════════════════════════════
   Scrollbars — CodeMirror + Markdown Code Blocks
   ═══════════════════════════════════════════════════════════════ */

/* Shared scrollbar styles for dark code surfaces */
/* .cm-scroller = CM6-Scroll-Container (Nachfolger der CM5-.CodeMirror) */
.cm-scroller,
.markdown-preview pre {
  scrollbar-color: #555c69 transparent;
  scrollbar-width: thin;
  border-radius: 0.5rem;
  max-width: 100% !important;
  overflow-x: hidden !important;
  white-space: pre;
}

.cm-scroller::-webkit-scrollbar,
.markdown-preview pre::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: transparent;
}

.cm-scroller::-webkit-scrollbar-thumb,
.markdown-preview pre::-webkit-scrollbar-thumb {
  background-color: #555c69;
  border-radius: 4px;
}

.cm-scroller::-webkit-scrollbar-thumb:hover,
.markdown-preview pre::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

.cm-scroller::-webkit-scrollbar-track,
.markdown-preview pre::-webkit-scrollbar-track {
  background: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   Markdown Editor Preview Area
   ═══════════════════════════════════════════════════════════════ */

.markdown-preview-area {
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Smooth transitions for editor toggle */
.markdown-preview-area,
textarea {
  transition: opacity 150ms ease-in-out;
}

/* ═══════════════════════════════════════════════════════════════
   Xref Hover-Previews (#aicampus-xref-tip)
   Vorschau des Zielobjekts bei Hover auf @eq:/@fig:/@code:/@box:/@sec:
   Referenzen (JS: markdown-renderer.js, data-xref-tip).
   pointer-events: none, damit das Tooltip sich nicht selbst ausblendet,
   wenn die Maus darüber wandert.
   ═══════════════════════════════════════════════════════════════ */

/* Long-Press auf Referenz-Links = Vorschau: iOS-Link-Callout deaktivieren
   (Zusatz zur contextmenu-Unterdrückung im JS; nur für Xref-Links). */
a.aicampus-xref {
  -webkit-touch-callout: none;
}

#aicampus-xref-tip {
  position: fixed;
  z-index: 9999;
  display: none;
  max-width: 400px;
  background: #fff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  line-height: 1.5;
  pointer-events: none;
}

#aicampus-xref-tip .aicampus-xref-tip-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 6px;
}

/* max-height = Frontend-Abkürzung sehr großer Vorschauen (serverseitig
   sind die Previews zudem auf ~320 Zeichen gekürzt). */
#aicampus-xref-tip .aicampus-xref-tip-body {
  max-height: 220px;
  overflow: hidden;
}

#aicampus-xref-tip .aicampus-xref-tip-text {
  white-space: pre-wrap;
  word-break: break-word;
}

#aicampus-xref-tip .aicampus-xref-tip-code {
  margin: 0;
  padding: 8px;
  background: #f3f4f6;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  white-space: pre;
  overflow: hidden;
}

#aicampus-xref-tip .katex-display {
  margin: 0;
}

/* ─── CodeMirror: Markdown-Editoren (createMarkdownEditor / Folien) ───
   Helliges Design: CM-Default-Theme (weißer Hintergrund). Rahmen und
   Ecken kommen aus der globalen .cm-editor-Regel (Formularfeld-Styling). */
.md-codemirror .cm-editor {
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: #111827;
  font-size: 0.875rem;
}

.md-codemirror .cm-editor .cm-scroller {
  line-height: 1.625;
}

.md-codemirror .cm-gutters {
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
}

/* Search: gelber Hintergrund für Suchtreffer (alle CM-Editoren) */
.cm-searchMatch {
  background: #fde68a;
}
.cm-searchMatch-selected {
  background: #fcd34d;
}

/* AICampus-Annotationen (StateField „aicampus-annotations“): */
.cm-ta-math { color: #b91c1c; }   /* LaTeX: $…$, $$…$$ */
.cm-ta-box { color: #0f766e; font-weight: 600; }  /* @startbox/@endbox */
.cm-ta-label { color: #7c3aed; }   /* {#typ:label} u. ä. */
.cm-ta-ref { color: #2563eb; }     /* @typ:label */