/* =========================================================
   PRAE WIKI PACK
   - Markdown Styling (HUD / Field Manual Style)
   ========================================================= */

/* =========================================================
   BASE
   ========================================================= */

   .md{
    --mdText: rgba(242,244,247,.92);
    --mdMuted: rgba(183,192,205,.82);
    --mdStroke: rgba(255,255,255,.10);
    --mdStroke2: rgba(255,255,255,.08);
    --mdPanel: rgba(0,0,0,.16);
    --mdPanel2: rgba(0,0,0,.22);
    --mdGlow: rgba(210,42,42,.22);
  
    color: var(--mdText);
    font-size: 14px;
    line-height: 1.85;
  
    /* WICHTIG: Counter komplett aus */
    counter-reset: none;
  }
  
  /* =========================================================
     TYPOGRAPHY
     ========================================================= */
  
  .md h1,
  .md h2,
  .md h3,
  .md h4{
    font-family: ui-monospace, Consolas, monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 18px 0 10px;
    color: rgba(242,244,247,.92);
  }
  
  .md h1{ font-size: 26px; }
  
  /* --- Kapitel (##) --- */
  .md h2{
    font-size: 22px;
    opacity:.95;
    padding-top:6px;
    padding-left:36px;
    position:relative;
  }
  
  /* § Kapitelmarker */
  .md h2::before{
    content:"";
    position:absolute;
    left:0;
    top:6px;
    color:rgba(210,42,42,.9);
    font-family:ui-monospace,Consolas,monospace;
    font-weight:700;
    font-size:22px;
    text-shadow:0 0 8px rgba(210,42,42,.45);
  }
  
  
  .md h3{ font-size: 18px; opacity:.92; }
  .md h4{ font-size: 12px; opacity:.88; }
  
  .md p{ margin: 10px 0; }
  .md em{ opacity:.95; }
  .md strong{ color: rgba(255,255,255,.95); }
  
  /* =========================================================
     LINKS & LISTS
     ========================================================= */
  
  .md a{
    color: rgba(226, 40, 7, 0.92);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  
  .md ul{
    margin:14px 0 6px;

  }
  .md ol{
    margin: 8px 0 14px 22px;
  }
  
  .md li{ margin: 4px 0; }
  
  /* =========================================================
     HR / QUOTES
     ========================================================= */
  
  .md hr{
    border:0;
    height:1px;
    margin: 16px 0;
    background: linear-gradient(
      90deg,
      rgba(210,42,42,0),
      rgba(210,42,42,.55),
      rgba(210,42,42,0)
    );
  }
  
  .md .wiki-hr-strong{
    height:2px;
    margin:34px 0;
    background: linear-gradient(
      90deg,
      rgba(210,42,42,0),
      rgba(210,42,42,.85),
      rgba(210,42,42,0)
    );
    box-shadow: 0 0 16px rgba(210,42,42,.45);
  }
  
  .md blockquote{
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--mdStroke);
    background: rgba(0,0,0,.18);
    color: var(--mdMuted);
  }
  
  /* =========================================================
     CODE
     ========================================================= */
  
  .md code{
    font-family: ui-monospace, Consolas, monospace;
    line-height: 0.5;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.24);
  }
  
  .md pre{
    margin: 12px 0;
    line-height: 0.5;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);
    overflow:auto;
  }
  .codeBox{
    margin: 18px 0;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.28);
    overflow: hidden;
    position: relative;
  }
  .codeBox .codeHead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.35));
  }
  .codeBox .codeTitle{
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(242,244,247,.9);
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .codeBox .copyBtn{
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.45);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(242,244,247,.9);
    cursor: pointer;
    opacity:.8;
  }
  .codeBox .copyBtn:hover{ opacity:1; }
  .codeBox pre{
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  /* ===== CodeBox Scrollbar ===== */
  .codeBox pre{
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  
    position: relative;
    padding-left: 54px;
  
    max-height: 500px;
    overflow: auto;
  
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.4 !important;
  
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
  }

/* Chrome / Edge / Safari */
.codeBox pre::-webkit-scrollbar{
  width: 6px;        /* vertikal */
  height: 6px;       /* horizontal */
}

.codeBox pre::-webkit-scrollbar-track{
  background: transparent;   /* <<< KEIN weißer Hintergrund */
}

.codeBox pre::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.25);
  border-radius: 999px;
}

.codeBox pre::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.45);
}
  /* ===== CodeBox: Zeilennummern ===== */
.codeBox pre{
  position: relative;
  padding-left: 54px;            /* Platz für Nummern links */
  overflow: auto; 
}

/* Nummern-Spalte */
.codeBox pre::before{
  content: attr(data-lines);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 44px;
  padding: 14px 10px;           /* muss zum pre-padding passen */
  box-sizing: border-box;

  text-align: right;
  white-space: pre;             /* wichtig: \n wird als neue Zeile dargestellt */
  line-height: 1.4;             /* muss mit code line-height übereinstimmen */

  color: rgba(255,255,255,.35);
  border-right: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.12);
}

