/* ==========================================================================
   xmstore Handbuch – modern skin
   Loaded after default.css (old MediaWiki "Vector" export) and overrides it.
   Content HTML stays untouched; everything here is presentation only.
   ========================================================================== */

:root {
  --ink: #1f1d2b;          /* text */
  --ink-soft: #57546a;     /* secondary text */
  --line: #e4e3ec;         /* hairlines, borders */
  --panel: #f4f4f8;        /* sidebar, code, toc */
  --paper: #ffffff;
  --violet: #5034ff;       /* xmstore brand */
  --violet-ink: #3b22d6;   /* link hover / pressed */
  --violet-wash: #f1eeff;

  --amber: #a15c00;  --amber-wash: #fff6e5;
  --red: #b4232c;    --red-wash: #fdeeee;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --nav-h: 64px;
  --side-w: 264px;
  --measure: 46rem;        /* ~72 characters */
}

@media screen {

  /* ---------- base ---------- */
  html { scroll-padding-top: calc(var(--nav-h) + 16px); }
  body, body.wiki-page {
    background: var(--paper) !important;
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding-top: var(--nav-h) !important;
  }
  #mw-page-base, #mw-head-base, #mw-head, #p-logo { display: none !important; }
  a { color: var(--violet); text-decoration: none; }
  a:hover { color: var(--violet-ink); text-decoration: underline; text-underline-offset: 3px; }
  a:visited { color: var(--violet); }
  .mw-body-content a, .mw-body-content a.external, .mw-body-content a:visited, .mw-body-content a.external:visited { color: var(--violet); }
  .mw-body-content a:hover { color: var(--violet-ink); }
  :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 3px; }
  ::selection { background: #dcd5ff; }

  /* ---------- top bar ---------- */
  #xmstore-topnav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--nav-h); box-sizing: border-box;
    padding: 0 !important;
    background: rgba(255,255,255,.92) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--line) !important;
    font-family: var(--font) !important;
  }
  #xmstore-topnav-inner {
    display: flex !important; align-items: center; justify-content: space-between;
    max-width: none !important; height: 100%; padding: 0 28px !important; box-sizing: border-box;
  }
  #xmstore-topnav-logo { display: flex !important; align-items: center; gap: 14px; width: auto !important; }
  #xmstore-topnav-logo img { height: 30px !important; display: block; }
  #xmstore-topnav-logo::after {
    content: "Handbuch";
    font-size: 15px; font-weight: 600; color: var(--ink-soft);
    padding-left: 14px; border-left: 1px solid var(--line); line-height: 22px;
  }
  #xmstore-topnav-menu { display: flex !important; align-items: center; gap: 4px; }
  #xmstore-topnav-menu > a, #xmstore-topnav .dropdown > a {
    color: var(--ink) !important; font-size: 15px; font-weight: 500;
    padding: 8px 14px !important; border-radius: 8px;
  }
  #xmstore-topnav-menu > a:hover, #xmstore-topnav .dropdown > a:hover {
    background: var(--panel); text-decoration: none; color: var(--ink) !important;
  }
  #xmstore-topnav .dropdown-content {
    border: 1px solid var(--line); border-radius: 12px; padding: 6px;
    box-shadow: 0 12px 32px rgba(31,29,43,.12) !important; min-width: 260px !important;
  }
  #xmstore-topnav .dropdown-content a {
    color: var(--ink) !important; font-size: 15px; border-radius: 8px; padding: 9px 12px !important;
  }
  #xmstore-topnav .dropdown-content a:hover { background: var(--violet-wash) !important; text-decoration: none; }
  #xmstore-topnav .dropdown:focus-within .dropdown-content { display: block; }

  /* ---------- sidebar ---------- */
  div#mw-panel {
    position: fixed !important; top: var(--nav-h) !important; left: 0; bottom: 0;
    width: var(--side-w) !important; box-sizing: border-box;
    padding: 24px 16px 40px !important; overflow-y: auto;
    background: var(--panel); border-right: 1px solid var(--line);
    font-family: var(--font);
  }
  div#mw-panel div.portal { padding: 0 0 18px !important; margin: 0 !important; }
  div#mw-panel div.portal h3 {
    margin: 0 0 4px !important; padding: 0 10px !important;
    font-size: 13px !important; font-weight: 600 !important; letter-spacing: .01em;
    color: var(--ink-soft) !important; border: 0 !important; background: none !important;
    font-family: var(--font) !important;
  }
  div#mw-panel div.portal div.body { margin: 0 !important; padding: 0 !important; background: none !important; }
  div#mw-panel div.portal div.body ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  div#mw-panel div.portal div.body ul li { margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.35 !important; }
  div#mw-panel div.portal div.body ul li a {
    display: block; padding: 6px 10px; border-radius: 7px; color: var(--ink) !important;
  }
  div#mw-panel div.portal div.body ul li a:hover { background: #e9e8f1; text-decoration: none; }
  div#mw-panel div.portal div.body ul li a[aria-current="page"] {
    background: var(--paper); color: var(--violet) !important; font-weight: 600;
    box-shadow: inset 3px 0 0 var(--violet);
  }

  /* ---------- content column ---------- */
  div#content, .mw-body {
    margin: 0 0 0 var(--side-w) !important;
    padding: 56px clamp(24px, 5vw, 72px) 64px !important;
    border: 0 !important; background: var(--paper) !important; color: var(--ink) !important;
    font-family: var(--font);
  }
  #content > *, #bodyContent { max-width: var(--measure); margin-left: auto; margin-right: auto; }
  #bodyContent, .mw-body-content { font-size: 17px !important; line-height: 1.68 !important; }
  #siteSub, #contentSub, #jump-to-nav, .mw-indicators:empty { display: none !important; }

  /* page title, framed by print crop marks */
  h1#firstHeading, .mw-body h1.firstHeading {
    position: relative;
    max-width: var(--measure); box-sizing: border-box;
    margin: 0 auto 36px !important; padding: 22px 26px !important;
    font-family: var(--font) !important;
    font-size: clamp(30px, 3.4vw, 42px) !important; line-height: 1.12 !important;
    font-weight: 700 !important; letter-spacing: -.02em; color: var(--ink) !important;
    border: 0 !important;
    background:
      linear-gradient(var(--violet), var(--violet)) top left / 18px 2px,
      linear-gradient(var(--violet), var(--violet)) top left / 2px 18px,
      linear-gradient(var(--violet), var(--violet)) top right / 18px 2px,
      linear-gradient(var(--violet), var(--violet)) top right / 2px 18px,
      linear-gradient(var(--violet), var(--violet)) bottom left / 18px 2px,
      linear-gradient(var(--violet), var(--violet)) bottom left / 2px 18px,
      linear-gradient(var(--violet), var(--violet)) bottom right / 18px 2px,
      linear-gradient(var(--violet), var(--violet)) bottom right / 2px 18px;
    background-repeat: no-repeat;
  }

  /* headings */
  .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5 {
    font-family: var(--font) !important; color: var(--ink) !important;
    border: 0 !important; background: none !important; overflow: visible;
  }
  .mw-body-content h2 {
    font-size: 26px !important; line-height: 1.25 !important; font-weight: 700 !important;
    letter-spacing: -.01em; margin: 56px 0 14px !important; padding: 18px 0 0 !important;
    border-top: 1px solid var(--line) !important;
  }
  .mw-body-content h3 { font-size: 20px !important; font-weight: 650 !important; line-height: 1.3; margin: 36px 0 10px !important; padding: 0 !important; }
  .mw-body-content h4, .mw-body-content h5 { font-size: 17px !important; font-weight: 650 !important; margin: 28px 0 8px !important; padding: 0 !important; }
  .mw-body-content p { margin: 0 0 1em !important; }
  .mw-body-content ul, .mw-body-content ol { margin: .2em 0 1.1em 1.4em !important; padding: 0 !important; }
  .mw-body-content ul { list-style: disc !important; list-style-image: none !important; }
  .mw-body-content li { margin: 0 0 .35em !important; }
  .mw-body-content li::marker { color: #9a97ad; }
  .mw-body-content dl { margin: 0 0 1em !important; }
  .mw-body-content dt { font-weight: 650; }
  .mw-body-content abbr[title] { text-decoration: none; border-bottom: 0 !important; cursor: help; }
  .mw-body-content b, .mw-body-content strong { font-weight: 650; }
  /* empty spacer paragraphs from the MediaWiki export */
  .mw-body-content p:has(> br:only-child) { display: none; }
  .mw-body-content hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }

  /* first line of the article reads as a lead */
  .mw-parser-output > p:first-child { font-size: 19px; line-height: 1.6; color: var(--ink); }

  /* external link icon from Vector removed */
  .mw-body-content a.external { background: none !important; padding-right: 0 !important; }
  #content a.external.text::after, #content a.external.free::after { content: none !important; }

  /* ---------- table of contents ---------- */
  #toc, .toc {
    display: block !important; box-sizing: border-box; width: 100%;
    margin: 0 0 40px !important; padding: 18px 22px 14px !important;
    background: var(--panel) !important; border: 0 !important; border-radius: 12px;
    font-size: 15px !important;
  }
  .toc .toctitle { text-align: left !important; margin-bottom: 8px; }
  .toc .toctitle h2 {
    font-size: 15px !important; font-weight: 650 !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; color: var(--ink-soft) !important; display: inline;
  }
  .toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
  .toc ul ul { margin: 2px 0 6px 18px !important; }
  .toc li { margin: 0 !important; line-height: 1.45 !important; }
  .toc li a { display: inline-block; padding: 3px 0; color: var(--ink) !important; }
  .toc li a:hover { color: var(--violet) !important; }
  .toc .tocnumber { color: #9a97ad !important; padding-right: .5em; font-variant-numeric: tabular-nums; }
  .toc .toclevel-1 > a { font-weight: 550; }
  .toc .toclevel-3, .toc .toclevel-4, .toc .toclevel-5 { display: none !important; }
  @media (min-width: 1100px) {
    .toc > ul { columns: 2; column-gap: 40px; }
    .toc .toclevel-1 { break-inside: avoid; }
  }

  /* ---------- notices (Wichtig / Hinweis / Achtung) ----------
     Exported as an inline-styled title div followed by a bordered body div. */
  .mw-body-content div[style*="font-weight: bold"][style*="background-color"] {
    margin: 28px 0 0 !important; padding: 12px 18px 2px !important;
    border: 0 !important; border-left: 4px solid var(--violet) !important;
    border-radius: 0 10px 0 0;
    background: var(--violet-wash) !important; color: var(--violet-ink) !important;
    font-size: 15px; font-weight: 650 !important;
  }
  .mw-body-content div[style*="border-top-width: 0"] {
    margin: 0 0 28px !important; padding: 4px 18px 14px !important;
    border: 0 !important; border-left: 4px solid var(--violet) !important;
    border-radius: 0 0 10px 0;
    background: var(--violet-wash) !important; color: var(--ink) !important;
    font-size: 16px; line-height: 1.6;
  }
  .mw-body-content div[style*="border-top-width: 0"] > :last-child { margin-bottom: 0 !important; }
  /* amber: "Wichtig" */
  .mw-body-content div[style*="font-weight: bold"][style*="#FFEEAA"] { background: var(--amber-wash) !important; color: var(--amber) !important; border-left-color: #e0a100 !important; }
  .mw-body-content div[style*="#FFEEAA"] + div[style*="border-top-width: 0"] { background: var(--amber-wash) !important; border-left-color: #e0a100 !important; }
  /* red: "Achtung" */
  .mw-body-content div[style*="font-weight: bold"][style*="#FFAAAA"], .mw-body-content div[style*="font-weight: bold"][style*="#ffdddd"] { background: var(--red-wash) !important; color: var(--red) !important; border-left-color: var(--red) !important; }
  .mw-body-content div[style*="#FFAAAA"] + div[style*="border-top-width: 0"],
  .mw-body-content div[style*="#ffdddd"] + div[style*="border-top-width: 0"] { background: var(--red-wash) !important; border-left-color: var(--red) !important; }

  /* product link box added for SEO */
  .xm-product-hint {
    margin: 48px 0 0 !important; padding: 16px 20px !important;
    border: 1px solid var(--line) !important; border-left: 1px solid var(--line) !important;
    border-radius: 12px; background: var(--paper) !important;
    font-size: 15px; color: var(--ink-soft);
  }

  /* ---------- code ---------- */
  .mw-body-content pre, .mw-highlight pre {
    margin: 0 0 1.4em !important; padding: 16px 18px !important;
    background: #1f1d2b !important; color: #ecebf5 !important;
    border: 0 !important; border-radius: 10px;
    font-family: var(--mono) !important; font-size: 14px !important; line-height: 1.6 !important;
    overflow-x: auto; white-space: pre;
  }
  .mw-highlight pre span { color: inherit !important; font-weight: normal !important; font-style: normal !important; background: none !important; }
  .mw-highlight .s, .mw-highlight .s1, .mw-highlight .s2 { color: #b9f2c4 !important; }
  .mw-highlight .k, .mw-highlight .kd, .mw-highlight .kn, .mw-highlight .nb { color: #c3b6ff !important; }
  .mw-highlight .c, .mw-highlight .c1, .mw-highlight .cm, .mw-highlight .cp { color: #8f8ca3 !important; }
  .mw-highlight .m, .mw-highlight .mi, .mw-highlight .nv, .mw-highlight .na { color: #ffd59a !important; }
  .mw-body-content code, .mw-body-content tt, .mw-body-content kbd {
    font-family: var(--mono) !important; font-size: .88em !important;
    background: var(--panel) !important; border: 1px solid var(--line) !important;
    border-radius: 5px; padding: 1px 5px !important; color: var(--ink) !important;
  }

  /* ---------- tables ---------- */
  .mw-body-content table.wikitable, .mw-body-content table {
    border-collapse: separate !important; border-spacing: 0;
    margin: 8px 0 24px !important; font-size: 15px !important;
    border: 1px solid var(--line) !important; border-radius: 10px; overflow: hidden;
    background: var(--paper) !important; max-width: 100%;
  }
  .mw-body-content table th, .mw-body-content table td {
    padding: 9px 14px !important; border: 0 !important; border-bottom: 1px solid var(--line) !important;
    text-align: left; vertical-align: top; background: none !important;
  }
  .mw-body-content table th { background: var(--panel) !important; font-weight: 650; color: var(--ink); }
  .mw-body-content table tr:last-child td { border-bottom: 0 !important; }

  /* ---------- images ---------- */
  .mw-body-content img { max-width: 100%; height: auto; }
  .mw-body-content .thumbinner, .mw-body-content div.thumb {
    border: 0 !important; background: none !important; padding: 0 !important;
  }
  .mw-body-content .thumbimage, .mw-body-content a.image img, .mw-body-content .mw-thumbnail-link img {
    border: 1px solid var(--line) !important; border-radius: 8px;
  }
  .mw-body-content .thumbcaption { font-size: 14px !important; color: var(--ink-soft); padding: 6px 2px 0 !important; }

  /* ---------- footer ---------- */
  div#footer {
    margin: 0 0 0 var(--side-w) !important; padding: 28px clamp(24px, 5vw, 72px) 40px !important;
    border-top: 1px solid var(--line) !important; background: var(--paper);
    font-family: var(--font); font-size: 14px !important;
  }
  div#footer ul { max-width: var(--measure); margin: 0 auto !important; padding: 0 !important; display: flex; gap: 24px; list-style: none; }
  div#footer ul li { padding: 0 !important; margin: 0 !important; color: var(--ink-soft); }
  div#footer ul li a { color: var(--ink-soft) !important; }
  div#footer ul li a:hover { color: var(--violet) !important; }
  div#footer > ul::before {
    content: "© Akitogo Internet and Media Applications GmbH"; color: var(--ink-soft); margin-right: auto;
  }

  /* ---------- small screens: sidebar below the article ---------- */
  @media (max-width: 960px) {
    div#mw-panel {
      position: static !important; width: auto !important; height: auto;
      border-right: 0; border-top: 1px solid var(--line); padding: 28px 20px !important;
      columns: 2; column-gap: 24px;
    }
    div#mw-panel div.portal { break-inside: avoid; }
    div#content, .mw-body, div#footer { margin-left: 0 !important; }
    div#content, .mw-body { padding-top: 32px !important; }
    #xmstore-topnav-inner { padding: 0 16px !important; }
    #xmstore-topnav-logo::after { display: none; }
  }
  @media (max-width: 560px) {
    div#mw-panel { columns: 1; }
    #bodyContent, .mw-body-content { font-size: 16px !important; }
    h1#firstHeading { padding: 16px 18px !important; }
    div#footer ul { flex-wrap: wrap; gap: 10px 20px; }
  }
}

/* ---------- start page: chapter overview ---------- */
@media screen {
  .xm-topics {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 48px; margin: 40px 0 0;
  }
  .mw-body-content .xm-topic h2 {
    margin: 0 0 4px !important; padding: 20px 0 0 !important;
    font-size: 21px !important; border-top: 2px solid var(--ink) !important;
  }
  .xm-topic { padding-bottom: 28px; }
  .xm-topic > p { margin: 0 0 10px !important; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
  .mw-body-content .xm-topic ul { list-style: none !important; margin: 0 !important; }
  .mw-body-content .xm-topic li { margin: 0 !important; font-size: 16px; line-height: 1.5; color: var(--ink-soft); }
  .mw-body-content .xm-topic li a { display: inline-block; padding: 3px 0; font-weight: 500; }
  .mw-body-content .xm-topic ul ul { margin: 0 0 4px 16px !important; }
  .mw-body-content .xm-topic ul ul li { font-size: 15px; }
  @media (max-width: 720px) { .xm-topics { grid-template-columns: 1fr; } }
}