*{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; scroll-padding-top:140px; background:#F4F4F6; }
  body{ background:transparent; color:#B6B6BB; font-family:'Archivo',system-ui,sans-serif; line-height:1.7; overflow-x:clip; }
  ::selection{ background:#CA2B2F; color:#fff; }
  a{ color:#E06A6E; text-decoration:none; }
  a:hover{ color:#fff; }

  /* top nav */
  .shopbtn{ display:inline-flex; align-items:center; gap:8px; background:#CA2B2F; color:#fff; font-size:13.5px; font-weight:700; padding:10px 18px; border-radius:100px; transition:background .25s, transform .25s; }
  .shopbtn:hover{ background:#E03A3E; color:#fff; transform:translateY(-1px); }

  /* hero */
  .hero{ position:relative; overflow:hidden; padding:150px clamp(20px,5vw,64px) 64px; border-bottom:1px solid rgba(255,255,255,.08); background:#0B0B0D; }
  .hero .shard{ position:absolute; top:-22%; right:-7%; width:min(82vw,900px); aspect-ratio:4800/3330; opacity:.52; z-index:1; pointer-events:none; -webkit-mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); }
  .hero .shard img{ width:100%; height:100%; object-fit:contain; object-position:top right; filter:saturate(1.08); }
  .hero-wash{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(202,43,47,.10) 0%, rgba(110,39,51,.22) 52%, rgba(11,11,13,0) 100%); pointer-events:none; }
  .hero-glow{ position:absolute; inset:0; background:radial-gradient(120% 105% at 82% 20%, rgba(202,43,47,.20), rgba(11,11,13,0) 58%); pointer-events:none; }
  .hero-fade{ position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.58) 40%, rgba(11,11,13,.08) 100%); pointer-events:none; }
  .hero-inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; }
  .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.22em; color:#E06A6E; text-transform:uppercase; margin-bottom:20px; }
  .hero h1{ font-family:'Ethnocentric','Archivo',sans-serif; font-weight:400; font-size:clamp(40px,8vw,88px); line-height:1.05; letter-spacing:0; color:#fff; text-transform:uppercase; }
  .hero p{ margin-top:24px; font-size:clamp(16px,2vw,19px); color:#A8A8AC; max-width:620px; line-height:1.6; }

  /* layout */
  .layout{ max-width:1308px; margin:0 auto; padding:clamp(40px,5vw,72px) clamp(20px,5vw,64px) 96px; display:grid; grid-template-columns:200px 1fr; gap:clamp(28px,4vw,72px); align-items:start; }
  .sidenav{ position:sticky; top:140px; display:flex; flex-direction:column; gap:7px; padding-left:30px; }
  .navscroller, .chips{ display:contents; }
  .navlink{ display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:12px; font-size:14.5px; font-weight:600; color:#C8C8CC; border:1px solid transparent; transition:background .2s, color .2s, border-color .2s; }
  .navlink:hover{ background:rgba(255,255,255,.04); color:#fff; }
  .navlink.active{ background:rgba(202,43,47,.10); border-color:rgba(202,43,47,.32); color:#fff; }
  .navnum{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#CA2B2F; }

  /* Sidenav-Timeline — Stationen 01–05, roter Faden pro Topic */
  .rail{ position:absolute; left:14px; top:0; bottom:0; width:16px; pointer-events:none; z-index:1; }
  .rail-track{ position:absolute; left:0; width:2px; transform:translateX(-50%); background:rgba(255,255,255,.11); border-radius:2px; }
  .rail-fill{ position:absolute; left:0; width:2px; height:0; transform:translateX(-50%); background:linear-gradient(180deg,#CA2B2F,#E0454A); box-shadow:0 0 8px rgba(202,43,47,.5); border-radius:2px; transition:height .35s cubic-bezier(.22,.61,.36,1); }
  .rail-node{ position:absolute; left:0; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); background:#0B0B0D; border:2px solid rgba(255,255,255,.26); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; z-index:2; }
  .rail-node.done{ background:#CA2B2F; border-color:#CA2B2F; }
  .rail-node.active{ background:#E0454A; border-color:#E0454A; box-shadow:0 0 0 4px rgba(202,43,47,.14); animation:nodepulse 2s ease-in-out infinite; }
  @keyframes nodepulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(202,43,47,.14), 0 0 8px rgba(224,69,74,.45); } 50%{ box-shadow:0 0 0 7px rgba(202,43,47,.08), 0 0 14px rgba(224,69,74,.75); } }

  .content{ min-width:0; position:relative; }
  .sec{ padding-bottom:clamp(54px,7vw,84px); margin-bottom:clamp(44px,6vw,68px); border-bottom:1px solid rgba(255,255,255,.08); }
  .sec:last-of-type{ border-bottom:0; }
  .sec-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; color:#CA2B2F; text-transform:uppercase; margin-bottom:20px; }
  .sec h2{ font-family:'Archivo',sans-serif; font-weight:900; font-size:clamp(28px,4.4vw,46px); line-height:1.05; letter-spacing:-0.02em; color:#fff; text-transform:uppercase; }
  .sec .lead{ font-size:clamp(15.5px,1.7vw,17.5px); color:#AEAEB2; line-height:1.75; margin-top:20px; max-width:680px; }
  .sec .lead strong{ color:#fff; font-weight:600; }

  /* principle / item cards */
  .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(12px,1.6vw,18px); margin-top:clamp(28px,3vw,40px); }
  .card{ background:#101013; border:1px solid rgba(255,255,255,.07); border-radius:16px; padding:24px 22px; transition:transform .4s cubic-bezier(.22,.61,.36,1), border-color .3s ease; }
  .card:hover{ transform:translateY(-5px); border-color:rgba(202,43,47,.4); }
  .card .k{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:#CA2B2F; text-transform:uppercase; }
  .card h3{ font-size:19px; font-weight:800; color:#fff; letter-spacing:-0.01em; margin:14px 0 8px; }
  .card p{ font-size:14.5px; color:#9F9FA4; line-height:1.6; }

  /* steps */
  .steps{ margin-top:clamp(28px,3vw,38px); display:flex; flex-direction:column; gap:2px; border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden; }
  .step{ display:flex; gap:20px; align-items:flex-start; background:#101013; padding:22px 24px; }
  .step .n{ font-family:'Ethnocentric','Archivo',sans-serif; font-size:22px; color:#CA2B2F; line-height:1; flex:0 0 auto; min-width:42px; }
  .step .t h4{ font-size:17px; font-weight:800; color:#fff; margin-bottom:5px; }
  .step .t p{ font-size:14.5px; color:#9F9FA4; line-height:1.6; }

  /* checklist */
  .checklist{ margin-top:clamp(26px,3vw,36px); display:flex; flex-direction:column; gap:12px; }
  .check{ display:flex; gap:14px; align-items:flex-start; background:#101013; border:1px solid rgba(255,255,255,.07); border-radius:13px; padding:16px 18px; }
  .check .box{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; border:1.5px solid #CA2B2F; display:flex; align-items:center; justify-content:center; color:#CA2B2F; font-size:13px; margin-top:1px; }
  .check p{ font-size:15px; color:#C2C2C6; line-height:1.55; }

  /* callout */
  .callout{ margin-top:clamp(28px,3vw,36px); display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; padding:22px 26px; border:1px solid rgba(202,43,47,.45); background:rgba(202,43,47,.08); border-radius:16px; }
  .callout .big{ font-family:'Ethnocentric','Archivo',sans-serif; font-size:30px; color:#fff; background:#CA2B2F; padding:10px 18px; border-radius:12px; line-height:1; }
  .callout p{ font-size:15.5px; color:#E6D6D6; line-height:1.5; flex:1; min-width:220px; }
  .callout p strong{ color:#fff; }
  .dot{ width:8px; height:8px; border-radius:50%; background:#CA2B2F; display:inline-block; animation:blip 1.6s ease-in-out infinite; }
  @keyframes blip{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

  .disclaimer{ margin-top:8px; font-size:13.5px; color:#7A7A7E; line-height:1.7; max-width:760px; padding:20px 22px; border-left:2px solid rgba(255,255,255,.14); }

  /* reveal */
  [data-reveal]{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
  [data-reveal].in{ opacity:1; transform:none; }

  /* Muster-Shards im Hintergrund */
  .bgshard{ position:fixed; pointer-events:none; z-index:-1; background:url('/assets/brand/pattern-dark.svg') center/contain no-repeat; }
  .bgshard.s1{ width:min(56vw,560px); height:min(39vw,388px); left:-12%; bottom:-8%; opacity:.3; -webkit-mask-image:radial-gradient(120% 130% at 14% 86%,#000 18%,transparent 62%); mask-image:radial-gradient(120% 130% at 14% 86%,#000 18%,transparent 62%); }
  .bgshard.s2{ width:min(46vw,480px); height:min(32vw,333px); right:-10%; top:9%; opacity:.2; transform:rotate(6deg); -webkit-mask-image:radial-gradient(120% 130% at 86% 14%,#000 18%,transparent 60%); mask-image:radial-gradient(120% 130% at 86% 14%,#000 18%,transparent 60%); }
  /* Video-Link auf Anwendungs-Karten */
  .vidlink{ display:flex; align-items:center; gap:8px; margin-top:18px; padding-top:15px; border-top:1px solid rgba(255,255,255,.09); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.07em; color:#C2C2C6; text-transform:uppercase; transition:color .2s ease; }
  .vidlink::after{ content:"\2192"; margin-left:auto; color:#5A5A5E; transition:color .2s ease, transform .2s ease; }
  .vidlink:hover{ color:#fff; }
  .vidlink:hover::after{ color:#fff; transform:translateX(3px); }

  /* Anwendung — interaktives Akkordeon */
  .acc{ margin-top:clamp(30px,3.4vw,46px); border-top:1px solid rgba(255,255,255,.1); }
  .acc-item{ border-bottom:1px solid rgba(255,255,255,.1); }
  .acc-head{ width:100%; display:flex; align-items:center; gap:20px; background:none; border:0; cursor:pointer; text-align:left; font-family:inherit; padding:26px 4px; transition:padding-left .35s cubic-bezier(.22,.61,.36,1); }
  .acc-head:hover{ padding-left:12px; }
  .acc-main{ display:flex; flex-direction:column; gap:7px; min-width:0; flex:1; }
  .acc-cat{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#76767B; }
  .acc-title{ font-size:clamp(20px,2.3vw,27px); font-weight:800; letter-spacing:-0.01em; color:#fff; line-height:1.1; transition:color .25s ease; }
  .acc-head:hover .acc-title{ color:#F0989B; }
  .acc-plus{ position:relative; width:20px; height:20px; flex:0 0 auto; transition:transform .4s cubic-bezier(.22,.61,.36,1); }
  .acc-plus::before, .acc-plus::after{ content:""; position:absolute; left:50%; top:50%; background:#CA2B2F; border-radius:2px; }
  .acc-plus::before{ width:18px; height:2px; transform:translate(-50%,-50%); }
  .acc-plus::after{ width:2px; height:18px; transform:translate(-50%,-50%); }
  .acc-item.open .acc-plus{ transform:rotate(135deg); }
  .acc-body{ overflow:hidden; max-height:0; transition:max-height .5s cubic-bezier(.22,.61,.36,1); }
  .acc-inner{ display:grid; gap:18px; max-width:660px; padding:2px 4px 34px; }
  .acc-block{ font-size:15px; color:#B6B6BB; line-height:1.65; }
  .acc-block b{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; color:#76767B; text-transform:uppercase; font-weight:500; margin-bottom:6px; }
  .acc-block strong{ color:#fff; font-weight:700; }

  /* footer */

  @media (max-width:820px){
    html{ scroll-padding-top:150px; }
    .hero{ min-height:100svh; padding-top:96px; padding-bottom:44px; display:flex; flex-direction:column; justify-content:center; }
    .layout{ display:block; padding-top:0; padding-bottom:72px; }
    .content{ margin-top:30px; }
    .bgshard{ display:none; }
    .sidenav{ position:sticky; top:74px; z-index:50; flex-direction:column; gap:0; padding:19px 0 18px; overflow:visible; margin:0 calc(-1*clamp(20px,5vw,64px)); background:rgba(11,11,13,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08); }
    .navscroller{ display:flex; position:relative; flex-direction:column; gap:9px; overflow-x:auto; overflow-y:hidden; padding:0 clamp(20px,5vw,64px); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .navscroller::-webkit-scrollbar{ display:none; }
    .chips{ display:flex; position:relative; flex-direction:row; gap:8px; width:max-content; }
    .navlink{ white-space:nowrap; flex:0 0 auto; padding:8px 13px; }
    .rail{ display:block; position:relative; left:auto; right:auto; top:auto; bottom:auto; width:max-content; min-width:100%; height:14px; margin:0; pointer-events:none; }
    .rail-track{ top:50%; height:2px; transform:translateY(-50%); }
    .rail-fill{ top:50%; height:2px; transform:translateY(-50%); box-shadow:0 0 8px rgba(202,43,47,.5); }
    .rail-node{ top:50%; width:11px; height:11px; }
    .shopbtn{ font-size:12.5px; padding:9px 15px; }
  }