/* Code: Tabs/Spaces behalten */
.codeBox pre code{
  white-space: pre;              /* keine Umbrüche zusammenfassen */
  tab-size: 2;                   /* oder 4, wie du willst */
  -moz-tab-size: 2;
  line-height: 1.4;
  display:block;
  border: 1px transparent;
  overflow-wrap: normal;
  word-break: normal;
}

  
  /* =========================================================
     IMAGES
     ========================================================= */
  
  .md img{
    width:100%;
    max-height:560px;
    object-fit:cover;
    border-radius:18px;
    margin:14px 0 6px;
  }
  
  /* Größen */
  .md .wiki-img-xs{ max-width:220px; }
  .md .wiki-img-sm{ max-width:340px; }
  .md .wiki-img-md{ max-width:520px; }
  .md .wiki-img-lg{ max-width:720px; }
  .md .wiki-img-xl{ max-width:960px; }
  
  /* Float */
  .md img.wiki-left{
    float:left;
    max-width:360px;
    margin:8px 14px 8px 0;
    padding: 0px;
  
  }
  .md img.wiki-right{
    float:right;
    max-width:360px;
    margin:8px 14px 14px;
  }
  .md img.wiki-center{
    display:block;
    width:auto;            /* <<< DAS ist der Schlüssel */
    max-width:100%;        /* Sicherheit */
    margin:14px auto;
    float:none;
  }
  .md .wiki-clear{ clear:both; }
  .md ul, .md ol{
    list-style-position: outside;
    padding-left: 24px;     /* sorgt dafür, dass Marker nicht kollidieren */
    margin: 14px 0 6px;
  }
  
  /* =========================================================
     TABLES
     ========================================================= */
  
  .md table{
    width:100%;
    border-spacing:0;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background: rgba(0,0,0,.18);
  }
  
  .md thead th{
    font-family: ui-monospace,Consolas,monospace;
    text-transform: uppercase;
    font-size: 11px;
    padding: 12px;
  }
  
  .md tbody td{
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  /* Mobile: Tabellen horizontal scrollbar statt abgeschnitten */
  @media (max-width: 900px){
  .md table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;      /* verhindert Umbrüche in Zellen */
  }

  /* optional: etwas kleinere Schrift/Polster */
  .md thead th{ font-size: 10px; padding: 10px; }
  .md tbody td{ padding: 9px 10px; font-size: 6px; }
}
  
  /* =========================================================
     CALLOUTS / BOXES
     ========================================================= */
  
  .md .wiki-callout{
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:12px 14px;
    margin:12px 0;
    display: flow-root; 
  }

  .md .wiki-callout .t{
  font-size: 15px;
  text-transform: uppercase;
  }
  
  .md .wiki-callout.info{ border-color:#58dca044; background: rgba(88,220,160,.1);}
  .md .wiki-callout.warn{ border-color:#ffcc6644; background: rgba(255,204,102,.1);}
  .md .wiki-callout.danger{ border-color:#d24a4a44; background: rgba(210,74,74,.1);} 
  
  .wiki-box{
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:14px;
    margin:14px 0;
    display: flow-root; 
  }

  .wiki-box.blue{border:1px solid rgb(11, 90, 192); border-radius:1px; background: rgba(11, 90, 192,.1);}
  .wiki-box.green{border:1px solid rgb(17, 104, 0); border-radius:1px; background: rgba(17, 104, 0,.1);}
  .wiki-box.red{border:1px solid rgb(255, 0, 0); border-radius:1px; background: rgba(255,0,0,.1);}



  
  /* =========================================================
     UTILITIES
     ========================================================= */
  
  .wiki-red{ color:#d24a4a; font-weight:700; }
  .wiki-green{ color:#58dca0; font-weight:700; }
  .wiki-blue{ color:#6cb8ff; font-weight:700; }
  .wiki-amber{ color:#ffcc66; font-weight:700; }
  .wiki-orange{ color:#fa891f; font-weight:700; }
  .wiki-violet{ color:#ee0fbe; font-weight:700; }
  .wiki-grey{ color:#746f72; font-weight:700; }

  .wiki-chip{
    display:inline-block;
    padding:3px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.12);
    font-family: ui-monospace,Consolas,monospace;
    font-size:8px;
  }
  
  .wiki-section{
    border-left:3px solid rgba(210,42,42,.45);
    padding-left:14px;
    margin:24px 0;
  }
  
  .wiki-term{
    border-bottom:1px dotted rgba(255,255,255,.4);
    cursor:help;
  }
  /* Tooltip */
  .wiki-term::after{
    content: attr(data-term);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%);

    max-width: 260px;        /* <<< HIER die Breite */
    width: max-content;
    padding: 8px 10px;

    background: rgba(0,0,0,.85);
    color: rgba(242,244,247,.95);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.12);

    font-size: 12px;
    line-height: 1.5;
    white-space: normal;    /* <<< erlaubt Zeilenumbruch */
    text-align: left;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 50;
  }

/* anzeigen bei Hover */
  .wiki-term:hover::after{
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
  }

  /* =========================================================
     TOC
     ========================================================= */
  
  .wiki-toc{
    position:sticky;
    top:110px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.22);
    border-radius:18px;
    padding:14px;
  }
  
/* ===== Scrollbar Styling: wiki-toc ===== */

/* Chrome, Edge, Safari */
.wiki-toc::-webkit-scrollbar{
  width: 8px;
}

.wiki-toc::-webkit-scrollbar-track{
  background: transparent;          /* kein weißer Hintergrund */
}

.wiki-toc::-webkit-scrollbar-thumb{
  background-color: rgba(255,255,255,.18);
  border-radius: 10px;
}

.wiki-toc::-webkit-scrollbar-thumb:hover{
  background-color: rgba(255,255,255,.28);
}

/* Firefox */
.wiki-toc{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}


  .wiki-toc a.toc-h2{ padding-left: 8px; }
  .wiki-toc a.toc-h3{ padding-left: 22px; opacity: .88; }