body {
      font-family: "Inter", "Segoe UI", Arial, sans-serif;
      background: linear-gradient(180deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      color: var(--text-base);
      margin: 0;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      transition: background 0.3s ease, color 0.3s ease;
    }

    body.dark {
      --accent: #ff7b33;
      --accent-soft: rgba(255, 110, 45, 0.88);
      --bg-gradient-start: #1f2933;
      --bg-gradient-end: #111827;
      --text-base: #f5f7fa;
      --text-muted: #cbd5f5;
      --card-bg: rgba(17, 24, 39, 0.82);
      --surface: rgba(17, 24, 39, 0.82);
      --border-subtle: rgba(148, 163, 184, 0.28);
      --shadow-soft: 0 20px 40px rgba(2, 6, 23, 0.55);
      --section-shadow: 0 18px 38px rgba(15, 23, 42, 0.55);
      --link: #ff955a;
      --link-hover: #ffbf8f;
    }

    :root {
      --accent: #f4671f;
      --accent-soft: rgba(244, 103, 31, 0.85);
      --bg-gradient-start: #d4d7dc;
      --bg-gradient-end: #cfd6e3;
      --text-base: #2e3239;
      --text-muted: #4c5360;
      --card-bg: rgba(229, 230, 231, 0.95);
      --surface: #f2f2f2d8;
      --border-subtle: #d5dce6;
      --shadow-soft: 0 12px 32px rgba(15, 23, 42, 0.05);
      --section-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
      --link: #ec6a28;
      --link-hover: #c75315;
    }
    
    * {
      box-sizing: border-box;
    }

    a {
      color: var(--link);
      text-decoration: none;
      transition: color 0.2s ease, opacity 0.2s ease;
    }

    a:hover,
    a:focus {
      color: var(--link-hover);
    }

    .mode-toggle {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 100;
      background: rgba(17, 24, 39, 0.75);
      color: #ffffff;
      border: none;
      border-radius: 999px;
      padding: 10px 18px;
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      backdrop-filter: blur(12px);
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .mode-toggle:hover {
      transform: translateY(-2px);
    }

    body.dark .mode-toggle {
      background: rgba(255, 255, 255, 0.18);
      color: #ffffff;
    }

    .page-wrapper {
      display: grid;
      grid-template-columns: minmax(260px, 340px) minmax(0, 14fr) minmax(170px, 200px);
      grid-template-areas: "sidebar main right";
      gap: clamp(1.5rem, 4vw, 2.5rem);
      width: min(1820px, 100%);
      padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    }

    .sidebar {
      grid-area: sidebar;
      background: var(--accent-soft);
      color: #ffffff;
      border-radius: 1rem;
      padding: 1.75rem;
      box-shadow: 0 18px 36px rgba(255, 85, 0, 0.18);
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      position: sticky;
      top: clamp(1.5rem, 3vw, 3rem);
      height: fit-content;
      /* keep sidebar within viewport and allow its own scroll */
      max-height: calc(100vh - clamp(3rem, 6vw, 6rem));
      overflow-y: auto;
      /* custom scrollbar colors (uses CSS variables so it adapts to light/dark mode) */
      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--surface);
    }
    /* Webkit scrollbar customization */
    .sidebar::-webkit-scrollbar {
      width: 8px;
    }
    .sidebar::-webkit-scrollbar-track {
      background: var(--surface);
    }
    .sidebar::-webkit-scrollbar-thumb {
      background: var(--accent);
      border-radius: 4px;
    }
    .sidebar::-webkit-scrollbar-thumb:hover {
      background: var(--accent-soft);
    }

    .sidebar h2 {
      font-size: 1.4rem;
      font-weight: 700;
      margin: 0;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .sidebar-nav a {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.55rem 0.85rem;
      border-radius: 0.65rem;
      background: rgba(255, 255, 255, 0.12);
      color: inherit;
      opacity: 0.95;
      transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
    }

    .sidebar-nav a::before {
      content: "›";
      font-size: 1.1rem;
      opacity: 0.75;
      transition: transform 0.2s ease;
    }

    .sidebar-nav a:hover,
    .sidebar-nav a:focus {
      opacity: 1;
      transform: translateX(4px);
      background: rgba(255, 255, 255, 0.2);
    }

    .sidebar-nav a:hover::before,
    .sidebar-nav a:focus::before {
      transform: translateX(3px);
    }

     body.dark .sidebar {
      background: linear-gradient(160deg, rgba(188, 72, 0, 0.904), rgba(180, 70, 5, 0.78));
      box-shadow: 0 22px 44px rgba(10, 10, 18, 0.6);
    }

    body.dark .sidebar-nav a {
      background: rgba(255, 170, 120, 0.16);
    }

    body.dark .sidebar-nav a:hover,
    body.dark .sidebar-nav a:focus {
      background: rgba(255, 184, 140, 0.26);
    }

    .trennlinie {
      border: none;
      border-top: 2px solid #14141463;
      margin: 24px 0;
      opacity: 0.5;
      border-radius: 2px;
    }

    body.dark .trennlinie {
      border: none;
      border-top: 2px solid #ffffff4f;
      margin: 24px 0;
      opacity: 0.5;
      border-radius: 2px;
    }

   .main-column {
      grid-area: main;
      background: var(--card-bg);
      border-radius: 1.2rem;
      box-shadow: var(--shadow-soft);
      padding: clamp(2rem, 4vw, 3rem);
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .page-header {
      text-align: center;
    }

    .page-header h1 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 2.6rem);
      font-weight: 700;
      color: var(--text-base);
    }

    .content-section {
      background: var(--surface);
      border-radius: 1rem;
      border: 1px solid var(--border-subtle);
      box-shadow: var(--section-shadow);
      padding: clamp(1.5rem, 3vw, 2rem);
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
    }

    .content-section h2 {
      margin: 0;
      font-size: 1.4rem;
      color: var(--text-base);
      border-left: 4px solid var(--accent);
      padding-left: 0.75rem;
      line-height: 1.3;
    }

    .content-section h3 {
      margin: 0 0 0.3rem; /* kein zusätzlicher Abstand darüber, nur ein kleiner darunter */
      line-height: 1.4;   /* optional, damit zweizeilige h3 etwas kompakter wirken */
    }


    .content-section p {
      margin: 0;
      color: var(--text-muted);
      line-height: 1.7;
    }

    .content-section b {
      color: var(--accent);
    }

    .content-section ul,
    .content-section ol {
      margin: 0.2rem 0 0.4rem;
      padding-left: 1.2rem;
      color: var(--text-muted);
    }

    .content-section ul ul,
    .content-section ul ol,
    .content-section ol ul,
    .content-section ol ol {
      margin: 0.3rem 0;
      padding-left: 1.4rem;
      color: rgba(0, 0, 0, 0.579);
    }

    .content-section ul li,
    .content-section ol li {
      margin-bottom: 0.25cm;
    }

    body.dark .content-section ul ul,
    body.dark .content-section ul ol,
    body.dark .content-section ol ul,
    body.dark .content-section ol ol {
      color: rgba(255, 255, 255, 0.7);
    }
    
    body.dark .content-section {
      background: var(--surface);
    }

    .fette-zahlen {
      margin: 0.4rem 0;
      padding-left: 1.3em;
    }

    .fette-zahlen li {
      font-weight: normal;
    }

    .layer-title {
      font-weight: bold;
    }

    ol.fette-zahlen > li {
      font-weight: bold;
    }

    ol.fette-zahlen > li > span {
      font-weight: normal;
    }

    .schritte-titel {
      margin-bottom: 0;
    }

    .note-box {
      border-left: 4px solid var(--accent);
      background: rgba(255, 137, 85, 0.12);
      padding: 1rem 1.25rem;
      border-radius: 0.75rem;
      color: var(--text-muted);
    }

    body.dark .note-box {
      background: rgba(255, 137, 85, 0.18);
      color: #f8f9ff;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--border-subtle);
      border-radius: 0.75rem;
      overflow: hidden;
      font-size: 0.95rem;
    }

    table thead {
      background: rgba(0, 0, 0, 0.04);
    }

    table th,
    table td {
      padding: 0.75rem 1rem;
      color: var(--text-muted);
      border-bottom: 1px solid var(--border-subtle);
    }

    table td {
      text-align: center;
    }

    table th:nth-child(2),
    table td:nth-child(2) {
      text-align: center;
    }

    table tbody tr:last-child td {
      border-bottom: none;
    }

    body.dark table thead {
      background: rgba(148, 163, 184, 0.15);
    }

    .bottom-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem;
      text-align: center;
    }

    .bottom-links .back-link {
      background: rgba(255, 112, 51, 0.1);
      color: var(--link);
      padding: 0.75rem 1.2rem;
      border-radius: 0.75rem;
      border: 1px solid rgba(255, 112, 51, 0.2);
      transition: transform 0.2s ease, background 0.2s ease;
      font-weight: 600;
    }

    .bottom-links .back-link:hover {
      transform: translateY(-2px);
      background: rgba(255, 112, 51, 0.18);
    }

    .right-column {
      grid-area: right;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      border-left: 1px solid var(--border-subtle);
      padding-left: clamp(1rem, 3vw, 1.5rem);
    }

    .logo-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.6rem;
      width: 100%;
    }

    .logo-card {
      width: 100%;
      background: var(--surface);
      border-radius: 0.9rem;
      padding: 1.4rem 1.2rem;
      box-shadow: var(--section-shadow);
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .logo-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
    }

    .logo-card img {
      max-width: 140px;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .logo-divider {
      width: 60%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border-subtle), transparent);
    }

    .info-box {
      background: var(--surface);
      border-radius: 0.9rem;
      padding: 1.4rem;
      box-shadow: var(--section-shadow);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      font-size: 0.95rem;
      color: var(--text-muted);
    }

    .info-box strong {
      display: block;
      font-size: 1.05rem;
      color: var(--text-base);
    }

    .infobox {
      background: #eef4ff;
      border-left: 5px solid #4a7cff;
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 6px;
    }

    .infobox strong {
      color: #2d4fb3;
    }

    body.dark .infobox {
      background: #2b2f3a;
      border-left: 5px solid #6fa3ff;
    }

    body.dark .infobox strong {
      color: #708bdb;
    }

    .merksatz {
      background: #fff4e6;
      border-left: 5px solid #ff9800;
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 6px;
      font-weight: 500;
    }

    .warnung {
      background: #ffeaea;
      border-left: 5px solid #e53935;
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 6px;
    }

    body.dark .merksatz {
      background: #3a2a1a;
      border-left: 5px solid #ff9800;
    }

    body.dark .warnung {
      background: #3a1a1a;
      border-left: 5px solid #e53935;
    }
    
    .info-links {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .info-links a {
      color: var(--link);
      font-weight: 600;
    }

    .info-links a:hover {
      opacity: 0.85;
    }

    body.dark .logo-card,
    body.dark .info-box {
      background: var(--surface);
    }

    body.dark .logo-divider {
      background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.4), transparent);
    }

    @media (max-width: 1100px) {
      .page-wrapper {
        grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
        grid-template-areas:
          "sidebar main"
          "sidebar right";
      }

      .right-column {
        border-left: none;
        border-top: 1px solid var(--border-subtle);
        padding-left: 0;
        padding-top: clamp(1.5rem, 4vw, 2rem);
      }
    }

    @media (max-width: 860px) {
      .page-wrapper {
        grid-template-columns: 1fr;
        grid-template-areas:
          "sidebar"
          "main"
          "right";
      }

      .sidebar {
        position: relative;
        top: 0;
      }

      .right-column {
        border-top: none;
        padding-top: 0;
      }
    }

    @media (max-width: 600px) {
      .mode-toggle {
        top: 16px;
        right: 16px;
        padding: 8px 14px;
      }

      .main-column {
        padding: 1.75rem;
      }

      .content-section {
        padding: 1.35rem 1.25rem;
      }

      .logo-card img {
        max-width: 120px;
      }
    }

    .code-box {
      background: linear-gradient(180deg, rgba(205, 205, 205, 0.568) 0%, #cbcbcbad 100%);
      color: #2b2f36;
      border-radius: 14px;
      border: 1px solid #e3e6ee;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
      padding: 2.2rem 1.6rem 1.4rem;
      font-family: "Cascadia Mono", "Fira Code", "Consolas", "Courier New", monospace;
      font-size: 0.95rem;
      line-height: 1.6;
      position: relative;
      overflow: visible;
    }
    
    .code-box > small {
      display: block;
      position: absolute;
      top: 0.85rem;
      left: 1.6rem;
      margin: 0;
    }

    body.dark .code-box {
      background: linear-gradient(180deg, #17191c 0%, #101215 100%);
      color: #e7e9ee;
      border: 1px solid rgba(255, 255, 255, 0.06);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    }

    .code-copy {
      position: absolute;
      top: 0.85rem;
      right: 1rem;
      border: 1px solid #e3e6ee;
      background: #ffffff;
      color: #31343a;
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.4rem 0.7rem;
      border-radius: 0.6rem;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      z-index: 10;
    }

    .code-copy:hover,
    .code-copy:focus {
      transform: translateY(-1px);
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
      background: #f4f6fb;
    }

    body.dark .code-copy {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: #e7e9ee;
    }

    body.dark .code-copy:hover,
    body.dark .code-copy:focus {
      background: rgba(255, 255, 255, 0.16);
    }

    body.dark .code-box > small {
      color: #e7e9ee;
    }

    code {
  background: rgba(208, 208, 208, 0.153);
  padding: 0.08em 0.25em;
  border-radius: 0.25rem;
  font-family: "Courier New", monospace;
}

body.dark code {
  background: rgba(96, 173, 255, 0.062);
}

    .mail-box {
  width: min(95%, 900px);
  max-width: 900px;
  margin: 30px auto;
  background: white;
  border: 1px solid #cfd8dc;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.mail-topbar {
  background-color: #2f3a4a;
  color: white;
  padding: 12px 18px;
  font-weight: bold;
}

.mail-header {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #d6dde3;
}

.mail-header div {
  margin: 6px 0;
}

.mail-header span {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  color: #444;
}

.mail-body {
  padding: 22px;
  line-height: 1.6;
  color: #222;
}

body.dark .mail-box {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.32);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45);
}

body.dark .mail-topbar {
  background-color: rgba(31, 39, 80, 0.603);
  color: #f8fafc;
}

body.dark .mail-header {
  background-color: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

body.dark .mail-header span {
  color: #d1d5db;
}

body.dark .mail-body {
  color: #e2e8f0;
}

    /* Alle Elemente mit Courier New als Inline-Schriftart hervorheben */
    [style*="Courier New"] {
      background: rgba(255, 255, 255, 0.28) !important;
      background-color: rgba(208, 208, 208, 0.28) !important;
      padding: 0.08em 0.18em;
      border-radius: 0.22rem;
    }

    body.dark [style*="Courier New"] {
      background: rgba(96, 173, 255, 0.18) !important;
      background-color: rgba(96, 173, 255, 0.18) !important;
    }