operations_research/bilder_04/or_html_style.html

<style>
  :root{
    --ink:#1A1A2E; --indigo:#4338CA; --teal:#0891B2; --violet:#7C3AED;
    --emerald:#059669; --amber:#D97706; --rose:#E11D48; --slate:#334155;
    --tint-indigo:#EEF2FF; --tint-violet:#F5F3FF; --line:#E2E8F0;
    --code-bg:#1e293b;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,"DejaVu Sans",Arial,sans-serif;
    color:var(--ink); background:#ffffff; line-height:1.7;
    max-width:900px; margin:0 auto; padding:1.2rem 1.4rem 6rem;
    font-size:17px; -webkit-text-size-adjust:100%;
  }
  h1,h2,h3,h4,h5{line-height:1.25; font-weight:700; margin-top:2.2em; margin-bottom:.6em;
                 scroll-margin-top:1rem;}
  h1{color:var(--indigo); font-size:2.15rem; border-bottom:4px solid var(--indigo); padding-bottom:.25em;}
  h2{color:var(--indigo); font-size:1.6rem; border-bottom:2px solid var(--line); padding-bottom:.2em;}
  h3{color:var(--teal); font-size:1.28rem;}
  h4{color:var(--violet); font-size:1.1rem;}
  h5{color:var(--slate); font-size:1rem; text-transform:uppercase; letter-spacing:.03em;}
  a{color:var(--indigo); text-decoration:none;}
  a:hover{text-decoration:underline;}
  /* Externe Links: Öffnen im neuen Tab + Markierung */
  a[target="_blank"]::after{content:" \2197"; font-size:.82em; color:var(--teal); text-decoration:none;}
  p{margin:.75em 0;}
  hr{border:0; border-top:1px solid var(--line); margin:2.2em 0;}

  /* Inhaltsverzeichnis */
  nav#TOC{background:var(--tint-indigo); border:1px solid #C7D2FE; border-radius:12px;
          padding:1.1em 1.6em 1.3em; margin:2em 0;}
  nav#TOC::before{content:"Inhalt"; display:block; font-weight:700; color:var(--indigo);
                  font-size:1.35rem; margin-bottom:.4em;}
  nav#TOC ul{list-style:none; padding-left:1.1em; margin:.15em 0;}
  nav#TOC > ul{padding-left:0;}
  nav#TOC li{margin:.22em 0;}
  nav#TOC a{color:var(--slate); text-decoration:none;}
  nav#TOC a:hover{color:var(--indigo); text-decoration:underline;}
  nav#TOC > ul > li > a{font-weight:700; color:var(--indigo);}
  nav#TOC a[target="_blank"]::after{content:"";}   /* keine Pfeile im TOC */

  /* Bilder / Figuren */
  figure{margin:2em 0; text-align:center;}
  img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:10px;}
  figure img{box-shadow:0 6px 24px rgba(26,26,46,.10);}
  figcaption{color:var(--slate); font-size:.92rem; font-style:italic; margin-top:.7em;}
  body > figure:first-of-type img{box-shadow:0 10px 40px rgba(67,56,202,.15);}
  body > figure:first-of-type figcaption{display:none;}

  /* Tabellen */
  table{border-collapse:collapse; width:100%; margin:1.4em 0; font-size:.96rem;
        box-shadow:0 2px 10px rgba(26,26,46,.06); border-radius:8px; overflow:hidden;}
  th{background:var(--indigo); color:#fff; font-weight:700; text-align:left;}
  th,td{padding:.6em .8em; border:1px solid var(--line); vertical-align:top;}
  tbody tr:nth-child(even){background:var(--tint-indigo);}

  /* Code – dunkler Kasten, heller Text (breezedark) */
  code{font-family:"DejaVu Sans Mono",Consolas,Menlo,monospace; font-size:.9em;
       background:var(--tint-violet); color:#5b21b6; padding:.12em .4em; border-radius:5px;}
  pre{background:var(--code-bg); color:#e6edf3; padding:1.1em 1.2em; border-radius:10px;
      overflow-x:auto; line-height:1.5; font-size:.86rem;
      box-shadow:0 4px 18px rgba(15,23,42,.25);}
  pre code{background:none; color:inherit; padding:0; font-size:inherit;}
  pre .co{color:#8b9bb4 !important; font-style:italic;}   /* Kommentare gut lesbar */

  /* Copy-Button für Codeblöcke */
  div.sourceCode{position:relative;}
  div.sourceCode pre.sourceCode{padding-top:2.6em;}
  .copy-btn{
    position:absolute; top:.6em; right:.6em; z-index:2;
    display:flex; align-items:center; gap:.35em;
    background:rgba(255,255,255,.08); color:#cbd5e1;
    border:1px solid rgba(255,255,255,.18); border-radius:6px;
    padding:.3em .65em; font:inherit; font-size:.78rem;
    cursor:pointer; transition:background .15s,color .15s,border-color .15s;
  }
  .copy-btn:hover{background:rgba(255,255,255,.18); color:#fff;}
  .copy-btn svg{width:1em; height:1em; flex:none;}
  .copy-btn.copied{background:var(--emerald); color:#fff; border-color:var(--emerald);}

  /* Blockquote */
  blockquote{border-left:4px solid var(--violet); background:var(--tint-violet);
             margin:1.4em 0; padding:.6em 1.2em; border-radius:0 8px 8px 0; color:#3b2e63;}

  /* Mathe */
  .katex-display{overflow-x:auto; overflow-y:hidden; padding:.4em 0;}

  ul,ol{padding-left:1.5em;} li{margin:.3em 0;}

  @media (max-width:640px){ body{font-size:16px; padding:1rem;} h1{font-size:1.8rem;} }
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("div.sourceCode").forEach(function (box) {
    var code = box.querySelector("code");
    if (!code) return;
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "copy-btn";
    btn.setAttribute("aria-label", "Code kopieren");
    btn.innerHTML =
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" ' +
      'stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/>' +
      '<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>' +
      '<span>Kopieren</span>';
    btn.addEventListener("click", function () {
      navigator.clipboard.writeText(code.innerText).then(function () {
        var label = btn.querySelector("span");
        var original = label.textContent;
        btn.classList.add("copied");
        label.textContent = "Kopiert!";
        setTimeout(function () {
          btn.classList.remove("copied");
          label.textContent = original;
        }, 1500);
      });
    });
    box.appendChild(btn);
  });
});
</script>