*
  {
    box-sizing: border-box;
  }

  body
  {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #131210;
    color: #e8e6e3;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
  }

  main
  {
    width: 100%;
    max-width: 440px;
  }

  .punkte
  {
    display: flex;
    gap: 9px;
    margin-bottom: 26px;
  }

  .punkte span
  {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: block;
  }

  h1
  {
    margin: 0 0 10px 0;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.01em;
  }

  p
  {
    margin: 0 0 26px 0;
    color: #a8a4a0;
  }

  nav
  {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 0 0 30px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #2c2a27;
  }

  nav a
  {
    color: #7d7975;
    text-decoration: none;
    font-size: 15px;
  }

  nav a:hover, nav a:focus
  {
    color: #ffa500;
  }

  nav a.aktiv
  {
    color: #e8e6e3;
    font-weight: bold;
  }

  ul
  {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #2c2a27;
  }

  li
  {
    border-bottom: 1px solid #2c2a27;
  }

  li a
  {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 2px;
    color: #e8e6e3;
    text-decoration: none;
  }

  li a:hover, li a:focus
  {
    color: #ffa500;
  }

  li a .was
  {
    color: #7d7975;
    font-size: 13px;
    text-align: right;
    flex-shrink: 0;
  }

  h2
  {
    margin: 30px 0 10px 0;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7d7975;
  }

  li a .wer
  {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
  }

  li a svg
  {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #7d7975;
  }

  li a:hover svg, li a:focus svg
  {
    color: #ffa500;
  }

  li a .icon
  {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background: #7d7975;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  li a:hover .icon, li a:focus .icon
  {
    background: #ffa500;
  }

  .icon-instagram
  {
    -webkit-mask-image: url(icons/instagram.svg);
    mask-image: url(icons/instagram.svg);
  }

  .icon-facebook
  {
    -webkit-mask-image: url(icons/facebook.svg);
    mask-image: url(icons/facebook.svg);
  }

  .icon-discord
  {
    -webkit-mask-image: url(icons/discord.svg);
    mask-image: url(icons/discord.svg);
  }

  /* --- breite Seiten (PC-Builds) --- */

  body.breit main
  {
    max-width: 760px;
  }

  /* --- aufklappbare Builds --- */

  details.build
  {
    border-bottom: 1px solid #2c2a27;
  }

  details.build:first-of-type
  {
    border-top: 1px solid #2c2a27;
  }

  details.build summary
  {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 2px;
    cursor: pointer;
    list-style: none;
  }

  details.build summary::-webkit-details-marker
  {
    display: none;
  }

  details.build summary:hover .titel,
  details.build summary:focus .titel
  {
    color: #ffa500;
  }

  details.build summary .titel::before
  {
    content: "+";
    display: inline-block;
    width: 16px;
    color: #7d7975;
  }

  details.build[open] summary .titel::before
  {
    content: "\2013";
  }

  details.build .was
  {
    color: #7d7975;
    font-size: 13px;
    text-align: right;
    flex-shrink: 0;
  }

  details.build > table,
  details.build > h3,
  details.build > p
  {
    margin-left: 16px;
  }

  details.build > table:last-child
  {
    margin-bottom: 20px;
  }

  h3
  {
    margin: 22px 0 6px 0;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7d7975;
  }

  p.hinweis, p.quelle
  {
    margin: 0 0 10px 0;
    font-size: 13px;
  }

  p.quelle
  {
    margin: 12px 0 20px 0;
  }

  p.quelle a
  {
    color: #a8a4a0;
  }

  p.quelle a:hover, p.quelle a:focus
  {
    color: #ffa500;
  }

  /* --- Teilelisten --- */

  table.teile
  {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 14px 0;
  }

  table.teile th
  {
    width: 150px;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
    font-size: 13px;
    color: #7d7975;
    padding: 7px 12px 7px 0;
    border-bottom: 1px solid #211f1d;
  }

  table.teile td
  {
    vertical-align: top;
    padding: 7px 0;
    border-bottom: 1px solid #211f1d;
  }

  table.teile td.preis
  {
    width: 110px;
    text-align: right;
    white-space: nowrap;
    color: #a8a4a0;
    font-size: 14px;
    padding-left: 12px;
  }

  table.teile tr.summe th,
  table.teile tr.summe td
  {
    border-bottom: none;
    border-top: 1px solid #2c2a27;
    color: #e8e6e3;
    font-weight: bold;
  }

  @media (max-width: 420px)
  {
    h1 { font-size: 25px; }
    li a { flex-direction: column; gap: 5px; }
    li a .was { text-align: left; }
    table.teile th { width: auto; display: block; padding: 10px 0 0 0; border: none; }
    table.teile td { display: block; padding: 0 0 10px 0; }
    table.teile td.preis { width: auto; text-align: left; padding-left: 0; }
    details.build summary { flex-direction: column; gap: 3px; }
    details.build .was { text-align: left; }
  }