:root {
      --mc-green:  #5aac44;
      --mc-dark:   #1d1f21;
      --mc-gray:   #3c3f41;
      --mc-light:  #c6c6c6;
      --ts-blue:   #1a78c2;
      --ts-dark:   #1b2838;
      --accent:    #f9a825;
      --bg:        #f4f6fb;
      --card:      #ffffff;
      --radius:    14px;
      --shadow:    0 4px 18px rgba(0,0,0,.10);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background: var(--bg);
      color: #222;
      line-height: 1.6;
    }

    /* ── Header ── */
    header {
      background: linear-gradient(135deg, #1d1f21 0%, #2e3a59 100%);
      color: #fff;
      text-align: center;
      padding: 3rem 1.5rem 2.5rem;
    }
    header h1 {
      font-size: 2.2rem;
      letter-spacing: .5px;
      margin-bottom: .4rem;
    }
    header p {
      font-size: 1.05rem;
      opacity: .8;
    }
    .server-badge {
      display: inline-block;
      background: var(--accent);
      color: #1d1f21;
      font-weight: 700;
      font-size: 1rem;
      padding: .3rem .9rem;
      border-radius: 999px;
      margin-top: 1rem;
      letter-spacing: .5px;
    }

    /* ── Layout ── */
    main {
      max-width: 860px;
      margin: 2.5rem auto;
      padding: 0 1.2rem;
    }

    section {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2rem 2rem 2.2rem;
      margin-bottom: 2.5rem;
    }

    /* ── Section headings ── */
    .section-header {
      display: flex;
      align-items: center;
      gap: .75rem;
      margin-bottom: 1.4rem;
    }
    .section-icon {
      width: 44px;
      height: 44px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    .mc  .section-icon { background: #5aac44; }
    .ts  .section-icon { background: #1a78c2; }

    h2 {
      font-size: 1.55rem;
    }
    .mc  h2 { color: #2e7d32; }
    .ts  h2 { color: #0d47a1; }

    /* ── Steps ── */
    ol.steps {
      list-style: none;
      counter-reset: steps;
      padding: 0;
    }
    ol.steps li {
      counter-increment: steps;
      display: flex;
      gap: 1rem;
      margin-bottom: 1.1rem;
      align-items: flex-start;
    }
    ol.steps li::before {
      content: counter(steps);
      min-width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: .95rem;
      flex-shrink: 0;
      margin-top: .05rem;
    }
    .mc  ol.steps li::before { background: #c8e6c9; color: #1b5e20; }
    .ts  ol.steps li::before { background: #bbdefb; color: #0d47a1; }

    ol.steps li p { margin: 0; }

    /* ── Code / address highlight ── */
    code {
      font-family: 'Consolas', 'Courier New', monospace;
      font-size: .95em;
      padding: .15em .45em;
      border-radius: 5px;
      background: #f0f0f0;
      color: #222;
    }
    .mc  code { background: #e8f5e9; color: #1b5e20; }
    .ts  code { background: #e3f2fd; color: #0d47a1; }
    .section-summary code { background: #2a2a2a; color: #5aac44; }

    /* ── Screenshot container ── */
    .screenshot {
      margin: 1.6rem 0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0,0,0,.18);
    }
    .screenshot img {
      display: block;
      width: 100%;
      height: auto;
    }
    .screenshot figcaption {
      font-size: .82rem;
      color: #666;
      text-align: center;
      margin-top: .5rem;
    }

    /* ── Tip box ── */
    .tip {
      display: flex;
      gap: .7rem;
      align-items: flex-start;
      background: #fff8e1;
      border-left: 4px solid var(--accent);
      border-radius: 0 8px 8px 0;
      padding: .8rem 1rem;
      margin-top: 1.2rem;
      font-size: .93rem;
    }
    .tip span { font-size: 1.2rem; }
    .tip-warning {
      background: #fff0f0;
      border-left-color: #e53935;
      margin-top: .8rem;
    }
    .link-warning { color: #c62828; }

    /* ── Step sub-section heading (e.g. "Schritt 2 – …") ── */
    .step-intro { margin-top: 1rem; }

    /* ── Device selector label ── */
    .device-label { font-weight: 700; margin-bottom: .5rem; }

    /* ── Nested collapsibles inside a collapsible body ── */
    .collapsible-body > .collapsible { margin-top: .8rem; }

    /* ── Collapsible (details/summary) ── */
    details.collapsible {
      margin-top: 1.6rem;
      margin-bottom: 1.1rem;
      border: 1.5px solid #c8e6c9;
      border-radius: 10px;
      overflow: hidden;
    }
    details.collapsible summary {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .85rem 1.1rem;
      background: #f1f8e9;
      cursor: pointer;
      font-weight: 700;
      font-size: 1rem;
      color: #2e7d32;
      list-style: none;
      user-select: none;
    }
    details.collapsible summary::-webkit-details-marker { display: none; }
    details.collapsible summary .toggle-arrow {
      margin-left: auto;
      font-size: .85rem;
      transition: transform .2s;
    }
    details.collapsible[open] summary .toggle-arrow {
      transform: rotate(90deg);
    }
    details.collapsible .collapsible-body {
      padding: 1.2rem 1.4rem 1.3rem;
      background: #fff;
    }
    details.collapsible .collapsible-body p { margin-bottom: .7rem; }
    details.collapsible .collapsible-body p:last-child { margin-bottom: 0; }

    /* ── Live-Status ── */
    .status-strip {
      display: flex;
      align-items: center;
      gap: .5rem 1rem;
      flex-wrap: wrap;
      margin-top: .9rem;
      padding-top: .75rem;
      border-top: 1px solid #333;
      font-size: .88rem;
      color: #aaa;
    }
    #status-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .35rem;
      width: 100%;
    }
    .status-item { display: flex; align-items: center; gap: .45rem; }
    .sdot {
      display: inline-block;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #555;
      flex-shrink: 0;
      transition: background .3s;
    }
    .sdot.online  { background: #4caf50; box-shadow: 0 0 5px #4caf5088; }
    .sdot.offline { background: #e53935; }
    .status-divider { color: #444; }
    #status-meta { font-size: .8rem; color: #666; }

    /* Loading dots */
    .status-loading { display: flex; align-items: center; gap: 4px; }
    .status-loading span {
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #666;
      animation: dotpulse 1.2s ease-in-out infinite;
    }
    .status-loading span:nth-child(2) { animation-delay: .2s; }
    .status-loading span:nth-child(3) { animation-delay: .4s; }
    @keyframes dotpulse {
      0%, 80%, 100% { opacity: .2; transform: scale(.8); }
      40%           { opacity: 1;  transform: scale(1);   }
    }

    /* ── Dark summary section ── */
    .section-summary {
      background: #1d1f21;
      color: #e0e0e0;
    }
    .section-summary h2 { color: var(--accent); }
    .section-summary .section-icon { background: var(--accent); font-size: 1.2rem; }
    .section-summary table {
      width: 100%;
      border-collapse: collapse;
      font-size: .97rem;
    }
    .section-summary thead tr { border-bottom: 2px solid #444; }
    .section-summary th {
      text-align: left;
      padding: .5rem .4rem;
      color: var(--accent);
    }
    .section-summary td { padding: .55rem .4rem; }
    .section-summary tbody tr { border-bottom: 1px solid #333; }
    .section-summary tbody tr:last-child { border-bottom: none; }
    .section-summary .col-mc   { font-family: monospace; color: #5aac44; font-weight: 700; }
    .section-summary .col-ts   { font-family: monospace; color: #1a78c2; font-weight: 700; }
    .section-summary .col-dns  { font-family: monospace; color: #aaa;    font-weight: 700; }
    .section-summary .col-hint { color: #888; font-size: .85em; }

    /* ── TS section h3 ── */
    .ts h3 {
      color: #0d47a1;
      margin: 1.6rem 0 .6rem;
    }
    .ts ol.steps[style] { margin-top: .9rem; }

    /* ── Footer ── */
    footer {
      text-align: center;
      padding: 1.5rem;
      color: #888;
      font-size: .85rem;
    }

    /* ════════════════════════════════
       PRINT STYLES – fits 2 × A4, B&W
       ════════════════════════════════ */
    @media print {
      @page {
        size: A4;
        margin: 11mm 13mm;
      }

      /* ── Base ── */
      body {
        font-size: 8.5pt;
        line-height: 1.35;
        background: #fff;
        color: #000;
      }

      /* ── Header: white bg, black text, bottom rule ── */
      header {
        padding: .4rem 1rem .35rem;
        background: #fff !important;
        color: #000 !important;
        border-bottom: 2.5pt solid #000;
        text-align: left;
      }
      header h1 { font-size: 13pt; margin-bottom: .1rem; color: #000; }
      header p  { font-size: 8pt; opacity: 1; color: #000; }
      .server-badge {
        font-size: 8pt;
        padding: .1rem .55rem;
        margin-top: .3rem;
        background: #000 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      /* ── Main ── */
      main { margin: .4rem auto; padding: 0; max-width: 100%; }

      /* ── Sections: plain white, black border ── */
      section {
        padding: .55rem .7rem .6rem;
        margin-bottom: .45rem;
        border-radius: 4px;
        box-shadow: none;
        background: #fff !important;
        color: #000 !important;
        border: 1.2pt solid #000;
      }

      /* ── Section icons: outlined box, no color fill ── */
      .section-header { margin-bottom: .5rem; gap: .4rem; }
      .section-icon {
        width: 26px; height: 26px; font-size: .9rem; border-radius: 4px;
        background: #fff !important;
        border: 1pt solid #000;
      }
      .mc .section-icon,
      .ts .section-icon { background: #fff !important; }

      /* ── Headings: always black ── */
      h2, .mc h2, .ts h2 { font-size: 12pt; color: #000 !important; }
      h3 { font-size: 9.5pt; color: #000 !important; margin: .5rem 0 .25rem !important; }

      /* ── Steps: outlined circles ── */
      ol.steps li        { margin-bottom: .35rem; gap: .5rem; }
      ol.steps li::before {
        min-width: 20px; height: 20px; font-size: 7.5pt;
        background: #fff !important;
        color: #000 !important;
        border: 1pt solid #000;
      }
      .mc ol.steps li::before,
      .ts ol.steps li::before {
        background: #fff !important;
        color: #000 !important;
      }

      /* ── Code: light gray bg, black text ── */
      code {
        background: #e8e8e8 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .mc code, .ts code { background: #e8e8e8 !important; color: #000 !important; }

      /* ── Tips: white bg, dark left border ── */
      .tip {
        padding: .3rem .55rem;
        margin-top: .35rem !important;
        font-size: 7.5pt;
        border-radius: 0 4px 4px 0;
        background: #f4f4f4 !important;
        border-left: 3pt solid #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      .tip span { font-size: .85rem; }
      .tip a { color: #000 !important; }

      /* ── Screenshots: shrink to save space, grayscale for B&W ── */
      figure.screenshot {
        margin: .5rem 0 .1rem;
        box-shadow: none;
        border: 1pt solid #000;
        border-radius: 4px;
        overflow: hidden;
      }
      figure.screenshot img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 5.2cm;
        object-fit: contain;
        object-position: top left;
        filter: grayscale(1) contrast(1.1);
      }
      figure.screenshot:last-of-type img { max-height: 4.2cm; }
      figcaption { font-size: 6.5pt; margin-top: .2rem; color: #333; }

      /* ── Summary table: white bg, black text & borders ── */
      section:first-of-type {
        background: #fff !important;
        color: #000 !important;
      }
      section:first-of-type th,
      section:first-of-type td { color: #000 !important; }
      section:first-of-type th { border-bottom: 1.5pt solid #000 !important; }
      section:first-of-type td { font-family: monospace; }
      table { font-size: 8pt; }

      /* ── Collapsible: always expanded in print ── */
      details.collapsible { border: 1pt solid #000; border-radius: 4px; }
      details.collapsible summary {
        background: #f4f4f4 !important;
        color: #000 !important;
        padding: .3rem .55rem;
        font-size: 8.5pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      details.collapsible .collapsible-body { padding: .4rem .55rem; }
      details.collapsible[open] summary .toggle-arrow { display: none; }

      /* ── Page breaks ── */
      section.mc        { page-break-after: always; }
      section.ts        { page-break-inside: avoid; }

      .status-strip { display: none; }
      footer { display: none; }
    }