/* ==========================================================================
   Theme-Variablen
   ========================================================================== */
   :root {
    --bg: #f7f8fb;
    --panel: #ffffff;
    --text: #11131a;
    --muted: #5d677b;
    --accent: #2b6fff;
    --border: #dbe1ee;
    --radius: 14px;
    --shadow: 0 10px 24px rgba(17,19,26,0.06);
  
    /* UI-Höhe für Copy-Button */
    --code-ui-h: 30px;
  
    /* Dynamisch per JS gesetzt: Breite der Spalte/Viewport */
    --a: 1050px; /* Fallback */
  }
  .theme-light {
    --bg:#f7f8fb; --panel:#fff; --text:#11131a; --muted:#5d677b;
    --accent:#2b6fff; --border:#dbe1ee; --radius:14px; --shadow:0 10px 24px rgba(17,19,26,0.06);
  }
  .theme-dark {
    --bg:#0b0c0f; --panel:#12141a; --text:#e9ecf1; --muted:#a9b2c2;
    --accent:#6aa9ff; --border:#232735; --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.25);
  }
  
  /* ==========================================================================
     Base & Layout
     ========================================================================== */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 16px;
    overflow-y: scroll;
  }
  .app-main {
    padding: 0 clamp(12px, 4vw, 28px) 28px;
    display: grid;
    grid-template-columns: min(1100px, 100%);
    justify-content: center;
    min-width: 0; 
  }
  .panel { position: relative; min-width: 0; }
  .variant-bar {
    position: absolute;
    top: 10px; left: 10px; z-index: 6;
    display: inline-flex; gap: 6px; flex-wrap: wrap;
    align-items: center;
  }
  .theme-toggle { position: absolute; top: 10px; right: 10px; z-index: 6; }
  
  .btn {
    appearance: none;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent);
  }
  .btn--pill { border-radius: 999px; }
  
  .chip {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
  }
  .chip[aria-pressed="true"] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%), transparent;
  }
  
  /* ==========================================================================
     Markdown Output
     ========================================================================== */
  .md-output { display: grid; gap: 10px; margin-top: 44px; min-width: 0; }
  .md-output :is(h1,h2,h3,h4,h5,h6) { margin: 18px 0 6px; }
  .md-output p { margin: 10px 0; }
  
  /* ==========================================================================
     CODEBLOCKS (Copy-Button – keine Custom-Scroll-Leiste)
     ========================================================================== */
  .md-output pre {
    position: relative;
    background: transparent;
    max-width: 100%;
    min-width: 0;
  }
  
  /* ---------- Level→Abzug (einzeln je Ebene) ---------- */
  /* Default, falls nichts erkannt */
  .md-container { --code-pad: 0px; }
  
  /* Collapsibles: Level über data-level am <details> */
  details.md-details[data-level="1"] { --code-pad: 0px; } /* # */
  details.md-details[data-level="2"] { --code-pad: 58px; } /* ## */
  details.md-details[data-level="3"] { --code-pad: 87px; } /* ### */
  details.md-details[data-level="4"] { --code-pad: 116px; } /* #### */
  details.md-details[data-level="5"] { --code-pad: 143px; } /* ##### */
  details.md-details[data-level="6"] { --code-pad: 171px; } /* ###### */
  
  /* Nicht-collapsible Sektionen: Level per :has ermitteln */
  .md-section:has(> h1.md-heading) { --code-pad: 0px; } /* # */
  .md-section:has(> h2.md-heading) { --code-pad: 58px; } /* ## */
  .md-section:has(> h3.md-heading) { --code-pad: 87px; } /* ### */
  .md-section:has(> h4.md-heading) { --code-pad: 116px; } /* #### */
  .md-section:has(> h5.md-heading) { --code-pad: 143px; } /* ##### */
  .md-section:has(> h6.md-heading) { --code-pad: 171px; } /* ###### */
  
  /* Codebreite = var(--a) - var(--code-pad) (abgesichert), nie breiter als Container */
  .md-output pre code,
  .md-output pre code.hljs {
    display: block;
    position: static;   /* für den absolut positionierten Copy-Button */
    white-space: pre;
    box-sizing: border-box;
  
    inline-size: min(
      100%,
      clamp(0px, calc(var(--a) - var(--code-pad, 0px)), var(--a))
    );
    max-inline-size: clamp(0px, calc(var(--a) - var(--code-pad, 0px)), var(--a));
  
    border-radius: 8px;
    overflow-x: auto;           /* Scrollbar nur bei Bedarf */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;      /* Firefox */
  }
  
  /* Native Scrollbar am <pre> ausblenden (falls aktiv) */
  .md-output pre::-webkit-scrollbar { height: 0; width: 0; }
  .md-output pre { scrollbar-width: none; }
  
  /* Copy-Button (unten rechts im Code, 0.5s Animation) */
  .md-output pre code.hljs > .copy-btn {
    position: absolute;
    right: 10px;
    bottom: 12px;
    height: var(--code-ui-h);
    line-height: var(--code-ui-h);
    padding: 0 12px;
    font-size: 12px;
    border: 1px solid var(--border);
    background: color-mix(in oklab, var(--panel) 96%, black 4%);
    color: var(--text);
    border-radius: 999px;
    cursor: pointer;
    opacity: .5;
    transition: opacity .5s ease, transform .5s ease, box-shadow .5s ease;
    z-index: 3;
  }
  .md-output pre code.hljs > .copy-btn:hover,
  .md-output pre code.hljs > .copy-btn:focus { opacity: 1; transform: translateY(-1px); }
  .md-output pre code.hljs > .copy-btn.copied {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%), transparent;
  }
  
  /* ==========================================================================
     Typografie / Diverses
     ========================================================================== */
  .md-output code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  }
  .muted { color: var(--muted); }
  .hint  { margin-top: 12px; font-size: 12px; }
  
  /* ==========================================================================
     Collapsibles (Details/Summary)
     ========================================================================== */
  .md-container { position: relative; }
  .md-section h1, .md-section h2, .md-section h3,
  .md-section h4, .md-section h5, .md-section h6 {
    display: flex; align-items: center; gap: 6px;
  }
  details.md-details {
    border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
    background: color-mix(in oklab, var(--panel) 96%, black 4%); transition: border-color .2s ease;
  }
  details.md-details + details.md-details { margin-top: 10px }
  details[open].md-details { border-color: color-mix(in oklab, var(--accent) 25%, var(--border)); }
  summary.md-summary {
    list-style: none; display: grid; grid-template-columns: auto 1fr; gap: 10px;
    align-items: center; padding: 10px 12px; cursor: pointer; user-select: none;
    background: linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02)); 
  }
  summary.md-summary::-webkit-details-marker { display: none; }
  .md-details > summary .chevron {
    width: 18px; height: 18px; display: inline-block;
    background: conic-gradient(from 45deg at 50% 55%, transparent 0 25%, currentColor 0 50%, transparent 0)
                no-repeat center/80% 80%;
    transform: rotate(90deg); opacity: .9; transition: transform .5s ease;
  }
  .md-details[open] > summary .chevron { transform: rotate(180deg); }
  details:not([open]) > summary .chevron { transform: rotate(90deg); }
  
  .md-summary .title { font-weight: 700; letter-spacing: .2px; }
  .md-content { box-sizing: border-box; will-change: height, padding; padding: 12px 14px 16px; border-top: 1px solid var(--border); overflow: hidden; min-width: 0; }
  
  /* ==========================================================================
     E-Mail-Blockquotes
     ========================================================================== */
  .md-output blockquote.email-quote {
    margin: 10px 0;
    padding: 10px 12px;
    border-left: 4px solid color-mix(in oklab, var(--accent) 80%, #000 0%);
    background: color-mix(in oklab, var(--panel) 92%, var(--accent) 8%);
    border-radius: 10px;
  }
  .md-output blockquote.email-quote > :first-child { margin-top: 0; }
  .md-output blockquote.email-quote > :last-child  { margin-bottom: 0; }
  .md-output blockquote.email-quote blockquote.email-quote {
    margin: 8px 0 0 8px;
    background: color-mix(in oklab, var(--panel) 88%, var(--accent) 12%);
    border-left-color: color-mix(in oklab, var(--accent) 90%, #000 0%);
  }
  
  /* ==========================================================================
     braun & fett (nur Inline-Code)
     ========================================================================== */
  .md-output code.code-domain-ai {
    padding: 0 2px; border: 0; background: transparent; border-radius: 0;
    color: #8b4513; font-weight: 800; letter-spacing: .2px;
  }
  
  /* ==========================================================================
     Tabellen (GFM)
     ========================================================================== */
  .md-output table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 10px 0;
  }
  .md-output thead th {
    text-align: left;
    font-weight: 700;
    background: color-mix(in oklab, var(--panel) 92%, #000 8%);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .md-output tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .md-output tbody tr:last-child td { border-bottom: 0; }
  
  /* ==========================================================================
     KaTeX Feinschliff
     ========================================================================== */
  .katex { font-size: 1.02em; }
  .katex-display { margin: 10px 0; }
  

/* === Scrollbar-Theme für Code (hell + dunkel) ============================ */

/* Variablen */
:root {
  --sb-size: 10px;
  --sb-track: color-mix(in oklab, var(--panel) 92%, black 8%);
  --sb-thumb: color-mix(in oklab, var(--muted) 50%, black 0%);
  --sb-thumb-hover: color-mix(in oklab, var(--muted) 65%, black 0%);
}
.theme-dark {
  --sb-track: color-mix(in oklab, var(--panel) 82%, black 18%);
  --sb-thumb: color-mix(in oklab, var(--muted) 60%, black 20%);
  --sb-thumb-hover: color-mix(in oklab, var(--muted) 75%, black 20%);
}

/* Firefox */
.md-output pre code,
.md-output pre code.hljs {
  scrollbar-width: thin; /* already there, keeps it slim */
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

/* WebKit (Chrome, Edge, Safari) – nur für die scrollenden <code>-Elemente */
.md-output pre code::-webkit-scrollbar,
.md-output pre code.hljs::-webkit-scrollbar {
  height: var(--sb-size);
  width: var(--sb-size);
}
.md-output pre code::-webkit-scrollbar-track,
.md-output pre code.hljs::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 999px;
}
.md-output pre code::-webkit-scrollbar-thumb,
.md-output pre code.hljs::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid transparent;   /* pill look */
  background-clip: content-box;
}
.md-output pre code::-webkit-scrollbar-thumb:hover,
.md-output pre code.hljs::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-hover);
}
.md-output pre code::-webkit-scrollbar-corner,
.md-output pre code.hljs::-webkit-scrollbar-corner {
  background: transparent;
}

