:root {
    --paper: #F6F7F5;
    --card: #FFFFFF;
    --ink: #1E2A26;
    --sidebar: #17221E;
    --sidebar-text: #AEBDB6;
    --sidebar-active: #FFFFFF;
    --muted: #5C6B65;
    --accent: #0E6A5A;
    --accent-bright: #35A38C;
    --accent-soft: #E3EFEB;
    --signal: #A8402F;
    --signal-soft: #F6E9E5;
    --line: #DDE3DF;
  }
  html { background: var(--paper); }
  body {
    font-family: Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
    color: var(--ink); line-height: 1.65; font-size: 17px; margin: 0;
  }
  h1, h2, h3, h4, .sans, button {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0 0 14px; }
  h2 { font-size: 24px; font-weight: 600; line-height: 1.2; text-wrap: balance; margin: 0 0 12px; }
  h3 { font-size: 18px; font-weight: 600; margin: 28px 0 8px; }
  h4 { font-size: 15.5px; font-weight: 600; margin: 20px 0 6px; }
  p { margin: 0 0 14px; }
  a { color: var(--accent); }
  ul, ol { margin: 0 0 16px; padding-left: 22px; }
  li { margin-bottom: 6px; }

  /* ===== App-Layout ===== */
  .app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

  /* Sidebar */
  aside.side {
    background: var(--sidebar); color: var(--sidebar-text);
    padding: 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column;
  }
  .brand { padding: 22px 20px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .brand .b1 { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 700; color: #FFFFFF; letter-spacing: .01em; }
  .brand .b1 span { color: var(--accent-bright); }
  .brand .b2 { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; }
  nav.menu { padding: 12px 10px; flex: 1; }
  nav.menu .grp {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #6E7F78; padding: 14px 10px 6px;
  }
  nav.menu a {
    display: flex; align-items: center; gap: 10px;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; font-weight: 500; color: var(--sidebar-text); text-decoration: none;
    padding: 8px 10px; border-radius: 6px; line-height: 1.3;
  }
  nav.menu a svg { flex-shrink: 0; opacity: .8; }
  nav.menu a:hover, nav.menu a:focus-visible { color: var(--sidebar-active); background: rgba(255,255,255,.06); }
  nav.menu a.active { color: var(--sidebar-active); background: rgba(53,163,140,.18); }
  nav.menu a.active svg { opacity: 1; color: var(--accent-bright); }
  .side-progress { padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,.08); }
  .side-progress .lbl {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11px; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 7px;
  }
  .side-progress .bar { height: 7px; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
  .side-progress .fill { height: 100%; width: 0%; background: var(--accent-bright); border-radius: 999px; transition: width .3s ease; }
  .side-progress .val { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; margin-top: 6px; font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) { .side-progress .fill, .hdr-progress .fill { transition: none; } }

  /* Header */
  .main { min-width: 0; }
  header.hdr {
    position: sticky; top: 0; z-index: 15;
    background: rgba(246,247,245,.96); backdrop-filter: blur(4px);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 28px;
  }
  .hdr .crumb {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hdr .crumb b { color: var(--ink); }
  a.hdr-progress {
    display: flex; align-items: center; gap: 10px; text-decoration: none;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12.5px; font-weight: 600; color: var(--accent);
    background: var(--accent-soft); border-radius: 999px; padding: 6px 14px; white-space: nowrap;
  }
  .hdr-progress .bar { display: block; width: 72px; height: 7px; background: rgba(14,106,90,.18); border-radius: 999px; overflow: hidden; }
  .hdr-progress .fill { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
  .hdr-progress .val { font-variant-numeric: tabular-nums; }

  /* Suche */
  .search { position: relative; flex: 1; max-width: 340px; min-width: 140px; display: flex; align-items: center; }
  .search > svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; }
  .search input {
    width: 100%; box-sizing: border-box;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13.5px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 14px 7px 33px; outline-offset: 0;
  }
  .search input:focus { border-color: var(--accent); }
  .search .sug {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--card); border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(30,42,38,.12);
    list-style: none; margin: 0; padding: 6px; max-height: 340px; overflow-y: auto;
  }
  .search .sug li { margin: 0; }
  .search .sug button {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 8px 10px; border-radius: 5px;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .search .sug button:hover, .search .sug li.active button { background: var(--accent-soft); }
  .search .sug .s-page { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
  .search .sug .s-text { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.4; }
  .search .sug .s-none { padding: 10px; font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: var(--muted); }
  .search .sug mark { background: #F3E3A8; color: inherit; border-radius: 2px; padding: 0 1px; }
  .flash { animation: flashbg 1.8s ease; }
  @keyframes flashbg { 0% { background: #F3E3A8; } 100% { background: transparent; } }
  @media (prefers-reduced-motion: reduce) { .flash { animation: none; } }
  @media (max-width: 640px) { .hdr .crumb { display: none; } }

  /* Seiteninhalt */
  .content { max-width: 780px; margin: 0 auto; padding: 36px 28px 90px; }
  .page { display: none; }
  .page.visible { display: block; }
  .eyebrow {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: var(--accent); margin: 0 0 6px;
  }
  .lead { font-size: 19px; line-height: 1.55; }
  .goal {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; color: var(--muted); margin: 0 0 18px;
  }
  .goal b { color: var(--ink); font-weight: 600; }

  .box { border-radius: 5px; padding: 16px 18px; margin: 14px 0 18px; font-size: 15px; }
  .box p { margin-bottom: 8px; } .box p:last-child { margin-bottom: 0; }
  .box ul, .box ol { margin-bottom: 8px; padding-left: 18px; }
  .box .box-label {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 6px;
  }
  .box.practice { background: var(--accent-soft); }
  .box.practice .box-label { color: var(--accent); }
  .box.pitfall { background: var(--signal-soft); }
  .box.pitfall .box-label { color: var(--signal); }
  .box.tool { background: var(--card); border: 1px solid var(--line); }
  .box.tool .box-label { color: var(--muted); }

  .tbl-scroll { overflow-x: auto; margin: 16px 0 22px; }
  table { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--card); font-size: 14.5px; line-height: 1.45; }
  th, td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
  th {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600;
    background: var(--accent-soft);
  }
  td.num, th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  td em { font-style: normal; font-weight: 600; }

  .chain-scroll { overflow-x: auto; margin: 16px 0 8px; padding-bottom: 8px; }
  .chain { display: flex; min-width: 640px; }
  .chain .step {
    flex: 1; background: var(--card); border: 1px solid var(--line); padding: 10px 12px;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.35;
  }
  .chain .step + .step { border-left: none; }
  .chain .step b { display: block; color: var(--accent); margin-bottom: 2px; }
  .chain .step span { color: var(--muted); }

  /* Modul-Kacheln auf der Startseite */
  .mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 10px; margin: 18px 0 24px; padding: 0; list-style: none; }
  .mods li { margin: 0; }
  .mods a {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line); border-radius: 6px;
    padding: 14px; text-decoration: none; color: var(--ink); height: 100%; box-sizing: border-box;
  }
  .mods a:hover, .mods a:focus-visible { border-color: var(--accent); }
  .mods svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
  .mods .t { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; line-height: 1.3; }
  .mods .d { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

  /* Pager unten */
  .pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; border-top: 1px solid var(--line); padding-top: 18px; }
  .pager a {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px; font-weight: 600; text-decoration: none; color: var(--accent);
    padding: 8px 4px; max-width: 48%;
  }
  .pager a span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .pager .next { text-align: right; margin-left: auto; }

  /* Roadmap */
  .roadmap { list-style: none; margin: 24px 0 12px; padding: 0; }
  .roadmap li { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); margin: 0; }
  .roadmap li:last-child { border-bottom: 1px solid var(--line); }
  .roadmap .when {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px; font-weight: 600; color: var(--accent); padding-top: 3px; font-variant-numeric: tabular-nums;
  }
  .roadmap h3 { margin: 0 0 4px; }
  .roadmap p { margin: 0; font-size: 15.5px; }

  /* Checkliste */
  .progress-hero { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; margin: 6px 0 26px; }
  .progress-hero .bar { height: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
  .progress-hero .fill { height: 100%; width: 0%; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
  .progress-hero .val { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; color: var(--muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
  .cl-phase { margin: 28px 0 8px; }
  .cl-phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .cl-phase-head h3 { margin: 0; }
  .cl-count { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cl-items { list-style: none; padding: 0; margin: 0 0 8px; }
  .cl-items li { margin: 0; }
  .cl-items label {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--card); border: 1px solid var(--line);
    padding: 10px 14px; margin-bottom: 6px; border-radius: 5px;
    font-size: 15.5px; cursor: pointer;
  }
  .cl-items label:hover { border-color: var(--accent); }
  .cl-items input[type="checkbox"] { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
  .cl-items input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line); text-decoration-thickness: 1.5px; }
  .cl-reset {
    font-size: 13px; font-weight: 600; color: var(--muted);
    background: none; border: 1px solid var(--line); border-radius: 5px; padding: 6px 12px; cursor: pointer; margin-top: 12px;
  }
  .cl-reset:hover { color: var(--signal); border-color: var(--signal); }

  /* Downloads */
  .dl-list { list-style: none; padding: 0; margin: 0 0 24px; }
  .dl-list li { margin: 0 0 8px; }
  .dl-list .row {
    display: flex; align-items: center; gap: 14px;
    background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px;
  }
  .dl-list .row svg { color: var(--accent); flex-shrink: 0; }
  .dl-list .tx { flex: 1; min-width: 0; }
  .dl-list .t { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 600; }
  .dl-list .d { font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
  .dl-list a.ext, .dl-list button.gen {
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    color: var(--accent); background: var(--accent-soft); border: none; border-radius: 999px;
    padding: 7px 14px; text-decoration: none; cursor: pointer;
  }
  .dl-list a.ext:hover, .dl-list button.gen:hover { background: var(--accent); color: #fff; }

  footer.foot { margin-top: 48px; font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: var(--muted); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Mobile */
  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    aside.side { position: static; height: auto; }
    nav.menu { display: flex; overflow-x: auto; padding: 8px; gap: 2px; }
    nav.menu .grp { display: none; }
    nav.menu a { white-space: nowrap; padding: 7px 10px; }
    .brand { padding: 16px 20px 10px; }
    .side-progress { display: none; }
    .content { padding: 28px 20px 80px; }
    header.hdr { padding: 10px 20px; }
    .roadmap li { grid-template-columns: 1fr; gap: 4px; }
  }