/* Optional: auf sehr kleinen Viewports etwas schlanker */
@media (max-width: 640px) {
  :root { --sb-size: 8px; }
}

.md-content.is-animating { will-change: height, padding; }
.md-content.is-animating > :first-child { margin-top: 0 !important; }
.md-content.is-animating > :last-child  { margin-bottom: 0 !important; }





/* === Links: hübsches Blau, ohne Unterstreichung, mit sanftem Hover ====== */
:root{
  --link:        color-mix(in oklab, var(--accent) 100%, white 0%);
  --link-hover:  color-mix(in oklab, var(--accent) 86%,  white 14%);
  --link-active: color-mix(in oklab, var(--accent) 72%,  white 28%);
}

.theme-dark{
  /* im Dunkeln etwas aufgehellt, damit's lesbar bleibt */
  --link:        color-mix(in oklab, var(--accent) 92%,  white 8%);
  --link-hover:  color-mix(in oklab, var(--accent) 84%,  white 16%);
  --link-active: color-mix(in oklab, var(--accent) 70%,  white 30%);
}

/* Standard-Links (Buttons/Chips ausgeschlossen) */
a:not(.btn):not(.chip):not([role="button"]),
.md-output a:not(.btn):not(.chip):not([role="button"]) {
  color: var(--link);
  text-decoration: none;
  transition: color .2s ease, filter .2s ease, text-shadow .2s ease;
}

/* gleiche Farbe für visited (kein Lila) */
a:not(.btn):not(.chip):not([role="button"]):visited,
.md-output a:not(.btn):not(.chip):not([role="button"]):visited {
  color: var(--link);
}

/* Hover: etwas heller + mini-Glow */
a:not(.btn):not(.chip):not([role="button"]):hover,
.md-output a:not(.btn):not(.chip):not([role="button"]):hover {
  color: var(--link-hover);
  filter: saturate(1.05);
  text-shadow: 0 0 .5px currentColor;
}

/* Active: leicht dunkler & minimal „press“ */
a:not(.btn):not(.chip):not([role="button"]):active,
.md-output a:not(.btn):not(.chip):not([role="button"]):active {
  color: var(--link-active);
  transform: translateY(0.5px);
}

/* Tastatur-Fokus sichtbar, aber ohne Unterstreichung */
a:not(.btn):not(.chip):not([role="button"]):focus-visible,
.md-output a:not(.btn):not(.chip):not([role="button"]):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent) 40%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
  text-decoration: none;
}